{"id":4102,"date":"2012-01-07T17:35:27","date_gmt":"2012-01-07T16:35:27","guid":{"rendered":"http:\/\/notizblog.org\/?p=4102"},"modified":"2020-03-24T14:26:00","modified_gmt":"2020-03-24T13:26:00","slug":"browserid-as-easy-as-copy-and-paste","status":"publish","type":"post","link":"https:\/\/notiz.blog\/2012\/01\/07\/browserid-as-easy-as-copy-and-paste\/","title":{"rendered":"BrowserID – as easy as copy & paste"},"content":{"rendered":"\n
\"BrowserID\"<\/figure><\/div>\n\n\n\n

Ich schreibe gerade einen Artikel f\u00fcr das t3n Magazin<\/a> \u00fcber aktuelle Sign-In-Mechanismen und hab mir in dem Zuge BrowserID mal etwas genauer angeschaut. Ich bin wirklich extrem \u00fcberrascht mit wie wenig Arbeit es sich in z.B. WordPress einbauen l\u00e4sst.<\/p>\n\n\n\n

BrowserID<\/a> besteht eigentlich nur aus einem JS<\/abbr>-File,ein paar Zeilen JS<\/abbr>-Code:<\/p>\n\n\n

<script<\/span> src<\/span>=\"https:\/\/browserid.org\/include.js\"<\/span> type<\/span>=\"text\/javascript\"<\/span>><\/span><\/script<\/span>><\/span>\n<script<\/span> type<\/span>=\"text\/javascript\"<\/span>><\/span>\nnavigator.id.get(function<\/span>(assertion)<\/span> <\/span>{\n    if<\/span> (assertion) {\n        \/\/ This code will be invoked once the user has successfully<\/span>\n        \/\/ selected an email address they control to sign in with.<\/span>\n    } else<\/span> {\n        \/\/ something went wrong!  the user isn't logged in.<\/span>\n    }\n});\n<\/span><\/script<\/span>><\/span><\/code><\/span>Code-Sprache:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
und dem anschlie\u00dfenden Verifizieren der assertion<\/code>:<\/p>\n\n\n
$ curl -d \"assertion=&audience=https:\/\/mysite.com\"<\/span> \"https:\/\/browserid.org\/verify\"<\/span>\n{\n    \"status\"<\/span>: \"okay\"<\/span>,\n    \"email\"<\/span>: \"lloyd@example.com\"<\/span>,\n    \"audience\"<\/span>: \"https:\/\/mysite.com\"<\/span>,\n    \"expires\"<\/span>: 1308859352261<\/span>,\n    \"issuer\"<\/span>: \"browserid.org\"<\/span>\n}<\/code><\/span>Code-Sprache:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Um BrowserID in WordPress zu integrieren l\u00e4dt man also zuerst den JS<\/abbr>-Code in den Login Header:<\/p>\n\n\n
\/\/ add the BrowserID javascript-code to the header<\/span>\nadd_action('login_head'<\/span>, 'bi_add_js_header'<\/span>);\nfunction<\/span> bi_add_js_header<\/span>()<\/span> <\/span>{\n  echo<\/span> '<script src=\"https:\/\/browserid.org\/include.js\" type=\"text\/javascript\"><\/script>'<\/span>;\n  echo<\/span> '<script type=\"text\/javascript\">'<\/span>.\"\\n\"<\/span>;\n  echo<\/span> 'function browser_id_login() {\n    navigator.id.get(function(assertion) {\n      if (assertion) {\n        window.location=\"'<\/span> . get_site_url(null<\/span>, '\/'<\/span>) .'?browser_id_assertion=\" + assertion;\n      } else {\n        \/\/ do nothing!\n      }\n    })\n  };'<\/span>.\"\\n\"<\/span>;\n  echo<\/span> '<\/script>'<\/span>;\n}<\/code><\/span>Code-Sprache:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
und platziert den BrowserID-Button auf der Login-Seite:<\/p>\n\n\n
\/\/ add the login button\nadd_action('login_form', 'bi_add_button');\nfunction bi_add_button() {\n  echo '<p<\/span>><\/span><a<\/span> href<\/span>=\"#\"<\/span> onclick<\/span>=\"return browser_id_login();\"<\/span>><\/span><img<\/span> src<\/span>=\"https:\/\/browserid.org\/i\/sign_in_blue.png\"<\/span> style<\/span>=\"border: 0;\"<\/span> \/><\/span><\/a<\/span>><\/span><\/p<\/span>><\/span>';\n}<\/code><\/span>Code-Sprache:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Nach dem klick auf den Button \u00f6ffnet sich das Autorisierungs-Fenster von BrowserID und nach dem erfolgreichen Sign-In wird die gerade implementierte Methode navigator.id.get(function(assertion) {}<\/code> aufgerufen.<\/p>\n\n\n\n
\"BrowserID<\/figure><\/div>\n\n\n\n
Im n\u00e4chsten Schritt mu\u00df man die erhaltene assertion<\/code> \u00fcber BrowserID.org verifizieren. Da ich den notwendigen POST<\/code> nicht \u00fcber JavaScript absetzen will, leite ich einfach auf eine Seite weiter und \u00fcbergebe die erhaltene assertion<\/code> als GET-Paramater.<\/p>\n\n\n
if<\/span> (assertion) {\n  window<\/span>.location=\"' . get_site_url(null, '\/') .'?browser_id_assertion=\"<\/span> + assertion;\n}<\/code><\/span>Code-Sprache:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Jetzt kann der POST bequem \u00fcber WordPress abgesetzt werden.<\/p>\n\n\n
\/\/ the verification code<\/span>\nadd_action('parse_request'<\/span>, 'bi_verify_id'<\/span>);\nfunction<\/span> bi_verify_id<\/span>()<\/span> <\/span>{\n  global<\/span> $wp_query, $wp, $user;\n\n  if<\/span>( array_key_exists('browser_id_assertion'<\/span>, $wp->query_vars) ) {\n    \/\/ some settings for the post request<\/span>\n    $args = array<\/span>(\n      'method'<\/span> => 'POST'<\/span>,\n      'timeout'<\/span> => 30<\/span>,\n      'redirection'<\/span> => 0<\/span>,\n      'httpversion'<\/span> => '1.0'<\/span>,\n      'blocking'<\/span> => true<\/span>,\n      'headers'<\/span> => array<\/span>(),\n      'body'<\/span> => array<\/span>(\n        'assertion'<\/span> => $wp->query_vars['browser_id_assertion'<\/span>], \/\/ the assertion number we get from the js<\/span>\n        'audience'<\/span> => \"http:\/\/\"<\/span>.$_SERVER['HTTP_HOST'<\/span>] \/\/ the server host<\/span>\n      ),\n      'cookies'<\/span> => array<\/span>(),\n      'sslverify'<\/span> => 0<\/span>\n    );\n\n    \/\/ check the response<\/span>\n    $response = wp_remote_post(\"https:\/\/browserid.org\/verify\"<\/span>, $args);\n\n    if<\/span> (!is_wp_error($response)) {\n      $bi_response = json_decode($response['body'<\/span>], true<\/span>);\n\n      \/\/ if everything is ok, check if there is a user with this email address<\/span>\n      if<\/span> ($bi_response['status'<\/span>] == 'okay'<\/span>) {\n        $userdata = get_user_by('email'<\/span>, $bi_response['email'<\/span>]);\n        if<\/span> ($userdata) {\n          $user = new<\/span> WP_User($userdata->ID);\n          wp_set_current_user($userdata->ID, $userdata->user_login);\n          wp_set_auth_cookie($userdata->ID, $rememberme);\n          do_action('wp_login'<\/span>, $userdata->user_login);\n\n          wp_redirect(home_url());\n          exit<\/span>;\n        } else<\/span> {\n          \/\/ show error when there is no matching user<\/span>\n          echo<\/span> \"no user with email address '\"<\/span> . $bi_response['email'<\/span>] . \"'\"<\/span>; \n          exit<\/span>;\n        }\n      }\n    }\n    \n    \/\/ show error if something didn't work well<\/span>\n    echo<\/span> \"error logging in\"<\/span>; \n    exit<\/span>;\n  }\n}<\/code><\/span>Code-Sprache:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
Gibt es einen User mit der entsprechenden E-Mail – Adresse wird er eingeloggt, falls nicht, wird ein Fehler ausgegeben.<\/p>\n\n\n\n
Wenn euch das zu schnell ging und ich auf einige Details nicht gen\u00fcgend eingegangen bin, k\u00f6nnt ihr gerne fragen \ud83d\ude42<\/p>\n\n\n\n
Ich habe den kompletten Code \u00fcbrigens auch auf Github<\/a> hochgeladen… das ist einfacher als sich alles zusammen zu kopieren.<\/p>\n","protected":false},"excerpt":{"rendered":"
Ich schreibe gerade einen Artikel f\u00fcr das t3n Magazin \u00fcber aktuelle Sign-In-Mechanismen und hab mir in dem Zuge BrowserID mal etwas genauer angeschaut. Ich bin wirklich extrem \u00fcberrascht mit wie wenig Arbeit es sich in z.B. WordPress einbauen l\u00e4sst.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"webmentions_disabled_pings":false,"webmentions_disabled":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":""},"categories":[2],"tags":[949,5171,705,423,181,792,57],"class_list":{"0":"post-4102","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-web","7":"tag-browserid","8":"tag-fediblog","9":"tag-mozilla","10":"tag-openid","11":"tag-plugin","12":"tag-singlesignon","13":"tag-wordpress","14":"h-entry","15":"hentry"},"_links":{"self":[{"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/posts\/4102","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/comments?post=4102"}],"version-history":[{"count":0,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/posts\/4102\/revisions"}],"wp:attachment":[{"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/media?parent=4102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/categories?post=4102"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/tags?post=4102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Bei der Demo hab ich mir aus Zeitgr\u00fcnden ein wenig Code bei Marcel Bokhorst geliehen, dessen BrowserID-Plugin<\/a> wesentlich ausgereifter und vollst\u00e4ndiger ist als der kleine Demo-Code den ich hier zusammengest\u00fcckelt habe.<\/p>\n\n\n\n
Den ausf\u00fchrlichen Ablauf der Authentifizierung findet ihr auf Github<\/a>.<\/p>\n\n\n\n