[slides.git] / fosdem2017 / index.html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="Author" content="KaiRo - Robert Kaiser">
  <title>Web Logins after Persona</title>
  <link rel="stylesheet" type="text/css" href="slides.css">
  <script type="text/javascript" src="slides.js"></script>
  <link rel="contents" href="#index" title="Overview">
  <link rel="index" id="link-toc" href="#toc" title="Contents">
  <link rel="start" id="link-start" href="#index" title="Start">
</head>
<body onload="docLoaded();">
<header id="header"><div id="header-text">Web Logins</div>
  <div id="subheader-text"></div>
  <a id="headerlogo" href="#index" title="Startseite">Mozilla</a>
</header>
<nav id="slidenav">
  <a href="#toc" id="nav-toc" accesskey="t">toc</a> ||
  <a href="#index" id="nav-start" accesskey="s">start</a> ||
  <a href="#" id="nav-prev" accesskey="p" hidden>&lt; back</a>
  <span id="nav-prev-nolink" class="nolink">&lt; back</span> |
  <a href="#" id="nav-next" id="goNext" accesskey="n" hidden>fwd &gt;</a>
  <span id="nav-next-nolink" class="nolink">fwd &gt;</span>
</nav>

<article id="toc" title="Table of Contents">
<h1>Table of Contents</h1>
<h2>Web Logins after Persona</h2>

<div class="captionedbox">
<p class="captionedbox-caption">The following slides are available in this presentation:</p>
<div class="captionedbox-content">
<ul id="toc-list">
</ul>
</article>

<article id="index" title="Start Page">
<h1>Web Logins after Persona</h1>
<h2>How I solved logins on my small websites</h2>

<div class="simplebox">
<mark><a href="http://home.kairo.at/">Robert Kaiser</a></mark>,
"KaiRo" &lt;kairo@kairo.at&gt;
<br><small>Mozilla Rep, Website developer &amp; Project Manager</small>
</div>

<div class="captionedbox">
<p class="captionedbox-caption">Slides:
  <a href="https://slides.kairo.at/fosdem2017/">https://slides.kairo.at/fosdem2017/</a></p>
<div class="captionedbox-content small">
<ul class="small">
  <li>Created for
    <a href="http://fosdem.org/2017/schedule/track/mozilla/">Mozilla
    Developer Room</a> at <a href="http://www.fosdem.org/">FOSDEM 2017</a> in
    Brussels.</li>
  <li>Written in HTML 5 with CSS 3 and JavaScript.</li>
  <li>Navigation via links on all slides, via access keys
   (e.g. "n"/Alt+Shift+N for "next") or back/forward arrow keys</li>
  <li><a href="#toc">Contents</a></li>
  <li><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/at/"><img
        alt="Licensed under CC-BY-SA," style="border-width:0;vertical-align:bottom;"
        src="cc-by-sa-80x15.png"></a> 01-02/2017 Robert Kaiser.</li>
</ul>
</div>
</div>
</article>

<article id="persona" title="What's Persona?">
<h1>What <s>is</s>was <mark>Persona</mark>?</h1>

<div class="simplebox">
<img src="persona-logo-wordmark.png" alt="Mozilla Persona" class="slidepic">
<p>Login/Identity solution by Mozilla, <mark>2011-2016</mark></p>
<ul>
  <li>Decentralized / Federated (with Fallback)</li>
  <li>Multiple identities</li>
  <li>Verified Email</li>
  <li>Potential for browser integration</li>
  <li>BrowserID protocol, easy to implement, server-side verification</li>
  <li>Permission-less</li>
</ul>
<p><a href="http://feeding.cloud.geek.nz/posts/persona-guiding-principles/">See
blog post by François Marier</a> (feeding.cloud.geek.nz)</p>
</div>
</article>

<article id="smallsite" title="Needs of a Small Website">
<h1>Needs of a Small Website</h1>

<div class="simplebox">
<img src="enter_access_code.jpg" alt="Enter Access Code" class="slidepic">
<ul>
  <li><mark>Easy</mark> to implement</li>
  <li><mark>Trusted</mark> identification</li>
  <li>Avoid dealing with how to <mark>secure passwords</mark></li>
  <li><mark>No lock-in</mark> (identification via email?)</li>
  <li><mark>Privacy</mark> (not telling every login attempt to a big company)</li>
</ul>
</div>
</article>

<article id="localext" title="Local vs. External Login">
<h1>Local vs. External Login</h1>

<div class="simplebox">
<img src="access_denied.jpg" alt="Access Denied" class="slidepic">
<ul>
  <li>Local: Sounds easy to implement, <mark>complications</mark> in details</li>
  <li>Local: Can always be trusted</li>
  <li>Local: Need to secure passwords</li>
  <li>External: Potential for <mark>lock-in</mark></li>
  <li>External: Potential <mark>privacy issues</mark></li>
  <li>External: Implementation difficulty depends on API</li>
</ul>
</div>
</article>

<article id="extalt" title="External Alternatives">
<h1>External Alternatives</h1>

<div class="simplebox">
<img src="login_icons.png" alt="Login icons" class="slidepic">
<ul>
  <li><s>Mozilla Persona</s></li>
  <li><s>Firefox Accounts</s></li>
  <li>Facebook, Google, GitHub, ...</li>
  <li>Other <mark>OAuth2</mark> providers</li>
  <li><mark>OpenID Connect (OIDC)</mark> providers (based on OAuth2)</li>
  <li>Other/older providers/standards (OAuth1, ...)</li>
  <li>Intermediates, e.g. Auth0</li>
</ul>
</div>
</article>

<article id="portier" title="Interlude: A Future Alternative">
<h1>Interlude: A Future Alternative</h1>

<div class="simplebox">
<img src="autodestruct_deactivated.jpg" alt="Auto Destruct Deactivated" class="slidepic">
<p><mark><a href="https://portier.github.io/">Portier</a></mark> is a new in-development alternative</p>
<ul>
  <li>Email authentication</li>
  <li>Decentralized (fallback to passwordless email auth)</li>
  <li>Speaking OIDC to client and "Brokers"</li>
  <li>"Spiritual successor to Mozilla Persona"</li>
  <li>Still in development ("early beta"): <a href="https://portier.github.io/">portier.github.io</a></li>
</ul>
</div>
</article>

<article id="selfhost" title="Self-Hosted &quot;External&quot;">
<h1>Self-Hosted &quot;External&quot;</h1>

<div class="simplebox">
<img src="oauth2_openid.png" alt="OAuth2" class="slidepic">
<ul>
  <li><mark>Full control</mark> over login stack</li>
  <li>Password security isolated from website code</li>
  <li>Management of multiple identities possible</li>
  <li><mark>Privacy and trust</mark>  are no issues</li>
  <li>When using <mark>standard API</mark>, possibility for being switched out later</li>
  <li>Still needing to secure properly</li>
</ul>
</div>
</article>

<article id="phpauthserver" title="The PHP Authserver">
<h1>The PHP Authserver</h1>

<div class="simplebox">
<img src="kairo_at_auth.png" alt="KaiRo.at Auth" class="slidepic">
<ul>
  <li><mark>OAuth2 API</mark> (potential extension to OIDC later), using <a href="http://bshaffer.github.io/oauth2-server-php-docs/">oauth2-server-php</a></li>
  <li>Password storage with <mark>password_hash</mark> (currently bcrypt) + nonce, auto-upgrade on login</li>
  <li>Relatively easy to install on "<mark>LAMP</mark>" (Linux with Apache + MySQL + PHP5/PHP7)</li>
  <li><a href="http://www.doctrine-project.org/projects/dbal.html">Doctrine DBAL</a> for DB abstraction,
      <a href="https://github.com/KaiRo-at/php-utility-classes">php-utility-classes</a> for email and DOM document abstraction</li>
  <li>Skinnable to brand installation to fit operator</a>
  <li>My installation at <a href="https://auth.kairo.at/">auth.kairo.at</a> scores <a href="https://observatory.mozilla.org/analyze.html?host=auth.kairo.at">A+ from Mozilla Observatory</a></li>
</ul>
</div>
</article>

<article id="status" title="Current Status">
<h1>Current Status</h1>

<div class="simplebox">
<ul>
  <li>Only <mark>Authorization Code</mark> flow supported right now, oauth2-server-php can do Client Credentials as well as OIDC, should not be too hard to add.</li>
  <li>Tested with <mark>Apache and MySQL</mark> for now, other web and DB servers should be possible easily.</li>
  <li>Rudimentary documentation exists in the main <mark>README</mark>.</li>
  <li>Languages supported are US English (default) and German, detected via Accept-Language sent by browser.</li>
  <li>Testing is done by running logins with KaiRo's websites (2 different client implementations).</li>
  <li>Special Thanks to Christoph Zauner for doing a review that didn't find any actual security issues (but some minor comments).</li>
  <li><mark>Open Source at <a href="https://github.com/KaiRo-at/authserver">github.com/KaiRo-at/authserver</a></mark>, under MPL2 - <mark>released TODAY</mark>!</li>
</ul>
</div>
</article>

<article id="help" title="Help Needed">
<h1>Help Needed</h1>

<div class="simplebox">
<img src="generic_auth.png" alt="KaiRo.at Auth" class="slidepic">
<ul>
  <li>Implementation of <mark>OIDC</mark> and perhaps Client Credentials flows.</li>
  <li>Setting up a <mark>test</mark> suite and infrastructure.</li>
  <li>Writing more complete <mark>documentation</mark>.</li>
  <li>More UI languages?</li>
  <li>More installations?</li>
  <li><mark>Your ideas and pull requests!</mark></li>
</ul>
</div>
</article>

<article id="end" title="The End">

<div class="simplebox endslidecontainer">
<h1 class="cent endslidetext">Questions?</h1>
<h2 class="cent endslidetext"><a href="https://github.com/KaiRo-at/authserver">github.com/KaiRo-at/authserver</a></h2>
<h3 class="cent endslidetext">kairo@kairo.at,<br><a href="https://mozillians.org/en-US/u/KaiRo/">mozillians.org/u/KaiRo/</a></h3>
<img src="access_enabled.jpg" class="sshot endslidepic" alt="Access Enabled">
</div>
</article>

</body>
</html>
Commit	Line	Data
df2f979f RK	1	<!DOCTYPE html>
	2	<html>
	3	<head>
	4	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	5	<meta name="Author" content="KaiRo - Robert Kaiser">
	6	<title>Web Logins after Persona</title>
	7	<link rel="stylesheet" type="text/css" href="slides.css">
	8	<script type="text/javascript" src="slides.js"></script>
	9	<link rel="contents" href="#index" title="Overview">
	10	<link rel="index" id="link-toc" href="#toc" title="Contents">
	11	<link rel="start" id="link-start" href="#index" title="Start">
	12	</head>
	13	<body onload="docLoaded();">
	14	<header id="header"><div id="header-text">Web Logins</div>
	15	<div id="subheader-text"></div>
	16	<a id="headerlogo" href="#index" title="Startseite">Mozilla</a>
	17	</header>
	18	<nav id="slidenav">
	19	<a href="#toc" id="nav-toc" accesskey="t">toc</a> \|\|
	20	<a href="#index" id="nav-start" accesskey="s">start</a> \|\|
	21	<a href="#" id="nav-prev" accesskey="p" hidden>< back</a>
	22	<span id="nav-prev-nolink" class="nolink">< back</span> \|
	23	<a href="#" id="nav-next" id="goNext" accesskey="n" hidden>fwd ></a>
	24	<span id="nav-next-nolink" class="nolink">fwd ></span>
	25	</nav>
	26
	27	<article id="toc" title="Table of Contents">
	28	<h1>Table of Contents</h1>
	29	<h2>Web Logins after Persona</h2>
	30
	31	<div class="captionedbox">
	32	<p class="captionedbox-caption">The following slides are available in this presentation:</p>
	33	<div class="captionedbox-content">
	34	<ul id="toc-list">
	35	</ul>
	36	</article>
	37
	38	<article id="index" title="Start Page">
	39	<h1>Web Logins after Persona</h1>
	40	<h2>How I solved logins on my small websites</h2>
	41
	42	<div class="simplebox">
	43	<mark><a href="http://home.kairo.at/">Robert Kaiser</a></mark>,
	44	"KaiRo" <kairo@kairo.at>
eeb0ec0c	45	<br><small>Mozilla Rep, Website developer & Project Manager</small>
df2f979f RK	46	</div>
	47
	48	<div class="captionedbox">
	49	<p class="captionedbox-caption">Slides:
2d98aed1	50	<a href="https://slides.kairo.at/fosdem2017/">https://slides.kairo.at/fosdem2017/</a></p>
df2f979f RK	51	<div class="captionedbox-content small">
	52	<ul class="small">
	53	<li>Created for
2d98aed1	54	<a href="http://fosdem.org/2017/schedule/track/mozilla/">Mozilla
df2f979f RK	55	Developer Room</a> at <a href="http://www.fosdem.org/">FOSDEM 2017</a> in
	56	Brussels.</li>
	57	<li>Written in HTML 5 with CSS 3 and JavaScript.</li>
	58	<li>Navigation via links on all slides, via access keys
	59	(e.g. "n"/Alt+Shift+N for "next") or back/forward arrow keys</li>
	60	<li><a href="#toc">Contents</a></li>
	61	<li><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/at/"><img
	62	alt="Licensed under CC-BY-SA," style="border-width:0;vertical-align:bottom;"
2d98aed1	63	src="cc-by-sa-80x15.png"></a> 01-02/2017 Robert Kaiser.</li>
df2f979f RK	64	</ul>
	65	</div>
	66	</div>
	67	</article>
	68
	69	<article id="persona" title="What's Persona?">
f04b0f1a	70	<h1>What <s>is</s>was <mark>Persona</mark>?</h1>
df2f979f RK	71
df2f979f RK	72	<div class="simplebox">
1380deda	73	<img src="persona-logo-wordmark.png" alt="Mozilla Persona" class="slidepic">
f04b0f1a	74	<p>Login/Identity solution by Mozilla, <mark>2011-2016</mark></p>
df2f979f RK	75	<ul>
	76	<li>Decentralized / Federated (with Fallback)</li>
	77	<li>Multiple identities</li>
	78	<li>Verified Email</li>
	79	<li>Potential for browser integration</li>
	80	<li>BrowserID protocol, easy to implement, server-side verification</li>
	81	<li>Permission-less</li>
	82	</ul>
	83	<p><a href="http://feeding.cloud.geek.nz/posts/persona-guiding-principles/">See
f04b0f1a	84	blog post by François Marier</a> (feeding.cloud.geek.nz)</p>
df2f979f RK	85	</div>
	86	</article>
	87
	88	<article id="smallsite" title="Needs of a Small Website">
	89	<h1>Needs of a Small Website</h1>
	90
	91	<div class="simplebox">
1380deda	92	<img src="enter_access_code.jpg" alt="Enter Access Code" class="slidepic">
df2f979f	93	<ul>
f04b0f1a RK	94	<li><mark>Easy</mark> to implement</li>
	95	<li><mark>Trusted</mark> identification</li>
	96	<li>Avoid dealing with how to <mark>secure passwords</mark></li>
	97	<li><mark>No lock-in</mark> (identification via email?)</li>
	98	<li><mark>Privacy</mark> (not telling every login attempt to a big company)</li>
df2f979f RK	99	</ul>
	100	</div>
	101	</article>
	102
	103	<article id="localext" title="Local vs. External Login">
	104	<h1>Local vs. External Login</h1>
	105
	106	<div class="simplebox">
1380deda	107	<img src="access_denied.jpg" alt="Access Denied" class="slidepic">
df2f979f	108	<ul>
1380deda	109	<li>Local: Sounds easy to implement, <mark>complications</mark> in details</li>
df2f979f	110	<li>Local: Can always be trusted</li>
eeb0ec0c	111	<li>Local: Need to secure passwords</li>
1380deda RK	112	<li>External: Potential for <mark>lock-in</mark></li>
1380deda RK	113	<li>External: Potential <mark>privacy issues</mark></li>
df2f979f RK	114	<li>External: Implementation difficulty depends on API</li>
	115	</ul>
	116	</div>
	117	</article>
	118
	119	<article id="extalt" title="External Alternatives">
	120	<h1>External Alternatives</h1>
	121
	122	<div class="simplebox">
1380deda	123	<img src="login_icons.png" alt="Login icons" class="slidepic">
df2f979f RK	124	<ul>
	125	<li><s>Mozilla Persona</s></li>
	126	<li><s>Firefox Accounts</s></li>
1380deda	127	<li>Facebook, Google, GitHub, ...</li>
f04b0f1a RK	128	<li>Other <mark>OAuth2</mark> providers</li>
f04b0f1a RK	129	<li><mark>OpenID Connect (OIDC)</mark> providers (based on OAuth2)</li>
df2f979f RK	130	<li>Other/older providers/standards (OAuth1, ...)</li>
	131	<li>Intermediates, e.g. Auth0</li>
	132	</ul>
	133	</div>
	134	</article>
	135
	136	<article id="portier" title="Interlude: A Future Alternative">
	137	<h1>Interlude: A Future Alternative</h1>
	138
	139	<div class="simplebox">
1380deda RK	140	<img src="autodestruct_deactivated.jpg" alt="Auto Destruct Deactivated" class="slidepic">
1380deda RK	141	<p><mark><a href="https://portier.github.io/">Portier</a></mark> is a new in-development alternative</p>
df2f979f RK	142	<ul>
	143	<li>Email authentication</li>
	144	<li>Decentralized (fallback to passwordless email auth)</li>
	145	<li>Speaking OIDC to client and "Brokers"</li>
	146	<li>"Spiritual successor to Mozilla Persona"</li>
1380deda	147	<li>Still in development ("early beta"): <a href="https://portier.github.io/">portier.github.io</a></li>
df2f979f RK	148	</ul>
	149	</div>
	150	</article>
	151
	152	<article id="selfhost" title="Self-Hosted "External"">
	153	<h1>Self-Hosted "External"</h1>
	154
	155	<div class="simplebox">
1380deda	156	<img src="oauth2_openid.png" alt="OAuth2" class="slidepic">
df2f979f	157	<ul>
1380deda	158	<li><mark>Full control</mark> over login stack</li>
df2f979f RK	159	<li>Password security isolated from website code</li>
df2f979f RK	160	<li>Management of multiple identities possible</li>
1380deda RK	161	<li><mark>Privacy and trust</mark> are no issues</li>
1380deda RK	162	<li>When using <mark>standard API</mark>, possibility for being switched out later</li>
df2f979f RK	163	<li>Still needing to secure properly</li>
	164	</ul>
	165	</div>
	166	</article>
	167
	168	<article id="phpauthserver" title="The PHP Authserver">
	169	<h1>The PHP Authserver</h1>
	170
	171	<div class="simplebox">
1380deda	172	<img src="kairo_at_auth.png" alt="KaiRo.at Auth" class="slidepic">
df2f979f	173	<ul>
f04b0f1a RK	174	<li><mark>OAuth2 API</mark> (potential extension to OIDC later), using <a href="http://bshaffer.github.io/oauth2-server-php-docs/">oauth2-server-php</a></li>
	175	<li>Password storage with <mark>password_hash</mark> (currently bcrypt) + nonce, auto-upgrade on login</li>
	176	<li>Relatively easy to install on "<mark>LAMP</mark>" (Linux with Apache + MySQL + PHP5/PHP7)</li>
df2f979f RK	177	<li><a href="http://www.doctrine-project.org/projects/dbal.html">Doctrine DBAL</a> for DB abstraction,
	178	<a href="https://github.com/KaiRo-at/php-utility-classes">php-utility-classes</a> for email and DOM document abstraction</li>
	179	<li>Skinnable to brand installation to fit operator</a>
	180	<li>My installation at <a href="https://auth.kairo.at/">auth.kairo.at</a> scores <a href="https://observatory.mozilla.org/analyze.html?host=auth.kairo.at">A+ from Mozilla Observatory</a></li>
	181	</ul>
	182	</div>
	183	</article>
	184
	185	<article id="status" title="Current Status">
	186	<h1>Current Status</h1>
1380deda RK	187
1380deda RK	188	<div class="simplebox">
df2f979f	189	<ul>
f04b0f1a RK	190	<li>Only <mark>Authorization Code</mark> flow supported right now, oauth2-server-php can do Client Credentials as well as OIDC, should not be too hard to add.</li>
	191	<li>Tested with <mark>Apache and MySQL</mark> for now, other web and DB servers should be possible easily.</li>
	192	<li>Rudimentary documentation exists in the main <mark>README</mark>.</li>
df2f979f RK	193	<li>Languages supported are US English (default) and German, detected via Accept-Language sent by browser.</li>
df2f979f RK	194	<li>Testing is done by running logins with KaiRo's websites (2 different client implementations).</li>
eeb0ec0c	195	<li>Special Thanks to Christoph Zauner for doing a review that didn't find any actual security issues (but some minor comments).</li>
df2f979f RK	196	<li><mark>Open Source at <a href="https://github.com/KaiRo-at/authserver">github.com/KaiRo-at/authserver</a></mark>, under MPL2 - <mark>released TODAY</mark>!</li>
df2f979f RK	197	</ul>
df2f979f RK	198	</div>
	199	</article>
	200
	201	<article id="help" title="Help Needed">
	202	<h1>Help Needed</h1>
	203
	204	<div class="simplebox">
1380deda	205	<img src="generic_auth.png" alt="KaiRo.at Auth" class="slidepic">
df2f979f	206	<ul>
f04b0f1a RK	207	<li>Implementation of <mark>OIDC</mark> and perhaps Client Credentials flows.</li>
	208	<li>Setting up a <mark>test</mark> suite and infrastructure.</li>
	209	<li>Writing more complete <mark>documentation</mark>.</li>
	210	<li>More UI languages?</li>
df2f979f	211	<li>More installations?</li>
f04b0f1a	212	<li><mark>Your ideas and pull requests!</mark></li>
df2f979f RK	213	</ul>
	214	</div>
	215	</article>
	216
	217	<article id="end" title="The End">
	218
eeb0ec0c RK	219	<div class="simplebox endslidecontainer">
	220	<h1 class="cent endslidetext">Questions?</h1>
	221	<h2 class="cent endslidetext"><a href="https://github.com/KaiRo-at/authserver">github.com/KaiRo-at/authserver</a></h2>
	222	<h3 class="cent endslidetext">kairo@kairo.at,<br><a href="https://mozillians.org/en-US/u/KaiRo/">mozillians.org/u/KaiRo/</a></h3>
	223	<img src="access_enabled.jpg" class="sshot endslidepic" alt="Access Enabled">
df2f979f RK	224	</div>
	225	</article>
	226
	227	</body>
	228	</html>