三步驟學會 Persona!!

2012.12.01 07:34PM
2119
是三步驟學會 Persona!!這篇文章的首圖

香蕉人又登場了,今天要來教大家使用 Persona 囉!這是是什麼? 能吃嗎?! 是新口味的香蕉嗎?! 有在發落 Mozilla Taiwan 部落格的捧油應該不陌生啦,新朋友別緊張啦~ Persona 的詳細介紹可以看 http://blog.mozilla.com.tw/posts/1061/安全可靠-persona-網路身份認證系統-beta-版首度釋出!簡單來說,Persona 是一種安全,簡單又快速的登入方式,全新體驗保障使用者的隱私哦!

Persona 除了使用者登入方便以外,香蕉人發現開發起來也是輕鬆寫意啊,只要簡簡單單的三個步驟,就可以在你的網站上或是web app上加入Persona。馬上就來看第一步:

Step 1.

因為 Persona 還未內建在任何的 Browser 裡,所以請在你的網站加上~ Persona 的Library https://login.persona.org/include.js

Step 2.

請在你的網站上加上兩個按鈕,分別是「登入」及「登出」的按鈕

其中在「登入」的按鈕中加上 onclick 的事件:

var signinLink = document.getElementById('signin'); if (signinLink) { signinLink.onclick = function(evt) { // Requests a signed identity assertion from the user. navigator.id.request({ siteName: '網站名稱', siteLogo: '/logo.png', termsOfService: '/tos.html', privacyPolicy: '/privacy.html', returnTo: '/welcome.html', oncancel: function() { alert('我害羞,不要登入!'); } }); }; }

另外「登出」的按鈕也加上下面的事件

var signoutLink = document.getElementById('signout'); if (signoutLink) { signoutLink.onclick = function(event) { event.preventDefault(); navigator.id.logout(); }; }; Step 3.

最後我們要在網站放一隻「看門狗」,來確定使用者是不是成功登入了。

var user_email = ; navigator.id.watch({ loggedInUser: user_email, //註1 onlogin: function(assertion) { // 使用者已經登入囉~ 你可以做些事情 // 1. 將assertion 送至 Persona檢驗並建立 Session // 2. 更新你的UI }, onlogout: function() { // 使用者已經登出囉,你可以做些事情: // 清除session囉~ } });

哈哈~~~三步驟 Persona 已經完成了嗎!? 沒錯,只要經過這三個步驟,你已經在 Persona 的舒適圈裡了。但是,香蕉人還有些事想說,傳說中的 One more thing 來了,使用者登入後,最重要的就是取得使用者的資料啦~ 在 Persona 裡唯二需要使用者填入的資料就是 Email 跟 密碼,當然也只有在使用者的同意(登入)下,網站才有辦法取得 Email了!那揪~~~竟要怎麼取得使用者的 E-mail 呢?! 這就要看看「看門狗」這邊的奧妙了,在 onlogin 這裡我們會取得一組驗證碼 assertion,這就是我們取得使用者的 E-mail 的關鍵!!香蕉人用 php 當範例吧,在 onlogin 裡我們透過 ajax 將 assertion 送至 verify.php 裡程式碼如下:

$audience = 'http://example.com'; //輸入你的網站 $postdata = 'assertion=' . urlencode($assertion) . '&audience=' . urlencode($audience); $ch = curl_init(); curl_setopt($ch,CURLOPT_URL,'https://verifier.login.persona.org/verify'); //輸入 persona 的認證網址 curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch,CURLOPT_POST,true); curl_setopt($ch,CURLOPT_POSTFIELDS, $postdata); $result = curl_exec($ch); curl_close($ch); /* 將取得的JSON解密吧~ $result_info = json_decode($result); $result_info['email'] // 使用者 email $result_info['status'] // 認證狀態,如果拿到 okay 的話就成功啦!! 這裡可以加上建立 Session的程式碼哦~ $_SESSION['loging'] = $result_info['status']; $_SESSION['email'] = $result_info['email']; */ echo $result; // 回傳 json 格式

嘿嘿,就這樣完成透過 Persona 登入並取得使用者的Email資料啦~~ 是不是輕鬆寫意,非常簡單呢?如果想知道更完整、更新的 Persona API 的資訊, MDN上面通通有囉~

最後,香蕉人再告訴大家一個小祕技,在 MDN 上 Persona 還貼心的放上 「登入」按鈕的 CSS 檔案,供開發者下載,Mozilla 是不是揪甘心的呢~~

註1.
在這裡特別說明 Step 3 程式碼中的 loggedInUser: user_email 這段參數,這裡的 email 可以是 null,但如果你已經有取得 user的 email 時,就可以把他填入, Persona 會自動幫你確認這個 email 是否有被 Persona 認證過,原文在此

掌握最新 Firefox, Firefox OS 相關訊息

加入 Mozilla Taiwan 臉書粉絲團 
加入 Mozilla Taiwan 的 G+ 
瀏覽 Mozilla Taiwan 部落格 
官網 mozilla.com.tw 

回應 3

3 則回應