From: Robert Kaiser Date: Tue, 24 Jan 2017 21:17:00 +0000 (+0100) Subject: add a first version of the FOSDEM 2017 talk X-Git-Url: https://git-public.kairo.at/?p=slides.git;a=commitdiff_plain;h=df2f979f67e5137fe546d1927dc3c1cc061b0f44;hp=b83685b1292e323c39b75478effb4679787eacf7 add a first version of the FOSDEM 2017 talk --- diff --git a/fosdem2017/autodestruct_deactivated.jpg b/fosdem2017/autodestruct_deactivated.jpg new file mode 100644 index 0000000..4ec4cb9 Binary files /dev/null and b/fosdem2017/autodestruct_deactivated.jpg differ diff --git a/fosdem2017/cc-by-sa-80x15.png b/fosdem2017/cc-by-sa-80x15.png new file mode 100644 index 0000000..c67509f Binary files /dev/null and b/fosdem2017/cc-by-sa-80x15.png differ diff --git a/fosdem2017/index.html b/fosdem2017/index.html new file mode 100755 index 0000000..a07ff06 --- /dev/null +++ b/fosdem2017/index.html @@ -0,0 +1,220 @@ + + + + + + Web Logins after Persona + + + + + + + + + + +

Web Logins after Persona

+ +

The following slides are available in this presentation:

+ +

Web Logins after Persona

How I solved logins on my small websites

+ +

+Robert Kaiser, +"KaiRo" <kairo@kairo.at> +
Mozilla Rep +

+ +

Slides: + https://slides.kairo.at/fosdem2017/

Created for + Mozilla + Developer Room at FOSDEM 2017 in + Brussels.
Written in HTML 5 with CSS 3 and JavaScript.
Navigation via links on all slides, via access keys + (e.g. "n"/Alt+Shift+N for "next") or back/forward arrow keys
Contents
01/2017 Robert Kaiser.

+ +

What iswas Persona?

+ +

Decentralized / Federated (with Fallback)
Multiple identities
Verified Email
Potential for browser integration
BrowserID protocol, easy to implement, server-side verification
Permission-less

See +blog post by FranÃ§ois Marier

+ +

Needs of a Small Website

+ +

Easy to implement
Trusted identification
Avoid dealing with how to secure passwords
No lock-in (identification via email?)
Privacy (not telling every login attempt to a big company)

+ +

Local vs. External Login

+ +

Local: Need to secure passwords
Local: Sounds easy to implement, complications in details
Local: Can always be trusted
External: Potential for lock-in
External: Potential privacy issues
External: Implementation difficulty depends on API

+ +

External Alternatives

+ +

~~Mozilla Persona~~
~~Firefox Accounts~~
Facebook, Google, GitHub
Other OAuth2 providers
OpenID Connect (OIDC) providers (based on OAuth2)
Other/older providers/standards (OAuth1, ...)
Intermediates, e.g. Auth0

+ +

Interlude: A Future Alternative

+ +

Portier is a new in-development alternative

Email authentication
Decentralized (fallback to passwordless email auth)
Speaking OIDC to client and "Brokers"
"Spiritual successor to Mozilla Persona"
Still in development ("early beta")

+ +

Self-Hosted "External"

+ +

Full control over login stack
Password security isolated from website code
Management of multiple identities possible
Privacy and trust are no issues
When using standard API, possibility for being switched out later
Still needing to secure properly

+ +

The PHP Authserver

+ +

OAuth2 API (potential extension to OIDC later), using oauth2-server-php
Password storage with password_hash (currently bcrypt) + nonce, auto-upgrade on login
Relatively easy to install on Linux with Apache + PHP5/PHP7 + MySQL (Other DBs should be easy to support)
Doctrine DBAL for DB abstraction, + php-utility-classes for email and DOM document abstraction
Skinnable to brand installation to fit operator +
My installation at auth.kairo.at scores A+ from Mozilla Observatory

+ +

Current Status

Only Authorization Code flow supported right now, oauth2-server-php can do Client Credentials as well as OIDC, should not be too hard to add.
Tested with Apache and MySQL for now, other web and DB servers should be possible easily.
Rudimentary documentation exists in the main README.
Languages supported are US English (default) and German, detected via Accept-Language sent by browser.
Testing is done by running logins with KaiRo's websites (2 different client implementations).
Open Source at github.com/KaiRo-at/authserver, under MPL2 - released TODAY!

+ +

Help Needed

+ +

Implementation of OIDC and perhaps Client Credentials flows.
Setting up a test suite and infrastructure.
Writing more complete documentation.
More languages?
More installations?
Your ideas and pull requests!

+ +

Questions?

github.com/KaiRo-at/authserver

+ + + diff --git a/fosdem2017/slides.css b/fosdem2017/slides.css new file mode 100644 index 0000000..b3932db --- /dev/null +++ b/fosdem2017/slides.css @@ -0,0 +1,334 @@ +/************************** + * styles for talk slides * + * by Robert Kaiser * + * * + * (for FOSDEM 2017) * + **************************/ + + +/***** base style *****/ + +@font-face { + font-family: 'Liberation Sans'; + src: url('template/LiberationSans-Regular-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Liberation Sans'; + src: url('template/LiberationSans-Italic-webfont.woff') format('woff'); + font-weight: normal; + font-style: italic; +} + +@font-face { + font-family: 'Liberation Sans'; + src: url('template/LiberationSans-Bold-webfont.woff') format('woff'); + font-weight: bold; + font-style: normal; +} + +@font-face { + font-family: 'Liberation Sans'; + src: url('template/LiberationSans-BoldItalic-webfont.woff') format('woff'); + font-weight: bold; + font-style: italic; +} + +html { + overflow: hidden; /* to make translations not paint scrollbars */ + background: #FFFFEE; + height: 100%; +} + +body { + margin: 0px; + padding: 0px; + border: 0px; + font-family: "Liberation Sans", sans-serif; + font-size: 2em; + color: #336699; + background: url("template/page-background-top.png") top left repeat-x; + height: 100%; +} + +ul { + padding-left: 1.2em; + margin-bottom: 0.5em; +} + +ul:first-child, +ul:last-child { + margin-top: 0; +} + +#header { + height: 40px; + position: relative; + border-top: 1px solid white; +} + +#headerlogo { + position: absolute; + display: block; + right: 25px; + top: 3px; + text-indent: -2000px; + font-size: 1px; + overflow: hidden; + height: 40px; + width: 64px; + background: url("template/KaiRoLogo-64x40.png") no-repeat; +} + +#header-text { + position: relative; + top: 5px; + left: 25px; + width: calc(100% - 50px); + font-size: 20px; + font-weight: bold; + color: #336699; +} + +#header-text.neartime { + color: #6080FF; +} + +#header-text.ontime { + color: #40AA40; +} + +#header-text.overtime { + color: #FF8080; +} + +#subheader-text { + color: #336699; + position: relative; + top: 3px; + left: 25px; + width: calc(100% - 50px); + font-size: 10px; +} + +#slidenav { + position: absolute; + right: 200px; + top: 15px; + font-size: 10px; +} + +#slidenav a:link, +#slidenav a:visited { + color: #669999; +} + +#slidenav a:hover, +#slidenav a:active { + color: #88BBBB; +} + +#slidenav .nolink { + color: #CCCCCC; +} + +article { + position: absolute; + width: 100%; + /* header is 40px, 7px to have a bit of distance, + * 3px height-reducing on the bottom for safety */ + top: 47px; + height: calc(100% - 50px); + overflow: auto; + + transition-property: transform, opacity; + transition-duration: 3s; + transition-timing-function: ease; + transform-origin: center 5em; + + opacity: 0; +/* + transform: translate(-100%, 0); +*/ +/* + transform: scale(0.1) rotate(360deg) translate(-200%, 0); +*/ + transform: scale(0.1) translate(-400%, 0); +} + +article[aria-selected="true"] { + opacity: 1; + transform: scale(1) rotate(0deg) translate(0, 0); +} + +article[aria-selected="true"] ~ article { + opacity: 0; +/* + transform: translate(100%, 0); +*/ +/* + transform: scale(0.1) rotate(-360deg) translate(200%, 0); +*/ + transform: scale(0.1) translate(400%, 0); +} + +/***** headers *****/ + +h1, h2, h3, h4 { + margin: 0.5em 0; + font-weight: bold; + color: #FFFFEE; + background: #003366; + text-align: center; +} + +h1 { + margin-top: 0; + font-size: 1.7em; +} + +h2 { + font-size: 1.3em; +} + +h3 { + font-size: 1.1em; +} + +h4 { + font-size: 1em; + text-align: left; +} + +/***** boxes *****/ + +.simplebox { + padding: 0.5em; +} + +.captionedbox { + padding: 0px; +} + +.simplebox, +.captionedbox { + margin: 1em; + background: #fff; + background-image: radial-gradient(center 45px, ellipse farthest-corner, #FFFFEE 0, #fff 100%); + box-shadow: #AAAA80 3px 3px 2px 0; +} + +.captionedbox-content { + margin: 0; + padding: 0.5em; + border: 0px; + border-top: 1px solid #89AACC; +} + +.captionedbox-caption { + margin: 0; + padding: 0.5em; + font-weight: bold; +} + +/***** misc formatting *****/ + +mark { + font-weight: bold; + color: #FF6600; + background-color: transparent; +} + +s { + text-decoration: line-through; + color: #808080; +} + +.border { + border: 1px solid #336699; + padding: 0.5em; +} + +.sshot { + box-shadow: #6d7581 3px 3px 2px 0; +} + +.slidepic { + float: right; + margin-left: .5em; +} + +.ensurepicinbox { + clear: both; + font-size: 1px; + margin: 0; +} + +.largetext { + font-size: 2em; +} + +ul > li { + margin: 0.5em 0; +} + +.columns2 { + -moz-columns: 2; +} + +ul.nobullets > li { + list-style-type: none; +} + +ul.arrows > li { + list-style-type: none; +} +ul.arrows > li:before { + content: "\21d2\20"; /* \2192 would be single thin arrow, hex 20 is space */ +} + +.cent { + text-align: center; +} + +.topmargin { + margin-top: 0.5em; +} + +.akey { + text-decoration: underline; +} + +a:link, a:visited { color: #669999; text-decoration: none; } +a:hover, a:active { color: #88BBBB; text-decoration: underline; } + +mark a:link, mark a:visited { color: #FF6600; } +mark a:hover, mark a:active { color: #FF6600; } + +pre { margin: 0; } + +/***** small stuff *****/ + +.small, +.small { + font-size: 0.75em; +} + +ul.small, +.small ul { + padding: 0px; + border: 0px; + margin: 0px 0px 0px 1em; +} + +ul.small > li +.small ul > li { + margin: 0px; + padding: 0px; + border: 0px; +} + +/***** specific slides *****/ + diff --git a/fosdem2017/slides.js b/fosdem2017/slides.js new file mode 100644 index 0000000..4a0e9fe --- /dev/null +++ b/fosdem2017/slides.js @@ -0,0 +1,200 @@ +/****************************** + * JavaScript for talk slides * + * by Robert Kaiser * + * * + * (for FOSDEM 2011) * + ******************************/ + +var slides = {}; +var articleNodes; +var currentSlide; +var currentIdx; +var defaultIdx = 1; // set to slide index to show by default +var firstIdx = 2; // set no value if to use first available +var lastIdx; // set no value if to use first available + +var pageTitle, headerText, subHeaderText; +var navPrev, navNext, navPrevNolink, navNextNolink; + +// Slide timer - color variation of headerText +var slideSeconds = 2 * 60; + +// Called when the document has been loaded. +function docLoaded() { + pageTitle = document.getElementsByTagName("title")[0]; + headerText = document.getElementById("header-text"); + subHeaderText = document.getElementById("subheader-text"); + navPrev = document.getElementById("nav-prev"); + navNext = document.getElementById("nav-next"); + navPrevNolink = document.getElementById("nav-prev-nolink"); + navNextNolink = document.getElementById("nav-next-nolink"); + articleNodes = document.getElementsByTagName("article"); + + if (!firstIdx) + firstIdx = 0; + if (!lastIdx) + lastIdx = articleNodes.length - 1; + + // Get a list of all slides (articles). + subHeaderText.textContent = articleNodes.length + " slides..."; + for (var i = 0; i < articleNodes.length; ++i) { + subHeaderText.textContent = "Indexing slide " + i + " / " + articleNodes.length; + if (!articleNodes[i].id) + articleNodes[i].id = "slide_" + i; + + slides[articleNodes[i].id] = + {"idx": i, + "name": articleNodes[i].id, + "title": articleNodes[i].title ? articleNodes[i].title : articleNodes[i].id, + "obj": articleNodes[i]}; + + if (location.hash.length && + (location.hash == "#" + articleNodes[i].id || location.hash == "#" + i)) { + articleNodes[i].setAttribute("aria-selected", "true"); + currentSlide = slides[articleNodes[i].id]; + currentIdx = i; + } + } + + if (!currentSlide) { + currentIdx = defaultIdx; + currentSlide = slides[articleNodes[currentIdx].id]; + currentSlide.obj.setAttribute("aria-selected", "true"); + location.hash = "#" + currentSlide.name; + } + updateDisplay(); +} + +// Called when the hash part of the location changes. +function locationHashChanged() { + if (location.hash.length > 1) { + var hashtag = location.hash.substring(1); + // If not a number, treat as ID + if (isNaN(hashtag) && slides[hashtag]) { + currentSlide.obj.removeAttribute("aria-selected"); + currentSlide = slides[hashtag]; + currentIdx = currentSlide.idx; + currentSlide.obj.setAttribute("aria-selected", "true"); + updateDisplay(); + } + else if (articleNodes[hashtag]) { + currentSlide.obj.removeAttribute("aria-selected"); + currentIdx = hashtag; + currentSlide = slides[articleNodes[currentIdx].id]; + currentSlide.obj.setAttribute("aria-selected", "true"); + updateDisplay(); + } + } +} +window.onhashchange = locationHashChanged; + +// Update the display after we updated what slide is shown. +function updateDisplay() { + if (currentIdx >= firstIdx && currentIdx <= lastIdx && + currentSlide.name != "toc") + subHeaderText.textContent = (currentIdx - firstIdx + 1) + "/" + + (lastIdx - firstIdx + 1) + " - " + + currentSlide.title; + else + subHeaderText.textContent = currentSlide.title; + pageTitle.textContent = headerText.textContent + ": " + currentSlide.title; + if (currentIdx > firstIdx && currentSlide.name != "toc") { + navPrev.hidden = false; + navPrev.href = "#" + articleNodes[currentIdx - 1].id; + navPrevNolink.hidden = true; + } + else { + navPrev.hidden = true; + navPrevNolink.hidden = false; + } + if (currentIdx < lastIdx && currentSlide.name != "toc") { + navNext.hidden = false; + navNext.href = "#" + articleNodes[currentIdx + 1].id; + navNextNolink.hidden = true; + } + else { + navNext.hidden = true; + navNextNolink.hidden = false; + } + headerText.className = ""; + slideStart = new Date(); + if (currentSlide.name == "toc") + createTOC(); + else + setTimeout("timerFired()", timerMSec); +} + +// Create TOC list. +function createTOC() { + var list = document.getElementById("toc-list"); + if (!list.getElementsByTagName("li").length) { + for (var slide in slides) { + if (slide != "toc") { + var item = document.createElement("li"); + var link = document.createElement("a"); + var slideHeaders = slides[slide].obj.getElementsByTagName("h1"); + if (slideHeaders.length) + link.textContent = slideHeaders[0].textContent; + else + link.textContent = slides[slide].title; + link.href = "#" + slides[slide].name; + item.appendChild(link); + list.appendChild(item); + } + } + } +} + +// Do timed color variation on slides. +function timerFired() { + var slideCurrent = new Date(); + var secondsDiff = Math.round((slideCurrent.getTime() - slideStart.getTime()) / 1000); + if (secondsDiff >= slideSeconds) { + headerText.className = "overtime"; + } + else if (secondsDiff >= Math.round(2 * slideSeconds / 3)) { + headerText.className = "ontime"; + setTimeout("timerFired()", timerMSec); + } + else if (secondsDiff >= Math.round(slideSeconds / 3)) { + headerText.className = "neartime"; + setTimeout("timerFired()", timerMSec); + } + else { + // We should never come here, but if we do, go into a 100ms loop until we get over the upcoming step. + setTimeout("timerFired()", 100); + } +} +var slideStart = new Date(); +var timerMSec = 1000 * (slideSeconds / 3); +setTimeout("timerFired()", timerMSec); + +// Keyboard/click nav functionality, mostly inherited from FOSDEM 2007. +(function() { + function go(where) { + where = where || "next"; + var navElem = document.getElementById("nav-" + where); + if (!navElem.hidden) + window.location.href = navElem.href; + } + + function handleClick(e) { + e = e || event; + var target = (window.event) ? e.srcElement : e.target; + if (e.which == 1 && target.nodeName != "A" && target.nodeName != "VIDEO") + go("next"); + } + + function handleKeyPress(e) { + e = e || event; + switch (e.keyCode) { + case e.DOM_VK_LEFT: + go("prev"); break; + case e.DOM_VK_RIGHT: + go("next"); break; + } + } + + window.onclick = handleClick; + window.onkeypress = handleKeyPress; +})(); diff --git a/fosdem2017/template/KaiRoLogo-64x40.png b/fosdem2017/template/KaiRoLogo-64x40.png new file mode 100644 index 0000000..fb30e2c Binary files /dev/null and b/fosdem2017/template/KaiRoLogo-64x40.png differ diff --git a/fosdem2017/template/LiberationSans-Bold-webfont.woff b/fosdem2017/template/LiberationSans-Bold-webfont.woff new file mode 100644 index 0000000..974d4b6 Binary files /dev/null and b/fosdem2017/template/LiberationSans-Bold-webfont.woff differ diff --git a/fosdem2017/template/LiberationSans-BoldItalic-webfont.woff b/fosdem2017/template/LiberationSans-BoldItalic-webfont.woff new file mode 100644 index 0000000..d9c813c Binary files /dev/null and b/fosdem2017/template/LiberationSans-BoldItalic-webfont.woff differ diff --git a/fosdem2017/template/LiberationSans-Italic-webfont.woff b/fosdem2017/template/LiberationSans-Italic-webfont.woff new file mode 100644 index 0000000..0515cc7 Binary files /dev/null and b/fosdem2017/template/LiberationSans-Italic-webfont.woff differ diff --git a/fosdem2017/template/LiberationSans-Regular-webfont.woff b/fosdem2017/template/LiberationSans-Regular-webfont.woff new file mode 100644 index 0000000..f119fc1 Binary files /dev/null and b/fosdem2017/template/LiberationSans-Regular-webfont.woff differ diff --git a/fosdem2017/template/LiberationSans_License.txt b/fosdem2017/template/LiberationSans_License.txt new file mode 100644 index 0000000..c541756 --- /dev/null +++ b/fosdem2017/template/LiberationSans_License.txt @@ -0,0 +1,78 @@ +LICENSE AGREEMENT AND LIMITED PRODUCT WARRANTY LIBERATION FONT SOFTWARE +This agreement governs the use of the Software and any updates to the +Software, regardless of the delivery mechanism. Subject to the following +terms, Red Hat, Inc. ("Red Hat") grants to the user ("Client") a license to +this collective work pursuant to the GNU General Public License v.2 with the +exceptions set forth below and such other terms as our set forth in this End +User License Agreement. +1. The Software and License Exception. LIBERATION font software (the +"Software") consists of TrueType-OpenType formatted font software for +rendering LIBERATION typefaces in sans serif, serif, and monospaced character +styles. You are licensed to use, modify, copy, and distribute the Software +pursuant to the GNU General Public License v.2 with the following exceptions: +1) As a special exception, if you create a document which uses this font, and +embed this font or unaltered portions of this font into the document, this +font does not by itself cause the resulting document to be covered by the GNU +General Public License.Â This exception does not however invalidate any other +reasons why the document might be covered by the GNU General Public License.Â +If you modify this font, you may extend this exception to your version of the +font, but you are not obligated to do so. If you do not wish to do so, delete +this exception statement from your version. + +2) As a further exception, any distribution of the object code of the Software +in a physical product must provide you the right to access and modify the +source code for the Software and to reinstall that modified version of the +Software in object code form on the same physical product on which you +received it. +2. Intellectual Property Rights. The Software and each of its components, +including the source code, documentation, appearance, structure and +organization are owned by Red Hat and others and are protected under copyright +and other laws. Title to the Software and any component, or to any copy, +modification, or merged portion shall remain with the aforementioned, subject +to the applicable license. The "LIBERATION" trademark is a trademark of Red +Hat, Inc. in the U.S. and other countries. This agreement does not permit +Client to distribute modified versions of the Software using Red Hat's +trademarks. If Client makes a redistribution of a modified version of the +Software, then Client must modify the files names to remove any reference to +the Red Hat trademarks and must not use the Red Hat trademarks in any way to +reference or promote the modified Software. +3. Limited Warranty. To the maximum extent permitted under applicable law, the +Software is provided and licensed "as is" without warranty of any kind, +expressed or implied, including the implied warranties of merchantability, +non-infringement or fitness for a particular purpose. Red Hat does not warrant +that the functions contained in the Software will meet Client's requirements +or that the operation of the Software will be entirely error free or appear +precisely as described in the accompanying documentation. +4. Limitation of Remedies and Liability. To the maximum extent permitted by +applicable law, Red Hat or any Red Hat authorized dealer will not be liable to +Client for any incidental or consequential damages, including lost profits or +lost savings arising out of the use or inability to use the Software, even if +Red Hat or such dealer has been advised of the possibility of such damages. +5. Export Control. As required by U.S. law, Client represents and warrants +that it: (a) understands that the Software is subject to export controls under +the U.S. Commerce Department's Export Administration Regulations ("EAR"); (b) +is not located in a prohibited destination country under the EAR or U.S. +sanctions regulations (currently Cuba, Iran, Iraq, Libya, North Korea, Sudan +and Syria); (c) will not export, re-export, or transfer the Software to any +prohibited destination, entity, or individual without the necessary export +license(s) or authorizations(s) from the U.S. Government; (d) will not use or +transfer the Software for use in any sensitive nuclear, chemical or biological +weapons, or missile technology end-uses unless authorized by the U.S. +Government by regulation or specific license; (e) understands and agrees that +if it is in the United States and exports or transfers the Software to +eligible end users, it will, as required by EAR Section 740.17(e), submit +semi-annual reports to the Commerce Department's Bureau of Industry & Security +(BIS), which include the name and address (including country) of each +transferee; and (f) understands that countries other than the United States +may restrict the import, use, or export of encryption products and that it +shall be solely responsible for compliance with any such import, use, or +export restrictions. +6. General. If any provision of this agreement is held to be unenforceable, +that shall not affect the enforceability of the remaining provisions. This +agreement shall be governed by the laws of the State of North Carolina and of +the United States, without regard to any conflict of laws provisions, except +that the United Nations Convention on the International Sale of Goods shall +not apply. +Copyright Â© 2007 Red Hat, Inc. All rights reserved. LIBERATION is a trademark +of Red Hat, Inc. + diff --git a/fosdem2017/template/page-background-top.png b/fosdem2017/template/page-background-top.png new file mode 100644 index 0000000..666910c Binary files /dev/null and b/fosdem2017/template/page-background-top.png differ

Table of Contents