davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709
							<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang=fr>
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset=utf-8>
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
<!-- Required to make a valid HTML5 document. -->
<title>The God Login (archive) — David Larlet</title>
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/static/david/icons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="David Larlet">
<meta name="application-name" content="David Larlet">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- That good ol' feed, subscribe :p. -->
<link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="http://blog.codinghorror.com/the-god-login/">

<style>
/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* http://practicaltypography.com/equity.html */
/* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
/* https://www.filamentgroup.com/lab/js-web-fonts.html */
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ConcourseT3';
  src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
       url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
body {
  /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  font-family: "EquityTextB", Palatino, serif;
  background-color: #f0f0ea;
  color: #07486c;
  font-kerning: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern", "liga", "clig", "calt";
}
pre, code, kbd, samp, var, tt {
  font-family: 'TriplicateT4c', monospace;
}
em {
  font-style: italic;
  color: #323a45;
}
strong {
  font-weight: bold;
  color: black;
}
nav {
  background-color: #323a45;
  color: #f0f0ea;
  display: flex;
  justify-content: space-around;
  padding: 1rem .5rem;
}
  nav:last-child {
    border-bottom: 1vh solid #2d7474;
  }
  nav a {
    color: #f0f0ea;
  }
  nav abbr {
    border-bottom: 1px dotted white;
  }

h1 {
  border-top: 1vh solid #2d7474;
  border-bottom: .2vh dotted #2d7474;
  background-color: #e3e1e1;
  color: #323a45;
  text-align: center;
  padding: 5rem 0 4rem 0;
  width: 100%;
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
}
  h1.single {
    padding-bottom: 10rem;
  }
  h1 span {
    position: absolute;
    top: 1vh;
    left: 20%;
    line-height: 0;
  }
    h1 span a {
      line-height: 1.7;
      padding: 1rem 1.2rem .6rem 1.2rem;
      border-radius: 0 0 6% 6%;
      background: #2d7474;
      font-size: 1.3rem;
      color: white;
      text-decoration: none;
    }
h2 {
  margin: 4rem 0 1rem;
  border-top: .2vh solid #2d7474;
  padding-top: 1vh;
}
h3 {
  text-align: center;
  margin: 3rem 0 .75em;
}
hr {
  height: .4rem;
  width: .4rem;
  border-radius: .4rem;
  background: #07486c;
  margin: 2.5rem auto;
}
time {
  display: bloc;
  margin-left: 0 !important;
}
ul, ol {
  margin: 2rem;
}
ul {
  list-style-type: square;
}
a {
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.09em;
}
article {
  max-width: 50rem;
  display: flex;
  flex-direction: column;
  margin: 2rem auto;
}
  article.single {
    border-top: .2vh dotted #2d7474;
    margin: -6rem auto 1rem auto;
    background: #f0f0ea;
    padding: 2rem;
  }
  article p:last-child {
    margin-bottom: 1rem;
  }
p {
  padding: 0 .5rem;
  margin-left: 3rem;
}
  p + p,
  figure + p {
    margin-top: 2rem;
  }

blockquote {
  background-color: #e3e1e1;
  border-left: .5vw solid #2d7474;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  margin: 1.5rem;
}
  blockquote cite {
    font-style: italic;
  }
  blockquote p {
    margin-left: 0;
  }

figure {
  border-top: .2vh solid #2d7474;
  background-color: #e3e1e1;
  text-align: center;
  padding: 1.5rem 0;
  margin: 1rem 0 0;
  font-size: 1.5rem;
  width: 100%;
}
  figure img {
    max-width: 250px;
    max-height: 250px;
    border: .5vw solid #323a45;
    padding: 1px;
  }
figcaption {
  padding: 1rem;
  line-height: 1.4;
}
aside {
  display: flex;
  flex-direction: column;
  background-color: #e3e1e1;
  padding: 1rem 0;
  border-bottom: .2vh solid #07486c;
}
  aside p {
    max-width: 50rem;
    margin: 0 auto;
  }

/* https://fvsch.com/code/css-locks/ */
p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  font-size: 1rem;
  line-height: calc( 1.5em + 0.2 * 1rem );
}
h1 {
  font-size: 1.9rem;
  line-height: calc( 1.2em + 0.2 * 1rem );
}
h2 {
  font-size: 1.6rem;
  line-height: calc( 1.3em + 0.2 * 1rem );
}
h3 {
  font-size: 1.35rem;
  line-height: calc( 1.4em + 0.2 * 1rem );
}
@media (min-width: 20em) {
  /* The (100vw - 20rem) / (50 - 20) part
     resolves to 0-1rem, depending on the
     viewport width (between 20em and 50em). */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
    margin-left: 0;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
}
@media (min-width: 50em) {
  /* The right part of the addition *must* be a
     rem value. In this example we *could* change
     the whole declaration to font-size:2.5rem,
     but if our baseline value was not expressed
     in rem we would have to use calc. */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * 1rem );
    line-height: 1.5em;
  }
  p, li, pre, details {
    margin-left: 3rem;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * 1rem );
    line-height: 1.2em;
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * 1rem );
    line-height: 1.3em;
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * 1rem );
    line-height: 1.4em;
  }
  figure img {
    max-width: 500px;
    max-height: 500px;
  }
}

figure.unsquared {
  margin-bottom: 1.5rem;
}
  figure.unsquared img {
    height: inherit;
  }


@media print {
  body { font-size: 100%; }
  a:after { content: " (" attr(href) ")"; }
  a, a:link, a:visited, a:after {
    text-decoration: underline;
    text-shadow: none !important;
    background-image: none !important;
    background: white;
    color: black;
  }
  abbr[title] { border-bottom: 0; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  img { page-break-inside: avoid; }
  @page { margin: 2cm .5cm; }
  h1, h2, h3 { page-break-after: avoid; }
  p3 { orphans: 3; widows: 3; }
  img {
    max-width: 250px !important;
    max-height: 250px !important;
  }
  nav, aside { display: none; }
}

ul.with_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_columns {
    column-count: 2;
  }
}
@media (min-width: 50em) {
  ul.with_columns {
    column-count: 3;
  }
}
ul.with_two_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_two_columns {
    column-count: 1;
  }
}
@media (min-width: 50em) {
  ul.with_two_columns {
    column-count: 2;
  }
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
  .gallery figure img {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .gallery figure figcaption {
    font-family: 'ConcourseT3'
  }

footer {
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
  border-top: 3px solid white;
  padding: 4rem 0;
  background-color: #07486c;
  color: white;
}
  footer > * {
    max-width: 50rem;
    margin: 0 auto;
  }
  footer a {
    color: #f1c40f;
  }
  footer .avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
    margin-right: 2rem;
    padding: 2px 5px 5px 2px;
    background: white;
    border-left: 1px solid #f1c40f;
    border-top: 1px solid #f1c40f;
    border-right: 5px solid #f1c40f;
    border-bottom: 5px solid #f1c40f;
  }
</style>

<h1>
  <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  The God Login (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="http://blog.codinghorror.com/the-god-login/">Source originale du contenu</a></h3>
    <p>I graduated with a Computer Science minor from the University of Virginia in 1992. The reason it's a minor and not a major is because to major in CS at UVa you had to go through the Engineering School, and I was absolutely not cut out for that kind of hardcore math and physics, to put it mildly. The beauty of a minor was that I could cherry pick all the cool CS classes and skip everything else.</p>

<p>One of my favorite classes, the one I remember the most, was Algorithms. I always told people my Algorithms class was the one part of my college education that influenced me most as a programmer. I wasn't sure exactly why, but a few years ago I had a hunch so I looked up <a href="http://www.cs.cmu.edu/~pausch/Randy/Randy/Vita.html">a certain CV</a> and realized that Randy Pausch – yes, <a href="http://en.wikipedia.org/wiki/The_Last_Lecture">the <em>Last Lecture</em> Randy Pausch</a> – taught that class. The timing is perfect: University of Virginia, Fall 1991, CS461 Analysis of Algorithms, 50 students.</p>

<p>I was one of them.</p>

<p>No wonder I was so impressed. Pausch was an incredible, charismatic teacher, a testament to the old adage that your should choose your teacher first and the class material second, if you bother to at all. It's so true.</p>

<p>In this case, the combination of great teacher and great topic was extra potent, as algorithms are central to what programmers do. Not that we invent new algorithms, but we need to understand the code that's out there, grok why it tends to be fast or slow due to the tradeoffs chosen, and <a href="http://blog.codinghorror.com/everything-is-fast-for-small-n/">choose the <em>correct</em> algorithms</a> for what we're doing. That's essential.</p>

<p>And one of the coolest things Mr. Pausch ever taught me was to ask this question:</p>

<blockquote>
<p>What's the God algorithm for this?</p>
</blockquote>

<p>Well, when sorting a list, obviously God wouldn't bother with a stupid Bubble Sort or Quick Sort or Shell Sort like us mere mortals, God would just immediately place the items in the correct order. Bam. One step. The <a href="http://bigocheatsheet.com/">ultimate lower bound on computation</a>, O(1). Not just fixed time, either, but literally one instantaneous step, <em>because you're freakin' God</em>. </p>

<p><img src="http://blog.codinghorror.com/content/images/2015/01/god-you-asked-for-a-sign.jpg" alt=""/></p>

<p>This kind of blew my mind at the time. </p>

<p>I always suspected that programmers became programmers because <a href="http://blog.codinghorror.com/bridges-software-engineering-and-god/">they got to play God</a> with the little universe boxes on their desks. Randy Pausch took that conceit and turned it into a really useful way of setting boundaries and asking yourself hard questions about what you're doing and why.</p>

<p>So when we set out to build a login dialog for <a href="http://www.discourse.org">Discourse</a>, I went back to what I learned in my Algorithms class and asked myself:</p>

<blockquote>
<p>How would God build this login dialog?</p>
</blockquote>

<p>And the answer is, of course, <strong>God wouldn't bother to build a login dialog at all.</strong> Every user would already be logged into GodApp the second they loaded the page because God knows who they are. Authoritatively, even.</p>

<p>This is obviously impossible for us, because God isn't one of our investors.</p>

<p>But.. how <em>close can we get</em> to the perfect godlike login experience in Discourse? That's a noble and worthy goal.</p>

<p><img src="http://blog.codinghorror.com/content/images/2015/01/discourse-login-dialog.png" alt=""/></p>

<p>Wasn't it Bill Gates who <a href="https://www.commandprompt.com/community/pyqt/x3581">once asked</a> why the hell every programmer was writing the same File Open dialogs over and over? It sure feels that way for login dialogs. I've been saying for a long time that <a href="http://blog.codinghorror.com/cutting-the-gordian-knot-of-web-identity/">the best login is no login at all</a> and I'm a staunch supporter of <a href="http://blog.codinghorror.com/your-internet-drivers-license/">logging in with your Internet Driver's license</a> whenever possible. So we absolutely support that, if you've configured it.</p>

<p><img src="http://blog.codinghorror.com/content/images/2015/01/common-oauth-logins.png" alt=""/></p>

<p>But today I want to focus on the <strong>core, basic login experience: user and password.</strong> That's the default until you configure up the other methods of login.</p>

<p>A login form with two fields, two buttons, and a link on it seems simple, right? Bog standard. It is, until you consider all the ways the simple act of logging in with those two fields can go wrong for the user. Let's think.</p>

<h4 id="lettheuserenteranemailtologin">Let the user enter an email to log in</h4>

<p>The critical fault of OpenID, as much as <a href="http://blog.codinghorror.com/openid-does-the-world-really-need-yet-another-username-and-password/">I liked it</a> as an early login solution, was its assumption that users could accept an URL as their "identity". This is flat out crazy, and in the long run this central flawed assumption in OpenID broke it as a future standard. </p>

<p><strong>User identity is always email, plain and simple</strong>. What happens when you forget your password? You get an email, right? Thus, email is your identity. Some people even propose <a href="http://notes.xoxco.com/post/27999787765/is-it-time-for-password-less-login">using email as the only login method</a>.</p>

<p><img src="http://blog.codinghorror.com/content/images/2015/01/discourse-log-in-email.png" alt=""/></p>

<p>It's fine to have a username, of course, but <em>always</em> let users log in with either their username or their email address. Because I can tell you with 100% certainty that when those users forget their password, and they will, all the time, they'll need that email anyway to get a password reset. Email and password are strongly related concepts and they belong together. Always!</p>

<p>(And a fie upon services that don't allow me to use my email as a username or login. I'm looking at you, Comixology.)</p>

<h4 id="telltheuserwhentheiremaildoesntexist">Tell the user when their email doesn't exist</h4>

<p>OK, so we know that email is de-facto identity for most people, and this is a logical and necessary state of affairs. But <em>which</em> of my 10 email addresses did I use to log into your site? </p>

<p>This was the source of a <a href="https://meta.discourse.org/t/different-password-reset-for-wrong-username-email/15909">long discussion at Discourse</a> about whether it made sense to reveal to the user, when they enter an email address in the "forgot password" form, whether we have that email address on file. On many websites, here's the sort of message you'll see after entering an email address in the forgot password form:</p>

<blockquote>
<p>If an account matches <a class="__cf_email__" href="http://blog.codinghorror.com/cdn-cgi/l/email-protection" data-cfemail="f89699959db89d80999588949dd69b9795">[email protected]</a>, you should receive an email with instructions on how to reset your password shortly.</p>
</blockquote>

<p>Note the coy "if" there, which is a <a href="http://www.troyhunt.com/2012/05/everything-you-ever-wanted-to-know.html">hedge against all the security implications of revealing whether a given email address exists on the site</a> just by typing it into the forgot password form. </p>

<p>We're deadly serious about picking safe defaults for Discourse, so out of the box you won't get exploited or abused or overrun with spammers. But after experiencing the real world "which email did we use here again?" login state on dozens of Discourse instances ourselves, we realized that, in this specific case, being user friendly is <em>way</em> more important than being secure.</p>

<p><img src="http://blog.codinghorror.com/content/images/2015/01/forgot-password.png" alt=""/></p>

<p>The new default is to let people know when they've entered an email we don't recognize in the forgot password form. This will save their sanity, and yours. You can turn on the extra security of being coy about this, if you need it, via a site setting.</p>

<h4 id="lettheuserswitchbetweenloginandsignupanytime">Let the user switch between Log In and Sign Up any time</h4>

<p>Many websites have started to show login and signup buttons side by side. This perplexed me; aren't the acts of logging in and signing up very different things? </p>

<p>Well, from the user's perspective, they don't appear to be. This Verge login dialog illustrates just how close the sign up and log in forms really are. Check out this animated GIF of it in action.</p>

<p><img src="http://blog.codinghorror.com/content/images/2015/01/login-vs-sign-up.gif" alt=""/></p>

<p>We've acknowledged that similarity by having either form accessible at any time from the two buttons at the bottom of the form, as a toggle:</p>

<p><img src="http://blog.codinghorror.com/content/images/2015/01/login-vs-create-new-account.png" alt=""/></p>

<p>And both can be kicked off directly from any page via the Sign Up and Log In buttons at the top right:</p>

<p><img src="http://blog.codinghorror.com/content/images/2015/01/sign-up-vs-log-in-discourse.png" alt=""/></p>

<h4 id="pickcommonwords">Pick common words</h4>

<p>That's the problem with language, we have so many <em>words</em> for these concepts:</p>

<ul>
<li>Sign In</li>
<li>Log In</li>
<li>Sign Up</li>
<li>Register</li>
<li>Join &lt;site&gt;</li>
<li>Create Account</li>
<li>Get Started</li>
<li>Subscribe</li>
</ul>

<p>Which are the "right" ones? <a href="http://ux.stackexchange.com/questions/1080/using-sign-in-vs-using-log-in">User research data isn't conclusive</a>.</p>

<p>I tend to favor the shorter versions when possible, mostly because I'm a fan of the whole brevity thing, but there are valid <a href="http://uxmovement.com/buttons/why-sign-up-and-sign-in-button-labels-confuse-users/">cases to be made</a> for each depending on the circumstances and user preferences.</p>

<p><img src="http://blog.codinghorror.com/content/images/2015/01/bad-okay-good-login-buttons.png" alt=""/></p>

<p>Sign In may be slightly more common, though Log In has some <a href="http://www.designcult.org/2011/08/why-do-we-call-in-logging-in.html">nautical and historical computing basis</a> that makes it worthy:</p>

<blockquote>
<p>A couple of years ago I did a survey of top websites in the US and UK and whether they used “sign in”, “log in”, “login”, “log on”, or some other variant. The answer at the time seemed to be that if you combined “log in” and “login”, it exceeded “sign in”, but not by much. I’ve also noticed that the trend toward “sign in” is increasing, especially with the most popular services. Facebook seems to be a “log in” hold-out. </p>
<p><img src="http://blog.codinghorror.com/content/images/2015/01/log-in-vs-sign-in-graph.png" alt="" title=""/></p>
</blockquote>

<h4 id="workwithbrowserpasswordmanagers">Work with browser password managers</h4>

<p>Every login dialog you create should be tested to work with the default password managers in …</p>

<p>At an absolute minimum. Upon subsequent logins in that browser, you should see the username and password automatically autofilled.</p>

<p><img src="http://blog.codinghorror.com/content/images/2015/01/log-in-autofill.png" alt=""/></p>

<p>Users rely on these default password managers built into the browsers they use, and any proper modern login form should respect that, and be designed sensibly, e.g. the password field should have <code>type="password"</code> in the HTML and a name that's readily identifable as a password entry field.</p>

<p>There's also <a href="https://lastpass.com/">LastPass</a> and so forth, but I generally assume if the login dialog works with the built in browser password managers, it will work with third party utilities, too.</p>

<h4 id="handlecommonusermistakes">Handle common user mistakes</h4>

<p>Oops, the user is typing their password with caps lock on? You should let them know about that.</p>

<p><img src="http://blog.codinghorror.com/content/images/2015/01/password-entry-caps-lock-is-on.png" alt=""/></p>

<p>Oops, the user entered their email as <a class="__cf_email__" href="http://blog.codinghorror.com/cdn-cgi/l/email-protection" data-cfemail="e38d828e86a3848e828fcd808c8e">[email protected]</a> instead of <a class="__cf_email__" href="http://blog.codinghorror.com/cdn-cgi/l/email-protection" data-cfemail="e48a858981a48389858d88ca878b89">[email protected]</a>? Or <a class="__cf_email__" href="http://blog.codinghorror.com/cdn-cgi/l/email-protection" data-cfemail="305e515d5570585f445d51595c1e535d">[email protected]</a> instead of <a class="__cf_email__" href="http://blog.codinghorror.com/cdn-cgi/l/email-protection" data-cfemail="620c030f07220a0d160f030b0e4c010d0f">[email protected]</a>? You should either fix typos in common email domains for them, or let them know about that.</p>

<p>(I'm also a big fan of <a href="http://answers.microsoft.com/en-us/ie/wiki/ie11-iewindows8_1/the-use-of-the-password-reveal-eye-button-in/19a9dee2-fb0c-4c26-a6bc-ac02cf98d80e">native browser "reveal password" support</a> for the password field, so the user can verify that she typed in or autofilled the password she expects. Only Internet Explorer and I <em>think</em> Safari offer this, but all browsers should.)</p>

<h4 id="helpuserschoosebetterpasswords">Help users choose better passwords</h4>

<p>There are many schools of thought on <s>forcing</s> helping users choose passwords that aren't unspeakably awful, e.g. <a href="http://blog.codinghorror.com/dictionary-attacks-101/">password123 and iloveyou and so on</a>. </p>

<p>There's the common password strength meter, which updates in real time as you type in the password field.</p>

<p><img src="http://blog.codinghorror.com/content/images/2015/01/dropbox-password-strength-meters.png" alt=""/></p>

<p>It's clever idea, but it gets awful preachy for my tastes on some sites. The implementation also leaves a lot to be desired, as it's left up to the whims of the site owner to decide what password strength means. One site's "good" is another site's "get outta here with that Fisher-Price toy password". It's frustrating.</p>

<p>So, with Discourse, rather than all that, I decided we'd default on a solid absolute minimum password length of 8 characters, and then verify the password to make sure it is not one of the <a href="http://thepasswordproject.com/">10,000 most common known passwords</a> by checking its hash.</p>

<p><img src="http://blog.codinghorror.com/content/images/2015/01/create-new-account-password-too-common.png" alt=""/></p>

<h4 id="dontforgetthekeyboard">Don't forget the keyboard</h4>

<p>I feel like keyboard users are a dying breed at this point, but for those of us that, when presented with a login dialog, like to rapidly type</p>

<p><kbd><a class="__cf_email__" href="http://blog.codinghorror.com/cdn-cgi/l/email-protection" data-cfemail="cca2ada1a98ca9b4ada1bca0a9e2afa3a1">[email protected]</a></kbd>, <kbd>tab</kbd>, <kbd>p4$$w0rd</kbd>, <kbd>enter</kbd></p>

<p>… <em>please</em> verify that this works as it should. Tab order, enter to submit, etcetera.</p>

<h4 id="ratelimitallthethings">Rate limit all the things</h4>

<p>You should be <a href="http://blog.codinghorror.com/rate-limiting-and-velocity-checking/">rate limiting everything users can do, everywhere</a>, and that's especially true of the login dialog.</p>

<p>If someone forgets their password and makes 3 attempts to log in, or issues 3 forgot password requests, that's probably OK. But if someone makes a thousand attempts to log in, or issues a thousand forgot password requests, that's a little weird. Why, I might even venture to guess they're possibly … <em>not human</em>.</p>

<p><img src="http://blog.codinghorror.com/content/images/2015/01/too-many-failed-log-in-attempts.png" alt=""/></p>

<p>You can do fancy stuff like temporarily disable accounts or start showing a CAPTCHA if there are too many failed login attempts, but this can easily become a griefing vector, so be careful.</p>

<p>I think a nice middle ground is to insert standard pauses of moderately increasing size after repeated sequential failures or repeated sequential forgot password requests from the same IP address. So that's what we do.</p>

<h4 id="stuffiforgot">Stuff I forgot</h4>

<p>I tried to remember everything we went through when we were building our ideal login dialog for Discourse, but I'm sure I forgot something, or could have been more thorough. Remember, <a href="https://github.com/discourse/discourse">Discourse is 100% open source</a> and by definition a work in progress – so as my friend <a href="http://tirania.org/blog/">Miguel de Icaza</a> likes to say, when it breaks, you get to keep both halves. Feel free to test out our implementation and give us your feedback in the comments, or point to other examples of great login experiences, or cite other helpful advice.</p>

<p>Logging in involves a simple form with two fields, a link, and two buttons. And yet, after reading all this, I'm sure you'll agree that it's deceptively complex. Your best course of action is not to build a login dialog at all, but instead rely on authentication from an outside source whenever you can.</p>

<p>Like, say, God.</p>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="http://blog.codinghorror.com/the-god-login/">Source originale</a> |
    <a href="/david/stream/2019/">Accueil du flux</a>
  </p>
</nav>

<footer>
  <div>
    <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
    <p>
      Bonjour/Hi!
      Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>
      Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).
    </p>
    <p>
      Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.
    </p>
    
    <p>
      Voici quelques articles choisis :
      <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
      <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
      <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
      <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
      <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
      <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
      <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
      <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
      <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
      <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
      <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
      <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
      <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
      <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
      <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
      et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
    </p>
    <p>
      On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.
    </p>
    <p>
      Je ne traque pas ta navigation mais mon
      <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
      conserve des logs d’accès.
    </p>
  </div>
</footer>
<script type="text/javascript">
  ;(_ => {
    const jumper = document.getElementById('jumper')
    jumper.addEventListener('click', e => {
      e.preventDefault()
      const anchor = e.target.getAttribute('href')
      const targetEl = document.getElementById(anchor.substring(1))
      targetEl.scrollIntoView({behavior: 'smooth'})
    })
  })()
</script>