BBAuth讓使用者用 Yahoo! 的帳號密碼登入你的網站

josephj / 蔣定宇

Hi! 我是 josephj（啊嗚）

Yahoo Developer Network

Evangelist

跑步環島 2008.5.18，屏東楓港http://josephj.com

josephj6802@gmail.com

YDN 創新科技推廣工程師

大綱

• BBAuth 可做什麼？

• 實作 BBAuth 登入

• 用 BBAuth 取得 Yahoo! 的個人資料

1. BBAuth 可做什麼？

許多網站有自己的會員登入系統

這很重要，會員資料對每個網站都是寶

但對使用者來說，每到一個新網站都得註冊一組新的帳號密碼，十分不方便且容易搞亂。

Yahoo!奇摩是目前台灣最多人用的入口網站、幾乎每個人都有 Yahoo!奇摩的登入帳號與密碼。

如果讓網站的使用者用與 Yahoo!奇摩相同的帳號密碼做登入，對他們一定會很方便吧！？

BBAuth 的主要功能就是讓網站經營者做這件事！

疑問 1：我還可以有我自己的會員資料嘛？

當然！BBAuth 只負責登入的部份、不管使用者資料！（BBAuth 的全名為 Browser Based Authentication、瀏覽器認證機制）

疑問 2：已經有會員系統的，可以整合 BBAuth 登入嗎？

可以！不管新舊網站、你只要在會員資料表多開幾個欄位即可。

疑問 3：整合會不會很困難？

一點也不難，網站開發者只要半天，就可以從不瞭解 BBAuth 到做完。

除了登入，還可以存取使用者的 Yahoo! 電子郵件、生活+、通訊錄等資料。把 Yahoo!奇摩與你的網站做更緊密的結合！

2. 實作 BBAuth 登入

先來看看實際使用 BBAuth 的網站！

仍有傳統的登入方式

這應該是是 BBAuth 登入吧？點點看吧！

被導到了 Yahoo! 登入頁

接著是授權的聲明

Text

你的 Yahoo! 電子郵件、生活+ 的資料可被剛剛的網站存取

按下同意後被導回此頁（故意在這邊顯示參數內容）

這些是從 Yahoo! 所取得的參數userhash 就是用來判斷使用者是誰的欄位網站開發者必須將此欄位存下來用來判斷是新使用者或已註冊的使用者

未註冊使用者被導入到註冊頁

有隱藏欄位，註冊完後一併存入使用者資料表中：<input type=”hidden” name=”userhash” value=”iBoJu95yM0EbnNotzoefo0g-”>

你的網站

Yahoo! 登入頁

同意條款

導回特定頁

登入完成

以 userhash 對應使用者資料表判斷使用者使否有註冊過

導入註冊頁

未註冊

註冊成功

將 userhash 存入使用者資料表

已註冊

使用者登入流程

瞭解流程了，接著就來實作吧！

1. 申請 AppID

2. 登入 URL

3. 寫入資料庫

AppID 是 Yahoo! 應用程式 ID，開發者若要使用 Yahoo! 的任何 Open API 皆必須申請。BBAuth 當然也不例外

http://developer.yahoo.com/wsregapp/

這個欄位很重要！是使用者在 Yahoo! 登入完畢後會導回的網址！

你希望從使用者那取得的 Yahoo! 資料，這個範例只需要用到第一個。你可以看你網站的需求自行決定

BBAuth 專門用的欄位

需要做 Domain 檢查，確定此網站是你管理的

請在你的網站上放一個 ydnp94Uy.html 的檔案檔案內容如下：

建立所需檔案

按下 Check Domain 後就可以取得 Result: Pass

這樣子才能點選 continue 的按鈕

終於取得 AppID 與 Share Secret，請記錄下來

再來必須組合出讓使用者登入的 URL，會使用到的幾個元素：1. 目前的時間（TimeStamp）2. 剛申請到的 AppID3. 剛申請到的 Shared Secrethttps://api.login.yahoo.com/WSLogin/V1/wslogin? appid=[AppID]&.intl=tw&send_userhash=1&ts=[TimeStamp]&sig=[Signature]

這個一定要設為 1才會取得 userhash

若使用者登入成功，就會導到你在申請 AppID 時填的 BBAuth Success URL，你必須在此時檢查使用者資料表來判斷此使用者是否註冊過。

建議增加的資料表欄位

• userhash Yahoo! 的 Unique ID

• token14 天的生命週期，若網站有需要存取電子郵件或生活+ 時，則建議用資料表記錄起來。

• token_timestamp可以用此欄位判斷是否超過 14 天，若超過才需要更新 token

使用者介面的改進

一般傳統登入的註冊頁 用 Yahoo! 登入的註冊頁除了帳號外、還需要密碼

登入的帳號與密碼都用 Yahoo! 的這裡的帳號是指使用者在這個網站的代號

記得要另外存 userhash 及 token

我的建議是傳統與 Yahoo! 登入並存，若判斷是 Yahoo! 登入就把密碼相關的表單欄位給移除掉

3. 以 BBAuth 取得使用者個人資料

目前跟台灣使用者比較相關的是電子郵件、生活+、通訊錄

在申請 AppID 的第一頁可選取你要存取那些 Yahoo! 使用者資料

這邊要以生活+ 為範例：取得使用者個人的「商家紀錄分類」

存取之前，你必須用先前的 Token、向 Yahoo! 取得此人的 WSSID 與 Cookies。壽命為 1 小時。

https://api.login.yahoo.com/WSLogin/V1/wspwtoken_login? appid=[AppID]&token=[Token]&ts=[TimeStamp]&sig=[Signature]

回傳的範例

需將 Cookie 與 WSSID 從 XML 中 Parse 出來

發出 Request 與解析 XML 的函式

http://developer.yahoo.com/auth/authcalls.html#retrieving

接著要向生活+ 取得資料

http://tw.developer.yahoo.com/lifestyle_api.html

生活+ API 網址 http://tw.lifestyle.yahooapis.com/v0.1/

取得評論的方法 User.listBookmarks

https://tw.lifestyle.yahooapis.com?User.listBookmarks& appid=[AppID]&WSSID=[WSSID]

1. 組出 URL

$ch = curl_init();curl_setopt( $ch, CURLOPT_URL, $URL);curl_setopt( $ch, CURLOPT_HTTPHEADER, array("Cookie: $Cookie"));curl_setopt( $ch, CURLOPT_RETURNTRANSFER, 1 );$result = curl_exec( $ch );

2. 以 cURL 發出 header 帶有 Cookie 的 Request

成功回傳的範例

相關資源：

• 一步步實作生活+ API：http://josephj.com/prototype/lifestyle/#Biz.listBuzzBizs

• 生活+ API 文件：http://tw.developer.yahoo.com/lifestyle_api.html

• BBAuth 完整說明：http://developer.yahoo.com/auth/