Compare commits
No commits in common. "74bd2bdc09cda470c58e1c1b29cacfd4dff90f5b" and "aac17bff905071ca01086934477866df27c2d3d2" have entirely different histories.
74bd2bdc09
...
aac17bff90
17 changed files with 54 additions and 1830 deletions
|
|
@ -17,7 +17,7 @@ color : blue-1
|
|||
#### Element
|
||||
{{< /implementation >}}
|
||||
|
||||
{{< implementation type="client" devs="Yaal" link="https://scim2-cli.readthedocs.io/en/latest/#">}}
|
||||
{{< implementation type="client" devs="IndieHosters" link="https://scim2-cli.readthedocs.io/en/latest/#">}}
|
||||
#### Cli
|
||||
{{< /implementation >}}
|
||||
{{< /grid >}}
|
||||
|
|
@ -8,10 +8,7 @@ weight : 4
|
|||
{{< switch-box title="Ldap" >}}
|
||||
With this LDAP approach **everything is centralized** (except authorization).
|
||||
|
||||
<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 user’s credentials and validates them against the directory via LDAP protocol.
|
||||
{{< /switch-box >}}
|
||||
|
|
@ -19,29 +16,20 @@ 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.
|
||||
|
||||
<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.**
|
||||
|
||||
<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.**
|
||||
|
||||
<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 |
|
||||
|
|
|
|||
|
|
@ -4,13 +4,7 @@ description : "What we speak about and in **which environment**. We must agree o
|
|||
color : yellow
|
||||
weight : 1
|
||||
---
|
||||
|
||||
<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
|
||||
|
|
@ -32,7 +26,7 @@ Where are user’s identity & credentials stored?
|
|||
How to manage & transfer user’s identity ?
|
||||
{{< /card >}}
|
||||
{{< /grid >}}
|
||||
<img alt="illustration of losing data" src="media/illus-loose-data.svg" class="float-right w-60">
|
||||
<img alt="illustration of losing data" src="media/illus-loose-data.svg" class="float-right">
|
||||
|
||||
### 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.
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 50 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 13 MiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 51 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 1.9 MiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 1.9 MiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 2 MiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 2 MiB |
|
|
@ -1,8 +1,7 @@
|
|||
{{ define "main" }}
|
||||
<main class="home flex">
|
||||
<section class="main-first flex align-center">
|
||||
{{- partial (printf "svg/illus-home-small.svg") . -}}
|
||||
<!--{{- partial (printf "svg/illus-home.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>-->
|
||||
|
|
|
|||
|
|
@ -5,12 +5,12 @@
|
|||
|
||||
<h4>Collaborators</h4>
|
||||
<ul class="flex-row">
|
||||
<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 }}">
|
||||
<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 }}">
|
||||
</ul>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,22 +1,17 @@
|
|||
<header id="header">
|
||||
{{ $currentPath := .Permalink }}
|
||||
<div class="flex-row baseline">
|
||||
<div class="flex-row space-between baseline">
|
||||
<div class="flex-row baseline">
|
||||
<div id="logo">
|
||||
{{- partial (printf "svg/scim.svg") . -}}
|
||||
</div>
|
||||
<div id="logo-menu">
|
||||
<a>{{- partial (printf "svg/menu.svg") . -}}</a>
|
||||
<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>
|
||||
<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>
|
||||
<a class="btn lv2" target="_blank" href="https://simplecloud.info">See the official spec ↗</a>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 51 KiB |
|
|
@ -1,5 +0,0 @@
|
|||
<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>
|
||||
|
Before Width: | Height: | Size: 270 B |
|
|
@ -37,7 +37,7 @@
|
|||
}
|
||||
|
||||
p:not(:has(img)), ul, li, mark{
|
||||
font-size: clamp(.875rem, 3.75vw, 1.1rem);
|
||||
font-size: clamp(.875rem, 3.966vw, 1.1875rem);
|
||||
max-width: 36em;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
|
@ -76,7 +76,7 @@ body{
|
|||
|
||||
/* TEXT */
|
||||
h1{
|
||||
font-size: 2.1em;
|
||||
font-size: 2.5em;
|
||||
font-weight: 1000;
|
||||
max-width: 16em;
|
||||
padding: 0;
|
||||
|
|
@ -87,10 +87,9 @@ h1{
|
|||
}
|
||||
|
||||
h2{
|
||||
font-size: 1.5em;
|
||||
font-size: 1.8em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 1000;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-bottom: .5em;
|
||||
|
|
@ -118,7 +117,7 @@ h4{
|
|||
background-color: var(--marked-color);
|
||||
color: var(--paper-color);
|
||||
margin-bottom: 0;
|
||||
font-size: 1em;
|
||||
font-size: 1.2em;
|
||||
font-weight: 500;
|
||||
margin-top: 3em;
|
||||
width: fit-content;
|
||||
|
|
@ -174,7 +173,7 @@ figcaption{
|
|||
|
||||
|
||||
/* LINK */
|
||||
a{color: inherit;cursor:default;font-size: inherit;}
|
||||
a{color: inherit;cursor:default;}
|
||||
|
||||
a:not(.btn):not(.active):hover{
|
||||
color: var(--marked-color);
|
||||
|
|
@ -214,10 +213,9 @@ svg{
|
|||
text-decoration: inherit;
|
||||
font-weight: bolder;
|
||||
font-size: 1.15rem;
|
||||
padding: 1% 2.5%;
|
||||
padding: .5em 1.2em;
|
||||
border-radius: 2px;
|
||||
border: 2px solid var(--paper-color);
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
.btn:not(.active):hover{
|
||||
transform:translateY(-2px) scale(1.01);
|
||||
|
|
@ -280,23 +278,9 @@ svg{
|
|||
align-items: baseline;
|
||||
}
|
||||
|
||||
.w-100{
|
||||
img, .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;
|
||||
|
|
@ -351,7 +335,7 @@ picture{
|
|||
header{
|
||||
width: 100%;
|
||||
top: 0;
|
||||
padding:1% 0%;
|
||||
padding: .5em 0em;
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
--paper-color: var(--black-dark);
|
||||
|
|
@ -380,15 +364,6 @@ header>div{
|
|||
height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
#logo-menu{
|
||||
height: 1.2em;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#logo-menu svg{
|
||||
height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* MENU */
|
||||
|
||||
|
|
@ -416,7 +391,7 @@ header .btn.lv2{
|
|||
font-weight : normal;
|
||||
padding: .2em .4em;
|
||||
border: none;
|
||||
background-color: var(--paper-color);
|
||||
background-color: var(--black);
|
||||
}
|
||||
|
||||
#menu a.active{
|
||||
|
|
@ -479,14 +454,14 @@ main{
|
|||
width: fit-content;
|
||||
margin: 2em auto;
|
||||
max-width: 80%;
|
||||
margin-bottom: 6em;
|
||||
margin-bottom: 8em;
|
||||
}
|
||||
|
||||
.main-first svg{
|
||||
max-width: 50%;
|
||||
max-width: 32rem;
|
||||
margin-bottom: 4em;
|
||||
overflow: visible;
|
||||
margin-top: 3em;
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
/* SVG ANIM */
|
||||
|
|
@ -536,18 +511,20 @@ g.word{
|
|||
}
|
||||
|
||||
.section-header{
|
||||
width: 90%;
|
||||
padding: 5%;
|
||||
padding-top: 4em;
|
||||
padding-bottom: 3em;
|
||||
margin-bottom: 3.5em;
|
||||
margin-bottom: 6em;
|
||||
margin-top: 3em;
|
||||
}
|
||||
|
||||
.section-header:first-of-type{
|
||||
margin-top: -.3rem;
|
||||
}
|
||||
|
||||
.subtitle{
|
||||
max-width: 36rem;
|
||||
text-align: center;
|
||||
font-size: 1.15rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
/* GRID */
|
||||
|
|
@ -564,16 +541,14 @@ 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{
|
||||
word-break: break-word;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
.card p{margin-bottom: .5em;}
|
||||
|
||||
/* cards implementation */
|
||||
.implementation p{
|
||||
|
|
@ -585,15 +560,22 @@ g.word{
|
|||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.implementation .lv1, .implementation .draft{
|
||||
.implementation .lv1{
|
||||
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;
|
||||
|
|
@ -606,7 +588,7 @@ g.word{
|
|||
position: relative;
|
||||
z-index: 0;
|
||||
border: 2px solid var(--marked-color);
|
||||
padding: .5em 4%;
|
||||
padding: .5em 2em;
|
||||
border-radius: 2px;
|
||||
background-color: var(--paper-color);
|
||||
}
|
||||
|
|
@ -646,7 +628,7 @@ td svg{
|
|||
th, td {
|
||||
border: 1px solid var(--text-color);
|
||||
padding: 1.5em 1em;
|
||||
text-align: center!important;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
td:first-of-type{
|
||||
|
|
@ -688,15 +670,6 @@ 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%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -704,63 +677,6 @@ 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) {
|
||||
|
|
@ -772,15 +688,6 @@ 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) {
|
||||
|
|
@ -792,7 +699,4 @@ table svg:nth-child(2){
|
|||
td, th{
|
||||
font-size: .6em;
|
||||
}
|
||||
.main-first svg{
|
||||
max-width: 80%;
|
||||
}
|
||||
}
|
||||
|
|
@ -168,31 +168,6 @@ 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) {
|
||||
|
|
@ -200,4 +175,3 @@ document.querySelectorAll('td').forEach(function(td) {
|
|||
td.innerHTML = svg.outerHTML + '<p class="">' + text + '</p>';
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue