mobile-version

This commit is contained in:
Lettre Enfants 2024-10-03 21:43:59 +02:00
parent 93f4d957d8
commit 02973c5e83
17 changed files with 1830 additions and 54 deletions

View file

@ -17,7 +17,7 @@ color : blue-1
#### Element #### Element
{{< /implementation >}} {{< /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 #### Cli
{{< /implementation >}} {{< /implementation >}}
{{< /grid >}} {{< /grid >}}

View file

@ -8,7 +8,10 @@ weight : 4
{{< switch-box title="Ldap" >}} {{< switch-box title="Ldap" >}}
With this LDAP approach **everything is centralized** (except authorization). 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. **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 >}} {{< /switch-box >}}
@ -16,20 +19,29 @@ With this LDAP approach **everything is centralized** (except authorization).
{{< switch-box title="Ldap+SSO" >}} {{< 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. 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 >}}
{{< switch-box title="SSO" >}} {{< switch-box title="SSO" >}}
On modern web infrastructure, LDAP started to be abandoned because **loose provisioning can also be done via SSO protocols.** 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 >}}
{{< switch-box title="SSO+SCIM" >}} {{< 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.** **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 >}} {{< /switch-box >}}
| | LDAP | LDAP & SSO | SSO | SSO & SCIM | | | 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 color : yellow
weight : 1 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 >}} {{< grid >}}
{{< card icon="user" >}} {{< card icon="user" >}}
#### Authentication #### Authentication
@ -26,7 +32,7 @@ Where are users identity & credentials stored?
How to manage & transfer users identity ? How to manage & transfer users identity ?
{{< /card >}} {{< /card >}}
{{< /grid >}} {{< /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 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. 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" }} {{ define "main" }}
<main class="home flex"> <main class="home flex">
<section class="main-first flex align-center"> <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> <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> <a class="btn lv1" href="#content">Discover SCIM ↓</a>
<!--<img class="img-background" src="media/global.png"></img>--> <!--<img class="img-background" src="media/global.png"></img>-->

View file

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

View file

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

View file

@ -168,10 +168,36 @@ 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) { document.querySelectorAll('td').forEach(function(td) {
var svg = td.querySelector('svg'); var svg = td.querySelector('svg');
if (svg) { if (svg) {
var text = td.innerHTML.replace(svg.outerHTML, ''); var text = td.innerHTML.replace(svg.outerHTML, '');
td.innerHTML = svg.outerHTML + '<p class="">' + text + '</p>'; td.innerHTML = svg.outerHTML + '<p class="">' + text + '</p>';
} }
}); });