fosdem2017/index.html

   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>&lt; back</a>
  22   <span id="nav-prev-nolink" class="nolink">&lt; back</span> |
  23   <a href="#" id="nav-next" id="goNext" accesskey="n" hidden>fwd &gt;</a>
  24   <span id="nav-next-nolink" class="nolink">fwd &gt;</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" &lt;kairo@kairo.at&gt;
  45 <br><small>Mozilla Rep, Website developer &amp; Project Manager</small>
  46 </div>
  47
  48 <div class="captionedbox">
  49 <p class="captionedbox-caption">Slides:
  50   <a href="https://slides.kairo.at/fosdem2017/">https://slides.kairo.at/fosdem2017/</a></p>
  51 <div class="captionedbox-content small">
  52 <ul class="small">
  53   <li>Created for
  54     <a href="http://fosdem.org/2017/schedule/track/mozilla/">Mozilla
  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;"
  63         src="cc-by-sa-80x15.png"></a> 01-02/2017 Robert Kaiser.</li>
  64 </ul>
  65 </div>
  66 </div>
  67 </article>
  68
  69 <article id="persona" title="What's Persona?">
  70 <h1>What <s>is</s>was <mark>Persona</mark>?</h1>
  71
  72 <div class="simplebox">
  73 <img src="persona-logo-wordmark.png" alt="Mozilla Persona" class="slidepic">
  74 <p>Login/Identity solution by Mozilla, <mark>2011-2016</mark></p>
  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
  84 blog post by François Marier</a> (feeding.cloud.geek.nz)</p>
  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">
  92 <img src="enter_access_code.jpg" alt="Enter Access Code" class="slidepic">
  93 <ul>
  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>
  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">
 107 <img src="access_denied.jpg" alt="Access Denied" class="slidepic">
 108 <ul>
 109   <li>Local: Sounds easy to implement, <mark>complications</mark> in details</li>
 110   <li>Local: Can always be trusted</li>
 111   <li>Local: Need to secure passwords</li>
 112   <li>External: Potential for <mark>lock-in</mark></li>
 113   <li>External: Potential <mark>privacy issues</mark></li>
 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">
 123 <img src="login_icons.png" alt="Login icons" class="slidepic">
 124 <ul>
 125   <li><s>Mozilla Persona</s></li>
 126   <li><s>Firefox Accounts</s></li>
 127   <li>Facebook, Google, GitHub, ...</li>
 128   <li>Other <mark>OAuth2</mark> providers</li>
 129   <li><mark>OpenID Connect (OIDC)</mark> providers (based on OAuth2)</li>
 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">
 140 <img src="autodestruct_deactivated.jpg" alt="Auto Destruct Deactivated" class="slidepic">
 141 <p><mark><a href="https://portier.github.io/">Portier</a></mark> is a new in-development alternative</p>
 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>
 147   <li>Still in development ("early beta"): <a href="https://portier.github.io/">portier.github.io</a></li>
 148 </ul>
 149 </div>
 150 </article>
 151
 152 <article id="selfhost" title="Self-Hosted &quot;External&quot;">
 153 <h1>Self-Hosted &quot;External&quot;</h1>
 154
 155 <div class="simplebox">
 156 <img src="oauth2_openid.png" alt="OAuth2" class="slidepic">
 157 <ul>
 158   <li><mark>Full control</mark> over login stack</li>
 159   <li>Password security isolated from website code</li>
 160   <li>Management of multiple identities possible</li>
 161   <li><mark>Privacy and trust</mark>  are no issues</li>
 162   <li>When using <mark>standard API</mark>, possibility for being switched out later</li>
 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">
 172 <img src="kairo_at_auth.png" alt="KaiRo.at Auth" class="slidepic">
 173 <ul>
 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>
 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>
 187
 188 <div class="simplebox">
 189 <ul>
 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>
 193   <li>Languages supported are US English (default) and German, detected via Accept-Language sent by browser.</li>
 194   <li>Testing is done by running logins with KaiRo's websites (2 different client implementations).</li>
 195   <li>Special Thanks to Christoph Zauner for doing a review that didn't find any actual security issues (but some minor comments).</li>
 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>
 197 </ul>
 198 </div>
 199 </article>
 200
 201 <article id="help" title="Help Needed">
 202 <h1>Help Needed</h1>
 203
 204 <div class="simplebox">
 205 <img src="generic_auth.png" alt="KaiRo.at Auth" class="slidepic">
 206 <ul>
 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>
 211   <li>More installations?</li>
 212   <li><mark>Your ideas and pull requests!</mark></li>
 213 </ul>
 214 </div>
 215 </article>
 216
 217 <article id="end" title="The End">
 218
 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">
 224 </div>
 225 </article>
 226
 227 </body>
 228 </html>