In particular, we think login should be personal and minimal first, social later [and] Users, not Sites, should choose their Identity Provider

Users don’t like social login

Soziale Netzwerke spiegeln meistens einen Lebensabschnitt und spielen nur eine begrenzte Zeit eine wichtige Rolle. Man wird älter, Interessen ändern sich, man wechselt das Netzwerk. Stellt euch vor ihr wärt bis an euer Lebensende an MySpace gebunden, nur weil ihr euch überall mit dem in die Jahre gekommen Netzwerk angemeldet habt.

BrowserID

Ich schreibe gerade einen Artikel für das t3n Magazin über aktuelle Sign-In-Mechanismen und hab mir in dem Zuge BrowserID mal etwas genauer angeschaut. Ich bin wirklich extrem überrascht mit wie wenig Arbeit es sich in z.B. WordPress einbauen lässt.

BrowserID besteht eigentlich nur aus einem JS-File,ein paar Zeilen JS-Code:

<script src="https://browserid.org/include.js" type="text/javascript"></script>
<script type="text/javascript">
navigator.id.get(function(assertion) {
    if (assertion) {
        // This code will be invoked once the user has successfully
        // selected an email address they control to sign in with.
    } else {
        // something went wrong!  the user isn't logged in.
    }
});
</script>Code-Sprache: HTML, XML (xml)

und dem anschließenden Verifizieren der assertion:

$ curl -d "assertion=&audience=https://mysite.com" "https://browserid.org/verify"
{
    "status": "okay",
    "email": "lloyd@example.com",
    "audience": "https://mysite.com",
    "expires": 1308859352261,
    "issuer": "browserid.org"
}Code-Sprache: JavaScript (javascript)

Den ausführlichen Ablauf der Authentifizierung findet ihr auf Github.

Um BrowserID in WordPress zu integrieren lädt man also zuerst den JS-Code in den Login Header:

// add the BrowserID javascript-code to the header
add_action('login_head', 'bi_add_js_header');
function bi_add_js_header() {
  echo '<script src="https://browserid.org/include.js" type="text/javascript"></script>';
  echo '<script type="text/javascript">'."\n";
  echo 'function browser_id_login() {
    navigator.id.get(function(assertion) {
      if (assertion) {
        window.location="' . get_site_url(null, '/') .'?browser_id_assertion=" + assertion;
      } else {
        // do nothing!
      }
    })
  };'."\n";
  echo '</script>';
}Code-Sprache: PHP (php)

und platziert den BrowserID-Button auf der Login-Seite:

// add the login button
add_action('login_form', 'bi_add_button');
function bi_add_button() {
  echo '<p><a href="#" onclick="return browser_id_login();"><img src="https://browserid.org/i/sign_in_blue.png" style="border: 0;" /></a></p>';
}Code-Sprache: HTML, XML (xml)

Nach dem klick auf den Button öffnet sich das Autorisierungs-Fenster von BrowserID und nach dem erfolgreichen Sign-In wird die gerade implementierte Methode navigator.id.get(function(assertion) {} aufgerufen.

BrowserID login window

Im nächsten Schritt muß man die erhaltene assertion über BrowserID.org verifizieren. Da ich den notwendigen POST nicht über JavaScript absetzen will, leite ich einfach auf eine Seite weiter und übergebe die erhaltene assertion als GET-Paramater.

if (assertion) {
  window.location="' . get_site_url(null, '/') .'?browser_id_assertion=" + assertion;
}Code-Sprache: JavaScript (javascript)

Jetzt kann der POST bequem über WordPress abgesetzt werden.

// the verification code
add_action('parse_request', 'bi_verify_id');
function bi_verify_id() {
  global $wp_query, $wp, $user;

  if( array_key_exists('browser_id_assertion', $wp->query_vars) ) {
    // some settings for the post request
    $args = array(
      'method' => 'POST',
      'timeout' => 30,
      'redirection' => 0,
      'httpversion' => '1.0',
      'blocking' => true,
      'headers' => array(),
      'body' => array(
        'assertion' => $wp->query_vars['browser_id_assertion'], // the assertion number we get from the js
        'audience' => "http://".$_SERVER['HTTP_HOST'] // the server host
      ),
      'cookies' => array(),
      'sslverify' => 0
    );

    // check the response
    $response = wp_remote_post("https://browserid.org/verify", $args);

    if (!is_wp_error($response)) {
      $bi_response = json_decode($response['body'], true);

      // if everything is ok, check if there is a user with this email address
      if ($bi_response['status'] == 'okay') {
        $userdata = get_user_by('email', $bi_response['email']);
        if ($userdata) {
          $user = new WP_User($userdata->ID);
          wp_set_current_user($userdata->ID, $userdata->user_login);
          wp_set_auth_cookie($userdata->ID, $rememberme);
          do_action('wp_login', $userdata->user_login);

          wp_redirect(home_url());
          exit;
        } else {
          // show error when there is no matching user
          echo "no user with email address '" . $bi_response['email'] . "'"; 
          exit;
        }
      }
    }
    
    // show error if something didn't work well
    echo "error logging in"; 
    exit;
  }
}Code-Sprache: PHP (php)

Gibt es einen User mit der entsprechenden E-Mail – Adresse wird er eingeloggt, falls nicht, wird ein Fehler ausgegeben.

Bei der Demo hab ich mir aus Zeitgründen ein wenig Code bei Marcel Bokhorst geliehen, dessen BrowserID-Plugin wesentlich ausgereifter und vollständiger ist als der kleine Demo-Code den ich hier zusammengestückelt habe.

Wenn euch das zu schnell ging und ich auf einige Details nicht genügend eingegangen bin, könnt ihr gerne fragen 🙂

Ich habe den kompletten Code übrigens auch auf Github hochgeladen… das ist einfacher als sich alles zusammen zu kopieren.

Der Artikel "Single-Sign-On mit Facebook, Twitter und dem Open Stack", den ich für Ausgabe 19 des t3n Magazins geschrieben habe, ist jetzt kostenlos im Heftarchiv verfügbar.

Immer mehr Webdienste erleichtern ihren Nutzern die Anmeldung, indem Sie statt einer langwierigen Registrierung auf den einfachen Login mit „Facebook Connect“ oder „Sign in with Twitter“ setzen. Wir zeigen, wie das funktioniert, welche Vorteile und Risiken sich daraus ergeben und warum es am Ende auf einen „Universal Login“ mit offenen Standards wie OpenID hinauslaufen könnte.

Link: Single-Sign-On mit Facebook, Twitter und dem Open Stack

Viel Spaß beim lesen…

RPX ist ein SingleSignOn-Service von JanRain (der Firma hinter myOpenID) welcher alle gängigen SignOn-Mechanismen wie z.B. OpenID, Facebook-Connect, MySpaceID oder Microsofts Live ID in einem Dienst vereint. Der Vorteil für Webseiten-Betreiber liegt in der, für sie einheitlichen, Verarbeitung der verschiedenen offenen Standards und proprietären Formate. Der Login wird praktisch komplett an RPX weiter delegiert und die ganze Logik läuft über die Server von JanRain. Nach erfolgreicher Authentifizierung bekommt der Betreiber dann alle Informationen (bei OpenID z.B. Profil-Daten die per SReg übertragen wurden) in einheitlicher Form übermittelt… „SingleSignOn as a Service“ so zu sagen.

Mit dem Plugin für WordPress sind all diese Features jetzt auch für den privaten Blog nutzbar.

rpx-wordpress-login

Das Plugin ist sicherlich ein genialer Marketing-Coup um RPX zu promoten, bietet für mich aber (außer dem breiten Spektrum an Login-Möglichkeiten) keine wirkliche Alternative zu dem klassischen OpenID-Plugin von Will Norris.

Was mich an RPX besonders stört:

  • Für jeden der sich beim Kommentieren über RPX authentifiziert wird ein WordPress-Profil angelegt, auch wenn die Registrierung für WordPress deaktiviert wurde.
  • Der ganze Login-Prozess wird über JanRain abgehandelt, was ja eigentlich auch nicht der Idee von OpenID entspricht. „Man in the middle“ mit Ansage!
  • Man muss sich zuerst relativ umständlich bei RPX registrieren um einen API-Key zu bekommen