Matthias Pfefferle

Die Idee der Web Intents ist nicht mehr ganz so neu und ich hatte auch schon seit einer ganzen Weile mal vor darüber zu schreiben, aber… naja… jedenfalls hat sich Google der Idee jetzt mal angenommen und unter den Fittichen des W3C mal einen einen Editor’s Draft gestartet.

Das Problem: Für die meisten Bedürfnisse im Web gibt es eine Reihe an Services, die diese befriedigen… und das ist eigentlich auch gut so… Leider führt es aber dazu dass Seitenbetreiber, um es jedem Besucher recht zu machen, zu folgendem neigen:

In der OpenID-Community (welche mit dem gleichen Problem zu kämpfen hat), nennt man dieses Phänomen “NASCAR Problem” in Analogie zu den bunten Stickern der Rennwagen.

Das große Problem des dezentralen Webs!

Im Idealfall sollte aber nicht der Seitenbetreiber die Services auswählen sondern der Seitenbesucher …und genau das ist das Dilemma bei verteilten Diensten (wenn man mal nicht davon ausgeht dass eh alle Welt bei Facebook ist).

OpenID, Diaspora, StatusNET, Addthis, ShareThis und viele andere haben bisher relativ erfolglose Versuche gestartet die Icon-Flut einzudämmen. OpenID & Co. hat es mit diversen “Identifiern” (URL, XRI, E-Mail, Webfinger, …) versucht und die User dadurch nur noch mehr verwirrt und die Share-Services verschleiern das Problem in dem sie die Buttons einfach in einem Popup/Layer verstecken.

Wie können Web Intents helfen?

Web Intents funktionieren nach einem ganz ähnlichen Prinzip wie XAuth (hier erklärt). Beim Surfen merkt sich der Browser welche Dienste ein User benutzt und gibt diese, bei bedarf an besuchte Seiten weiter. Ein Beispiel:

1. Ein User besucht Google (oder Yahoo oder MyOpenID)
2. Der Browser fragt nach, ob er sich Google als Login-Dienst (in dem Fall OpenID) merken soll
3. Der User bestätigt und besucht weitere Seiten
4. Er entdeckt Plaxo und möchte sich anmelden
5. Beim Klick auf den Login-Button wird die Liste aller, beim Browser registierten Login-Dienste (in unserem Beispiel nur Google) an die Webseite übertragen (sofern der User einverstanden ist)
6. Statt wahrlose ausgewählte Diensten anzuzeigen, ist Plaxo jetzt in der Lage gleich den Authentifizierungs-Prozess mit Google zu starten

Dank Web Intents brauchen Service-Anbieter fortan nur noch ihre Dienste beim Browser registrieren und Seitenbetreiber können einen Platz auf ihrer Seite anbieten, an dem diese Aktionen ausgeführt werden sollen… so zu sagen eine Art “Universal Button”. Der Webmonkey fasst das Thema Web Intents folgendermaßen zusammen:

In practice Web Intents work a bit like mailto: links, defining an action and then passing it along to the browser, which allows the user to choose how to handle the action. The difference is that instead of opening a desktop app, Web Intents connect to web services.

Keine Identifier, keine langen Button-Leisten/Popups/Layer und den ganzen komplizierten Käse übernimmt der Browser! Vielleicht wird es so ja doch noch was mit dem synaptic, distributed bzw. federated social web

In den kommenden Artikeln werde ich etwas mehr auf die Technik und die Implementierung in Chrome/WebKit eingehen.

Hier noch ein paar Links:

• Web Intents – Gluing web functionality together
• Button Sluts and Web Actions
• WebKit Offers Early Preview of ‘Web Intents’
• Web Intents: Demos
• Web Intents: Examples

Wie kommt jemand mit relativ beschränktem Talent in gestalterischen Dingen dazu, einen Font zu basteln? Naja… “Font” wäre etwas übertrieben… Eigentlich hat mich ja nur genervt, dass Font Awesome kein RSS-Icon hat… und nach einer kleinen Internet Recherche hat sich herausgestellt, dass das Icon-Font erstellen gar nicht so schwer ist:

• Make a dingbat font with Inkscape
• How to Make a Font with Inkscape 0.47 (Youtube)
• How to make your own icon webfont

Also hab ich noch weitere Icons gesammelt (nur das RSS-Icon wäre etwas langweilig gewesen ), sie mit Inkscape entsprechend bearbeitet und irgendwie ist daraus überaschenderweise wirklich so ne Art Font entstanden

Ich präsentiere die OpenWeb Icons:

(weil ich nur OpenWeb kann )

Eine Liste mit allen Icons, wie man sie benutzt und was sie bedeuten, findet man bei Github: http://pfefferle.github.com/openwebicons/

Falls ihr Kritik oder Anregungen habt, dann immer raus damit! …vielleicht fällt dem Ein oder Anderen ja auch noch ein Icon ein, welches ich bisher vergessen habe.

Neuer Name, neues Layout, den Fokus nicht mehr so streng auf Webstandards aber immer noch mit “Pfefferles OpenWeb”

Seit dem 16.03. heißt das Webstandards-Magazin offiziell SCREENGUIDE und ist in allen Bahnhofs- oder Flughafen-Buchhandlung erhältlich.

In meiner Kolumne geht es diesmal um den Wandel im OpenWeb:

Das OpenWeb hat keine Zukunft! Die proprietären Systeme von Twitter und Facebook haben sich durchgesetzt und die goldenen Zeiten von RSS sind vorbei. So sieht es zumindest Robert Scoble. Der kampf für ein OpenWeb und DataPortability von 2008 scheint verloren und viele der Revoltierenden arbeiten heute sogar für das damalige Feindbild Facebook.

Kaufen! Danke!

Ich durfte mal wieder einen Artikel für die t3n schreiben und das Thema ist (auch mal wieder) Single Sign On.

Seit Jahren spricht niemand mehr von Data Portability, und auch der Hype um OpenID flacht aus vielerlei guten Gründen immer weiter ab. Es ist an der Zeit, Bilanz zu ziehen, die Themen „Online Identity“ und „Single Sign-On“ neu anzugehen und aus den Fehlern der letzten Jahre zu lernen. Ein Ausblick.

Der Artikel beschreibt im Wesentlichen die aktuellen Projekte von OpenID (OpenID Connect und Account Chooser), Google (Google Identity Toolkit) und Mozilla (BrowserID) und deren Starken und Schwächen.

Seit Freitag ist Ausgabe 27 des t3n-Magazins im Handel erhältlich… also ab in den Laden, kaufen, meinen Artikel lesen und mir Feedback geben! Danke

Hat der erste Entwurf von OpenID Connect noch auf eine (übersichtliche) Seite gepasst, braucht der Draft der OpenID Foundation schon 7 unterschiedliche Spezifikationen.

Wieso müssen “Standard”-Organisationen wie das W3C (z.B. RDFa) oder der OpenID Foundation denn alles so unnötig kompliziert machen? Immerhin schafft es ja sogar Facebook seinen Authentifizierungsprozess auf einer Seite zu erklären. …und noch besser! Er lässt in drei Sätzen zusammenfassen:

1. Hol dir über folgende URL einen Access-Token:
   https://www.facebook.com/dialog/oauth?
client_id=YOUR_APP_ID&redirect_uri=YOUR_URL
2. Häng ihn an folgende URL, auf den du den User weiterleitest:
   https://www.facebook.com/dialog/oauth?
client_id=YOUR_APP_ID&redirect_uri=YOUR_URL&
scope=email,read_stream
3. Fertsch!

…dazu kommen eine weitere Discovery-Variante die Webfinger, host-meta, XRD, XRDS oder YADIS komplett ignoriert und eine Identity-API die SREG oder AX noch nicht einmal ähnelt!

Mike Jones, einer der Hauptentwickler der Spezifikation, schreibt zwar:

The design philosophy behind OpenID Connect is “make simple things simple and make complex things possible”.

Das ist aber nur die halbe Wahrheit. Webseitenbetreiber, die zukünftig einen OpenID Connect Login anbieten wollen, haben es in der Tat etwas einfacher, da sie sich auf die “Minimalanforderungen” konzentrieren können. Seiten die einen OpenID Connect Provider stellen wollen haben aber folgendes Problem:

Authorization Requests can follow one of two paths; the Implicit Flow or the Authorization Code Flow. [...]
The OpenID Connect Basic Client profile only documents Clients using the Implicit Flow. OpenID Providers MUST support both flows. [...]

Damit begeht die OpenID Foundation wieder den gleichen Fehler wie bei OpenID 2.0. Am Schluss gibt es so viele unterschiedliche und halbfertige Implemenrierungen, dass man wieder auf SaaS-Dienste wie Janrain oder Gigaya zurückgreifen muss. Wozu braucht es dann noch einen “Standard”?

Warum denn immer 1000 Alternativen anbieten? Bei Facebook klappts ja auch ohne…

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.

Ich habe mich letzte Woche ein wenig mit Carsten über das “scheitern” des OpenWebs unterhalten… wen es interessiert und wer mit diskutieren will, sollte am besten bei Marcel vorbei schauen, der hat den Dialog schön zusammengefasst und um ein paar eigene Gedanken erweitert.

Marcels Fazit:

Neben dem Chaos, das das Einbinden offener Standards, oder Möchte-gern-Standards für Entwickler unattraktiv macht, gibt es noch ein weiteres Problem, dem sich das Open Web, das dezentrale Web, gegenüber sieht: Die Protagonisten, also die Fürsprecher und die, welche die Grundlagen entwerfen und weiter entwickeln, haben es bis dato versäumt, einen effektiven Hebel zu erschaffen, um Anreize für alle Seiten zu generieren, die dann zu den virtuosen selbstverstärkenden Effekten führen.

Die im Gespräch angemerkte Kurzlebigkeit der Standards ist das Gegenteil eines effektiven Hebels: Sie treibt die notwendige Entwicklerseite frustriert weg.

Ich bin im übrigen mittlerweile fast der Meinung, dass jede signifikante Weiterentwicklung von Webstandards von Unternehmen wie Google und Facebook kommen wird und muss. Denn in deren Produkten steckt der Hebel schon drin. Das bringt uns allerdings wieder zurück zu den Argumenten von Bradbury zur Abhängigkeit bei Web-APIs.

Obwohl ich das immer noch nicht so richtig wahr haben will hat Marcel mit seiner Aussage wohl den Nagel auf den Kopf getroffen. Ein aktuelles Beispiel: Schema.org! Ich beschäftige mich seit mehr als 5 Jahren mit Microformats und RDFa… für mich ist Schema.org einfach nur ignorant!
Für die meisten Webentwickler ist Schema.org aber der erste Berührungspunkt mit Websemantiken, wieso sich also weiter mit Altlasten herumplagen. Google, Microsoft und Yahoo! einigen sich auf Schema.org… ein simples Format und ein valider Usecase. Damit wird Schema.org zum neuen defacto Standard ohne je den Anspruch darauf erhoben zu haben:

schema.org is not a formal standards body. schema.org is simply a site where we document the schemas that three major search engines will support.

Der Punkt ist: Was bringens uns “Standards” von W3C und IETF wenn sie niemand unterstützt. Wir brauchen Formate die ein Bedürfnis decken und von der breiten Masse akzeptiert werden… ob man sie jetzt “Standard” nennt oder nicht!

(Um dieses Thema geht es übrigens auch in meiner Kolumne im nächsten Webstandards Magazin.)

Was das OpenWeb so kompliziert macht ist das Wörtchen “alternativ“!

• OpenID Discovery basiert auf Meta-Tags, alternativ funktioniert aber auch XRDS(-Simple)/Yadis oder Webfinger.
• OpenID stellt über SREG Profilinformationen bereit, alternativ aber auch über Attribute Exchange.
• RDFa 1.1 ist folgendermaßen aufgebaut:

  <html
    prefix="foaf: http://xmlns.com/foaf/0.1/"
    >
    ...
    <span property="foaf:name">John Doe</span>
    ...
  </html>

  alternativ aber auch:

  <div vocab="http://xmlns.com/foaf/0.1/" about="#me">
    <span property="name">John Doe</span>
  </div>

  …oder:

  <div profile="http://xmlns.com/foaf/0.1/" about="#me">
    <span property="foaf:name">John Doe</span>
  </div>

• OpenSocial, oEmbed, ActivityStrea.ms und host-meta benutzen JSON, alternativ aber auch XML
• OAuth verschlüsselt mit HMAC-SHA1, alternativ aber auch mit RSA-SHA1 oder PLAINTEXT

To be continued…

Wie viel Komplexität man sich sparen könnte wenn man sich auf eine Variante beschränken würde.

Seit 16.09. ist das neue Webstandards-Magazin im Handel erhältlich und gerade jetzt vergess’ ich darüber zu posten… immerhin enthält es Folge 10 von Pfefferles OpenWeb

…und zur Feier des Tages gibt es ein wenig Schema.org-Bashing:

Knapp 2 Milliarden Webseiten sind mit einer hCard ausgezeichnet und RDFa verzeichnete zwischenzeitlich ein Wachstum von 510% , trotzdem haben sich Google, Yahoo! und Microsoft dazu entschlossen ein neues Format zu entwickeln.

Viel Spaß beim lesen und ich freue mich wie immer über ein bisschen Feedback.