Merge branch 'develop' into master
All checks were successful
/ build (push) Successful in 28s
/ deploy (push) Successful in 4s

This commit is contained in:
TimJ 2024-10-08 12:14:12 +00:00
commit 74bd2bdc09
17 changed files with 1830 additions and 54 deletions

View file

@ -17,7 +17,7 @@ color : blue-1
#### Element
{{< /implementation >}}
{{< implementation type="client" devs="IndieHosters" link="https://scim2-cli.readthedocs.io/en/latest/#">}}
{{< implementation type="client" devs="Yaal" link="https://scim2-cli.readthedocs.io/en/latest/#">}}
#### Cli
{{< /implementation >}}
{{< /grid >}}

View file

@ -8,7 +8,10 @@ weight : 4
{{< switch-box title="Ldap" >}}
With this LDAP approach **everything is centralized** (except authorization).
![LDAP diagram](media/ldap-diagram.svg)
<picture>
<source srcset="media/small/ldap-diagram.svg" media="(max-width: 768px)">
<img src="media/ldap-diagram.svg" alt="LDAP diagram">
</picture>
**Everything speaks the LDAP protocol langage.** Identities are stored in an LDAP directory, which is provisioned via LDAP protocol. Authentication is done by the application that asks the users credentials and validates them against the directory via LDAP protocol.
{{< /switch-box >}}
@ -16,20 +19,29 @@ With this LDAP approach **everything is centralized** (except authorization).
{{< switch-box title="Ldap+SSO" >}}
This architecture **tackles the two main drawbacks of the only LDAP approach** : the missing single sign-on and the security vulnerability. **Authentication is delegated to other web protocols** (like OAuth, OIDC or SAML). This way, the user logs in only once to the identity provider.
![LDAP with SSO diagram](media/ldap-sso-diagram.svg)
<picture>
<source srcset="media/small/ldap-sso-diagram.svg" media="(max-width: 768px)">
<img src="media/ldap-sso-diagram.svg" alt="LDAP with SSO diagram">
</picture>
{{< /switch-box >}}
{{< switch-box title="SSO" >}}
On modern web infrastructure, LDAP started to be abandoned because **loose provisioning can also be done via SSO protocols.**
![SSO only diagram](media/sso-diagram.svg)
<picture>
<source srcset="media/small/sso-diagram.svg" media="(max-width: 768px)">
<img src="media/sso-diagram.svg" alt="SSO only diagram">
</picture>
{{< /switch-box >}}
{{< switch-box title="SSO+SCIM" >}}
**SCIM solve the remaining problems** via a simple standard web api. This infrastructure is **event driven, a provisioning action on the IdP is quickly passed on all applications.**
![SSO with SCIM diagram](media/sso-scim-diagram.svg)
<picture>
<source srcset="media/small/sso-scim-diagram.svg" media="(max-width: 768px)">
<img src="media/sso-scim-diagram.svg" alt="SSO with SCIM diagram">
</picture>
{{< /switch-box >}}
| | LDAP | LDAP & SSO | SSO | SSO & SCIM |

View file

@ -4,7 +4,13 @@ description : "What we speak about and in **which environment**. We must agree o
color : yellow
weight : 1
---
![basics of identity management](media/illus-basics.svg)
<picture>
<source srcset="media/small/illus-basics.svg" media="(max-width: 768px)">
<img src="media/illus-basics.svg" alt="Illustation of the basics of identity magagment">
</picture>
{{< grid >}}
{{< card icon="user" >}}
#### Authentication
@ -26,7 +32,7 @@ Where are users identity & credentials stored?
How to manage & transfer users identity ?
{{< /card >}}
{{< /grid >}}
<img alt="illustration of losing data" src="media/illus-loose-data.svg" class="float-right">
<img alt="illustration of losing data" src="media/illus-loose-data.svg" class="float-right w-60">
### Our environment
Our digital work environment is composed of **many applications** and web services. We want a **seamless user experience** for our free software based collaboration platform. With a **Single Sign-on (SSO)** system users get a unified login and logout experience but there is a catch.

153
static/media/illus-home.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 50 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 13 MiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 51 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 1.9 MiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 1.9 MiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 2 MiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 2 MiB

View file

@ -1,7 +1,8 @@
{{ define "main" }}
<main class="home flex">
<section class="main-first flex align-center">
{{- partial (printf "svg/illus-home.svg") . -}}
{{- partial (printf "svg/illus-home-small.svg") . -}}
<!--{{- partial (printf "svg/illus-home.svg") . -}}-->
<h1>Make identity managing <span class="mark">fast</span>, <span class="mark">simple</span> and <span class="mark">interoperable</span></h1>
<a class="btn lv1" href="#content">Discover SCIM ↓</a>
<!--<img class="img-background" src="media/global.png"></img>-->

View file

@ -5,12 +5,12 @@
<h4>Collaborators</h4>
<ul class="flex-row">
<img src="{{ "media/logo/ih.svg" | absURL }}">
<img src="{{ "media/logo/yaal.svg" | absURL }}">
<img src="{{ "media/logo/audriga.svg" | absURL }}">
<img src="{{ "media/logo/fairkom.svg" | absURL }}">
<img src="{{ "media/logo/greenhost.svg" | absURL }}">
<img src="{{ "media/logo/ngi.png" | absURL }}">
<img src="{{ "media/logo/ih.svg" | relURL }}">
<img src="{{ "media/logo/yaal.svg" | relURL }}">
<img src="{{ "media/logo/audriga.svg" | relURL }}">
<img src="{{ "media/logo/fairkom.svg" | relURL }}">
<img src="{{ "media/logo/greenhost.svg" | relURL }}">
<img src="{{ "media/logo/ngi.png" | relURL }}">
</ul>

View file

@ -1,17 +1,22 @@
<header id="header">
{{ $currentPath := .Permalink }}
<div class="flex-row space-between baseline">
<div class="flex-row baseline">
<div class="flex-row baseline">
<div id="logo">
{{- partial (printf "svg/scim.svg") . -}}
</div>
<nav id="menu" class="flex-row">
<ul class="flex-row">
<li><a class="{{ if eq $currentPath (absURL "/") }}active{{ end }}" href="{{ "/" | absURL }}">Overview</a></li>
<li><a class="{{ if eq $currentPath (absURL "/implementations/") }}active{{ end }}" href="{{ "/implementations/" | absURL }}">Implementations</a></li>
</ul>
</nav>
<div id="logo-menu">
<a>{{- partial (printf "svg/menu.svg") . -}}</a>
</div>
<a class="btn lv2" target="_blank" href="https://simplecloud.info">See the official spec ↗</a>
<nav id="menu" class="flex-row space-between baseline w-80">
<div>
<ul class="flex-row">
<li><a class="{{ if eq $currentPath (absURL "/") }}active{{ end }}" href="{{ "/" | absURL }}">Overview</a></li>
<li><a class="{{ if eq $currentPath (absURL "/implementations/") }}active{{ end }}" href="{{ "/implementations/" | absURL }}">Implementations</a></li>
</ul>
</div>
<div>
<a class="btn lv2" target="_blank" href="https://simplecloud.info">See the official spec ↗</a>
</div>
</nav>
</div>
</header>

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 51 KiB

View file

@ -0,0 +1,5 @@
<svg width="9" height="8" viewBox="0 0 9 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1H8" stroke="white" stroke-linecap="round"/>
<path d="M1 4H8" stroke="white" stroke-linecap="round"/>
<path d="M1 7H8" stroke="white" stroke-linecap="round"/>
</svg>

After

Width:  |  Height:  |  Size: 270 B

View file

@ -37,7 +37,7 @@
}
p:not(:has(img)), ul, li, mark{
font-size: clamp(.875rem, 3.966vw, 1.1875rem);
font-size: clamp(.875rem, 3.75vw, 1.1rem);
max-width: 36em;
font-weight: normal;
}
@ -76,7 +76,7 @@ body{
/* TEXT */
h1{
font-size: 2.5em;
font-size: 2.1em;
font-weight: 1000;
max-width: 16em;
padding: 0;
@ -87,9 +87,10 @@ h1{
}
h2{
font-size: 1.8em;
font-size: 1.5em;
text-transform: uppercase;
font-weight: 1000;
text-align: center;
padding: 0;
margin: 0;
margin-bottom: .5em;
@ -117,7 +118,7 @@ h4{
background-color: var(--marked-color);
color: var(--paper-color);
margin-bottom: 0;
font-size: 1.2em;
font-size: 1em;
font-weight: 500;
margin-top: 3em;
width: fit-content;
@ -173,7 +174,7 @@ figcaption{
/* LINK */
a{color: inherit;cursor:default;}
a{color: inherit;cursor:default;font-size: inherit;}
a:not(.btn):not(.active):hover{
color: var(--marked-color);
@ -213,9 +214,10 @@ svg{
text-decoration: inherit;
font-weight: bolder;
font-size: 1.15rem;
padding: .5em 1.2em;
padding: 1% 2.5%;
border-radius: 2px;
border: 2px solid var(--paper-color);
margin-bottom: .5em;
}
.btn:not(.active):hover{
transform:translateY(-2px) scale(1.01);
@ -278,9 +280,23 @@ svg{
align-items: baseline;
}
img, .w-100{
.w-100{
width: 100%;
}
.w-80{
width: 83%;
}
img{
width: 100%;
max-width: 720px;
}
picture{
width: 100%;
display: flex;
justify-content: center;
}
.float-right{
float: right;
@ -335,7 +351,7 @@ img, .w-100{
header{
width: 100%;
top: 0;
padding: .5em 0em;
padding:1% 0%;
position: fixed;
z-index: 100;
--paper-color: var(--black-dark);
@ -364,6 +380,15 @@ header>div{
height: 100%;
width: auto;
}
#logo-menu{
height: 1.2em;
display: none;
}
#logo-menu svg{
height: 100%;
width: auto;
}
/* MENU */
@ -391,7 +416,7 @@ header .btn.lv2{
font-weight : normal;
padding: .2em .4em;
border: none;
background-color: var(--black);
background-color: var(--paper-color);
}
#menu a.active{
@ -454,14 +479,14 @@ main{
width: fit-content;
margin: 2em auto;
max-width: 80%;
margin-bottom: 8em;
margin-bottom: 6em;
}
.main-first svg{
max-width: 32rem;
max-width: 50%;
margin-bottom: 4em;
overflow: visible;
margin-top: 2em;
margin-top: 3em;
}
/* SVG ANIM */
@ -511,20 +536,18 @@ g.word{
}
.section-header{
width: 90%;
padding: 5%;
padding-top: 4em;
padding-bottom: 3em;
margin-bottom: 6em;
margin-bottom: 3.5em;
margin-top: 3em;
}
.section-header:first-of-type{
margin-top: -.3rem;
}
.subtitle{
max-width: 36rem;
text-align: center;
font-size: 1.25rem;
font-size: 1.15rem;
}
/* GRID */
@ -541,14 +564,16 @@ g.word{
.card{
border: .1px var(--text-color) solid;
border-radius: 2px;
width: 80%;
position: relative;
padding: .5em 1rem;
}
.card svg{margin-top: 1em;}
.card h4{margin-top: 1.5em;}
.card p{margin-bottom: .5em;}
.card p{
word-break: break-word;
margin-bottom: .5em;
}
/* cards implementation */
.implementation p{
@ -560,22 +585,15 @@ g.word{
margin-top: 1em;
}
.implementation .lv1{
.implementation .lv1, .implementation .draft{
padding: .1em .3em;
margin-top: .5em;
margin-bottom: 1em;
top: 1em;
}
.implementation .draft{
margin-left: -1em;
}
/* ACTIVABLE TRIGGERS */
/* Switch-boxes */
#switch-box-trigger{
margin-bottom: .5em;
}
#switch-box-trigger .btn{
margin-right: .5rem;
@ -588,7 +606,7 @@ g.word{
position: relative;
z-index: 0;
border: 2px solid var(--marked-color);
padding: .5em 2em;
padding: .5em 4%;
border-radius: 2px;
background-color: var(--paper-color);
}
@ -628,7 +646,7 @@ td svg{
th, td {
border: 1px solid var(--text-color);
padding: 1.5em 1em;
text-align: center;
text-align: center!important;
}
td:first-of-type{
@ -670,6 +688,15 @@ table svg:nth-child(2){
td em {
display: none;
}
.content, footer, header>div{
width: 85%;
}
header>div{
width: 92%;
}
.main-first svg{
max-width: 60%;
}
}
@ -677,6 +704,63 @@ table svg:nth-child(2){
td, th{
font-size: .8em;
}
.float-right{
float: none;
width: 95%;
margin-left: 2.5%;
}
.float-left{
float: none;
margin-right: 0;
width: 95%;
margin-left: 2.5%;
}
.w-60{
width: 60%!important;
margin: 2% 15%;
}
.main-first svg{
margin-top: 4em;
}
.content, footer{
width: 87%;
}
header>div{
width: 93%;
}
.main-first svg{
max-width: 66%;
}
header>div{
justify-content: space-between;
}
#menu{
--paper-color: var(--white);
--text-color: var(--black);
--marked-color:var(--blue-2-dark);
color: var(--text-color);
display: none;
position: absolute;
top:3em;
right:1em;
background-color: var(--paper-color);
border: .1px var(--marked-color) solid;
border-radius: .1em;
flex-direction: column;
width: fit-content;
padding:1em;
padding-top: .5em;
}
#menu.open {
display: flex;
}
#menu ul{
flex-direction: column;
line-height: 2em;
}
#logo-menu{
display: block;
}
}
@media (max-width: 425px) {
@ -688,6 +772,15 @@ table svg:nth-child(2){
td, th{
font-size: .7em;
}
.content, footer{
width: 92%;
}
header>div{
width: 95%;
}
.main-first svg{
max-width: 70%;
}
}
@media (max-width: 375px) {
@ -699,4 +792,7 @@ table svg:nth-child(2){
td, th{
font-size: .6em;
}
.main-first svg{
max-width: 80%;
}
}

View file

@ -168,6 +168,31 @@ document.addEventListener('DOMContentLoaded', () => {
});
});
// Open Menu
document.addEventListener('DOMContentLoaded', function () {
const logoMenu = document.getElementById('logo-menu');
const menu = document.getElementById('menu');
function toggleMenu() {
menu.classList.toggle('open');
}
logoMenu.addEventListener('click', function (event) {
event.stopPropagation();
toggleMenu();
});
document.addEventListener('click', function (event) {
if (!menu.contains(event.target) && !logoMenu.contains(event.target)) {
if (menu.classList.contains('open')) {
toggleMenu();
}
}
});
});
document.querySelectorAll('td').forEach(function(td) {
var svg = td.querySelector('svg');
if (svg) {
@ -175,3 +200,4 @@ document.querySelectorAll('td').forEach(function(td) {
td.innerHTML = svg.outerHTML + '<p class="">' + text + '</p>';
}
});