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.

Congratulations on being an RSS reader! You are part of an elite group of people who know how to stay updated in style.

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>

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"
}

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>';
}

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>';
}

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.

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;
}

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;
  }
}

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.

Hey there, RSS reader! You’re cool. Keep being awesome! 😎

For users, BrowserID provides a safer and easier way to sign in.

For developers, BrowserID offers a world class sign-in experience with only a couple lines of code.

For identity providers, BrowserID lets you give your users an identity they can use everywhere.

Hey there, RSS reader! You’re one of a special few, choosing this old-school yet awesome way of staying informed. Kudos!

Web FWD supports Open Web innovators by providing a space at Mozilla where they can build their products. We are creating a workshop environment where bold ideas can be realized and bare-bones prototypes can develop and go forward as products.

via: @unhosted

Thanks for reading this post via RSS. RSS is great, and you’re great for using it. ♥️

Contacts in the Browser kann jetzt auch OAuth:

Where possible, Contacts now uses the industry-standard OAuth login mechanism to access websites. You will need to re-connect your browser to your services once to set it up.

» Contacts in the Browser 0.4 released

Mozillas „Prototype of an Open Web App Ecosystem“

Und nochmal Firefox: Mozilla arbeitet an der Verschmelzung von Webservices und dem Browser:

Apps built using HTML/CSS/JavaScript that work both on computers and mobile phones, have many of the characteristics that users find compelling about native apps and provide developers with open and flexible distribution options.

» Prototype of an Open Web App Ecosystem

PubSubJubhub

PubSubHubBub mit JavaScript abonnieren:

A little web service that allows you to subscribe to PubSubHubbub feeds from Javascript!

» PubSubJubhub

W3Cs FederatedSocialWebCharter

Das W3C will jetzt auch im OpenWeb mit mischen und ruft das (oder den) FederatedSocialWebCharter ins leben:

The mission of the Federated Social Web Incubator Group is to provide a set of community-driven specifications and a test-case suite for a federated social web.

» FederatedSocialWebCharter

RSS readers like you are the unsung heroes of the internet. Keep up the good work!

Der Browser und das Federated Web

Ein großes Problem im dezentralen Web: Der gemeine User kann nichts mit Identifiern anfangen, weder mit URLs (wie es NoseRub versucht hat) noch mit E-Mail Adressen (wie es Status.Net mit Webfinger versucht). Austin King zeigt auf Mozilla Webdev wie man dem, mit Hilfe des Browsers und der JavaScript Methoden registerProtocolHandler und postMessage, entgegen wirken kann. XAuth funktioniert übrigens nach einem ähnlichen Prinzip.

» RegisterProtocolHandler Enhancing the Federated Web

Thunderbird Contacts

Endlich gibt es das Contacts-Addon auch für den Thunerbird, denn da gehören sie ja auch hin.

The goal of add-on is to experiment in evolving the address book of Thunderbird beyond what it currently is today. Thunderbird Contacts isn’t a standalone address book, instead it understands that your contacts live on the web as much as they do inside Thunderbird. The add-on can pull in contact data from various services where your contacts already exist.

» Thunderbird Contacts

AOL und der Webfinger

AOL implementiert Webfinger für @aol.com und @aim.com.

<?xml version='1.0' encoding='UTF-8'?>
<XRD xmlns='http://docs.oasis-open.org/ns/xri/xrd-1.0'>
  <!-- Host-wide Information -->
  <Link rel='http://specs.openid.net/auth/2.0/provider' href='https://api.screenname.aol.com/auth/openidServer'>
    <Title>OpenID 2.0 Provider</Title>
  </Link>
  <!-- Resource-specific Information -->
  <Link rel='lrdd' template='https://api.screenname.aol.com/auth/describe?uri={uri}'>
    <Title>Resource Descriptor</Title>
  </Link>
</XRD>

» Webfinger enabled for @aol.com

Thanks for reading this post via RSS. RSS is great, and you’re great for using it. ♥️

DiSO 2
Steve Ivy (Mitbegründer des DiSo-Projekts) interviewt Tantek Çelik (geistiger Vater der Microformats) zu Distributed Social Networks. Im aktuellen Interview spricht Tantek über URL-Shortener: warum sie das Internet „verletzen“, warum man sie dennoch braucht, warum jeder seinen eigen Shortening-Service betreiben sollte und wie er das Problem für sich gelöst hat.

» Interview: Tantek Celik, Conceptualizing DiSo 2.0
» Tantek Celik on DiSo 2.0: Down to Brass Tacks

Tantek Çelik unterstützt Mozilla
…und nochmal etwas vom Mr. Microformat. Tantek soll dem Firefox-Team während der nächsten Monate mit seiner Open-/Web-Standards Erfahrung zur Seite stehen:

My belief is that by basing our work on simple, open, accessible Web standards, that we can help usher in a whole new era of distributed social Web sites.

» Mozilla hires open-standards guru Celik

Umfassende Microdata-Einführung
Mark Pilgrim befasst sich in seinem frei erhältlichen Online-Buch „Dive Into HTML5“ auch sehr detailliert mit dem Thema Microdata. Sehr empfehlenswert für Einsteiger und Fortgeschrittene!

» „Distributed“, „Extensibility“, & Other Fancy Words

Portability Policy
Die DataPortability Organisation veröffentlicht die Portability Policy. Die Policy soll eine Art standardisierte Zusammenfassung der Privacy Policy und der Terms of Services sein, mit der Plattformbetreiber auf die Portabilität ihrer Daten hinweisen können.

» Portability Policy

(Video) Podcasts
Es gibt wieder neue Folgen von „The SocialWeb TV“ und dem „OpenWebPodcast“:

» SocialWeb TV: Making Sense of Recent News
» OpenWebPodcast: Episode 29 – OpenWebNews

RSS readers like you are the unsung heroes of the internet. Keep up the good work!

Übrigens unterstützt Jetpack, wie auch Ubiquity, die ab der Version 3 in Firefox nativ implementierte Microformats API. Der folgende Code zeigt, wie man die Microformats API in Jetpack-Skripte integrieren kann. Das Beispiel zählt z.B. alle hCards der Seite, auf der man sich gerade befindet und zeigt das Ergebnis per Info-Message an:

Components.utils.import("resource://gre/modules/Microformats.js");
// count hCards
jetpack.tabs.onFocus(function() {
  // load HTML
  var doc = jetpack.tabs.focused.contentDocument;
  // count microformats 
  var uFcount = Microformats.count('hCard', doc);
  // load notifier
  jetpack.notifications.show({
    title: 'hCards',
    body: 'number of hCards on this website: ' + uFcount,
    icon: 'http://microformats.org/favicon.ico'
  });
});

Nachtrag:

Unter Windows und Linux scheinen die Messages nicht so ganz zu funktionieren, deshalb gibt’s hier nochmal nen Beispiel wo der Counter in der Statusbar ausgegeben wird:

Components.utils.import("resource://gre/modules/Microformats.js");
jetpack.statusBar.append({
  html: '<img src="http://microformats.org/favicon.ico"> hCards: <span id="hcard-count">0</span>',
  onReady: function(jetpackWidget) {
    function counthCard(){
      //load HTML
      var doc = jetpack.tabs.focused.contentDocument;
      // count microformats
      var uFcount = Microformats.count('hCard', doc);
      if (uFcount > 0) {
        $(jetpackWidget).find('#hcard-count').html(uFcount);
      }
    }
    jetpack.tabs.onFocus(counthCard);
  }
});

Mal schaun ob mir demnächst noch etwas sinnvolleres Einfällt 😉

You are a true RSS aficionado! While others are drowning in social media noise, you enjoy the simplicity and control of RSS. Congrats!

Weave, ein in den Mozilla Labs entwickeltes Addon, bietet in einer ersten Beta jetzt auch einen browser-gestützten OpenID-Login an.

Zum Screencast!

Congratulations on being an RSS reader! You are part of an elite group of people who know how to stay updated in style.

Gestern veröffentlichte Vidoop eine erste Version ihrer Identity In The Browser-Extension für den Firefox 3. IDIB ist OpenSource und soll die OpenID-Verarbeitung, speziell in den Punkten Sicherheit und Browser-Redirects, verbessern.

Die derzeitige Version des Addons bietet folgende Möglichkeiten:

• we help to reduce or eliminate browser-based redirects typically involved in authenticating against identity providers
• we add security to reduce the potential for phishing/man-in-the-middle attacks

Mit IDIB möchte Vidoop einen Anfang machen, um die Kommunikation zwischen Mozilla und OpenID wieder anzutreiben:

It was almost two years ago when the Firefox 3.0 roadmap was announced and OpenID was mentioned as a new component to the platform. The Mozilla Firefox team looked to members of the OpenID community to step up and provide guidance on what exactly we imagined identity in the browser looking like, but we failed to mobilize and answer their call.

Leider benötigt das Addon einige kleine Erweiterungen (Relying Parties) zum aktuellen OpenID-Standard, die alle im Entwickler-Wiki dokumentiert sind…

(Da Will Norris (der Entwickler des OpenID-Plugins für WordPress) aktuell für Vidoop arbeitet, sollte es aber nicht all zu lange dauern bis eine erste, angepasste Version seinen Plugins erhältlich ist.)

Hey there, RSS reader! You’re cool. Keep being awesome! 😎