BBAuth
-
Upload
joseph-chiang -
Category
Technology
-
view
5.340 -
download
1
description
Transcript of BBAuth
![Page 1: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/1.jpg)
BBAuth讓使用者用 Yahoo! 的帳號密碼登入你的網站
josephj / 蔣定宇
![Page 2: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/2.jpg)
Hi! 我是 josephj(啊嗚)
Yahoo Developer Network
Evangelist
跑步環島 2008.5.18,屏東楓港http://josephj.com
YDN 創新科技推廣工程師
![Page 3: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/3.jpg)
大綱
• BBAuth 可做什麼?
• 實作 BBAuth 登入
• 用 BBAuth 取得 Yahoo! 的個人資料
![Page 4: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/4.jpg)
1. BBAuth 可做什麼?
![Page 5: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/5.jpg)
許多網站有自己的會員登入系統
![Page 6: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/6.jpg)
這很重要,會員資料對每個網站都是寶
![Page 7: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/7.jpg)
但對使用者來說,每到一個新網站都得註冊一組新的帳號密碼,十分不方便且容易搞亂。
![Page 8: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/8.jpg)
Yahoo!奇摩是目前台灣最多人用的入口網站、幾乎每個人都有 Yahoo!奇摩的登入帳號與密碼。
![Page 9: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/9.jpg)
如果讓網站的使用者用與 Yahoo!奇摩相同的帳號密碼做登入,對他們一定會很方便吧!?
![Page 10: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/10.jpg)
BBAuth 的主要功能就是讓網站經營者做這件事!
![Page 11: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/11.jpg)
疑問 1:我還可以有我自己的會員資料嘛?
![Page 12: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/12.jpg)
當然!BBAuth 只負責登入的部份、不管使用者資料!(BBAuth 的全名為 Browser Based Authentication、瀏覽器認證機制)
![Page 13: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/13.jpg)
疑問 2:已經有會員系統的,可以整合 BBAuth 登入嗎?
![Page 14: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/14.jpg)
可以!不管新舊網站、你只要在會員資料表多開幾個欄位即可。
![Page 15: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/15.jpg)
疑問 3:整合會不會很困難?
![Page 16: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/16.jpg)
一點也不難,網站開發者只要半天,就可以從不瞭解 BBAuth 到做完。
![Page 17: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/17.jpg)
除了登入,還可以存取使用者的 Yahoo! 電子郵件、生活+、通訊錄等資料。把 Yahoo!奇摩與你的網站做更緊密的結合!
![Page 18: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/18.jpg)
2. 實作 BBAuth 登入
![Page 19: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/19.jpg)
先來看看實際使用 BBAuth 的網站!
![Page 20: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/20.jpg)
仍有傳統的登入方式
這應該是是 BBAuth 登入吧?點點看吧!
![Page 21: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/21.jpg)
被導到了 Yahoo! 登入頁
![Page 22: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/22.jpg)
接著是授權的聲明
Text
你的 Yahoo! 電子郵件、生活+ 的資料可被剛剛的網站存取
![Page 23: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/23.jpg)
按下同意後被導回此頁(故意在這邊顯示參數內容)
這些是從 Yahoo! 所取得的參數userhash 就是用來判斷使用者是誰的欄位網站開發者必須將此欄位存下來用來判斷是新使用者或已註冊的使用者
![Page 24: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/24.jpg)
未註冊使用者被導入到註冊頁
有隱藏欄位,註冊完後一併存入使用者資料表中:<input type=”hidden” name=”userhash” value=”iBoJu95yM0EbnNotzoefo0g-”>
![Page 25: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/25.jpg)
你的網站
Yahoo! 登入頁
同意條款
導回特定頁
登入完成
以 userhash 對應使用者資料表判斷使用者使否有註冊過
導入註冊頁
未註冊
註冊成功
將 userhash 存入使用者資料表
已註冊
使用者登入流程
![Page 26: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/26.jpg)
瞭解流程了,接著就來實作吧!
1. 申請 AppID
2. 登入 URL
3. 寫入資料庫
![Page 27: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/27.jpg)
AppID 是 Yahoo! 應用程式 ID,開發者若要使用 Yahoo! 的任何 Open API 皆必須申請。BBAuth 當然也不例外
![Page 28: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/28.jpg)
http://developer.yahoo.com/wsregapp/
這個欄位很重要!是使用者在 Yahoo! 登入完畢後會導回的網址!
你希望從使用者那取得的 Yahoo! 資料,這個範例只需要用到第一個。你可以看你網站的需求自行決定
BBAuth 專門用的欄位
![Page 29: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/29.jpg)
需要做 Domain 檢查,確定此網站是你管理的
請在你的網站上放一個 ydnp94Uy.html 的檔案檔案內容如下:
![Page 30: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/30.jpg)
建立所需檔案
按下 Check Domain 後就可以取得 Result: Pass
這樣子才能點選 continue 的按鈕
![Page 31: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/31.jpg)
終於取得 AppID 與 Share Secret,請記錄下來
![Page 32: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/32.jpg)
再來必須組合出讓使用者登入的 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]
![Page 33: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/33.jpg)
這個一定要設為 1才會取得 userhash
![Page 34: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/34.jpg)
若使用者登入成功,就會導到你在申請 AppID 時填的 BBAuth Success URL,你必須在此時檢查使用者資料表來判斷此使用者是否註冊過。
![Page 35: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/35.jpg)
建議增加的資料表欄位
• userhash Yahoo! 的 Unique ID
• token14 天的生命週期,若網站有需要存取電子郵件或生活+ 時,則建議用資料表記錄起來。
• token_timestamp可以用此欄位判斷是否超過 14 天,若超過才需要更新 token
![Page 36: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/36.jpg)
![Page 37: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/37.jpg)
使用者介面的改進
一般傳統登入的註冊頁 用 Yahoo! 登入的註冊頁除了帳號外、還需要密碼
登入的帳號與密碼都用 Yahoo! 的這裡的帳號是指使用者在這個網站的代號
記得要另外存 userhash 及 token
我的建議是傳統與 Yahoo! 登入並存,若判斷是 Yahoo! 登入就把密碼相關的表單欄位給移除掉
![Page 38: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/38.jpg)
3. 以 BBAuth 取得使用者個人資料
![Page 39: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/39.jpg)
目前跟台灣使用者比較相關的是電子郵件、生活+、通訊錄
在申請 AppID 的第一頁可選取你要存取那些 Yahoo! 使用者資料
![Page 40: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/40.jpg)
這邊要以生活+ 為範例:取得使用者個人的「商家紀錄分類」
![Page 41: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/41.jpg)
存取之前,你必須用先前的 Token、向 Yahoo! 取得此人的 WSSID 與 Cookies。壽命為 1 小時。
https://api.login.yahoo.com/WSLogin/V1/wspwtoken_login? appid=[AppID]&token=[Token]&ts=[TimeStamp]&sig=[Signature]
![Page 42: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/42.jpg)
回傳的範例
需將 Cookie 與 WSSID 從 XML 中 Parse 出來
![Page 43: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/43.jpg)
發出 Request 與解析 XML 的函式
http://developer.yahoo.com/auth/authcalls.html#retrieving
![Page 44: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/44.jpg)
接著要向生活+ 取得資料
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
![Page 45: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/45.jpg)
成功回傳的範例
![Page 46: BBAuth](https://reader033.fdocuments.in/reader033/viewer/2022061116/5465f36ab4af9f533f8b531b/html5/thumbnails/46.jpg)
相關資源:
• 一步步實作生活+ API:http://josephj.com/prototype/lifestyle/#Biz.listBuzzBizs
• 生活+ API 文件:http://tw.developer.yahoo.com/lifestyle_api.html
• BBAuth 完整說明:http://developer.yahoo.com/auth/