此篇日期為 2013.01.25 , 以下為已有 domain 的情況下.
1. 申請帳號, 如果沒有的話先申請一個(google, yahoo)
2. 申請好後開始建立 project
A. yahoo :
a. 連到 http://developer.yahoo.com
b. 點右上角你的名字, 會有個下拉選單, 選 My Projects
c. 按 Create Project
d. 接下來, 對照一下照片, 1~8 如下說明 :
1. 應用程式名稱 : ex : pluzme
2. 你的應用程式類型 : ex: Web-based (網頁)
3. 描述 : ex: 代購網站
4. 你的網址 : http://www.pluzme.com
5. 有 favicon 的話就寫一下 : ex : http://design.pluzme.com/images/favicon.ico
6. http://www.pluzme.com
7. 通常選第一個(第一個有包含第二個)
8. 打勾同意
9. 送...出..
e. 接下來, 注意圖中紅色, 藍色與紫色的框起來的地方
紅色 : 等下程式會用的到資訊, 也不要外流
藍色 : 必須驗證你的 domain, 這個很重要也一定要做
紫色 : 要使用功能, 像取得 user 的聯絡人, 資料, 可讀可寫 (自己選擇一下, 選好後下方按 save)
接下來處理藍色的地方 : 請按 Verify Domain
2. 將這個 html 放到網站根目錄, 要可以連的到, 且要是上面的網址的路徑, 要一模一樣
PS: 這裡我是放在真的可以連的到的 domain 才行, 本機改 host 也不行
藍色 : 必須驗證你的 domain, 這個很重要也一定要做
紫色 : 要使用功能, 像取得 user 的聯絡人, 資料, 可讀可寫 (自己選擇一下, 選好後下方按 save)
接下來處理藍色的地方 : 請按 Verify Domain
如果內容沒有 domain, 請按右上方的 Add Domain
如果有 domain, 請選擇你使用的 Domain 並按下 Domain 右邊的 Verify
點了之後會跳出一個畫面(如上圖)
1. 產生一個 html 檔案, 名稱與上面的一樣, 點 file name 可以直接覆製, 如果 server 是 linux 可以用 touch xxxxxxxxxxxxx--.html2. 將這個 html 放到網站根目錄, 要可以連的到, 且要是上面的網址的路徑, 要一模一樣
PS: 這裡我是放在真的可以連的到的 domain 才行, 本機改 host 也不行
3. 都設定好後, 就按 Verify Domain 吧, 然後會看到, 成功的畫面, 此時回到剛那裡會看到你的 domain 右邊有個 綠色的勾勾
如果你跟我一樣做到這裡, 代表你已經成功了, 接下來就剩下程式的地方, 基本上不管你是用什麼語言, 上面的步驟是一樣的, 實作的語言就因人而異囉.
程式其實還真的很簡單, 請先到這裡 http://code.google.com/p/socialauth/ 看一下介紹, 要看唷, 看完後再下載 library 使用, google code 上已經有很完整的範例跟教學, 我這裡也來中文化一下 :
進到首頁看了一些說明後, 下方的這張圖表我覺得很重要, 而這個套件也幫你解決了中間那一段的流程
轉貼來源 : http://code.google.com/p/socialauth/
簡單的說明就是 : 當 user 發 request 要使用 yahoo 登入到你的統統時, server端會先取得要認證的 yahoo 連結, 然後 redirect 過去, 當使用者同意後, yahoo 會 call back 回你的 server 並代一些參數給你, 此時你可以透過這些參數, 再去詢問 yahoo 並取得資料, 有了資料後就看自己想要做什麼
我們來點一下 wiki, 會看到這裡提供了許多範例 : spring, struts1, servlet, seam...等,
首先有個要注意的是, socialauth 這個套件需要一個 property 檔案, 內容可以參考http://code.google.com/p/socialauth/wiki/SampleProperties
記得把 api.login.yahoo.com.consumer_key, api.login.yahoo.com.consumer_secret 換成剛申請好的 consumer_key 與 consumer_secret
接下來直接進入程式
以 struts2 為例, 當 yahoo 點選 yahoo 登入時, 我假設是連到 http://xxx/yl.do
@Action(value = "yl", results = { @Result(type = "redirect", name = "redirect", location = "${returnUrl}") })
public String yl() throws Exception {
SocialAuthManager manager = null;
if (sessionMap.containsKey("socialAuthManager")) { // sessionMap 是 struts2 存取 session 用的
manager = (SocialAuthManager) sessionMap.get("socialAuthManager"); // 如果有就從 session 抓
} else {
InputStream in = IndexYahooAction.class.getClassLoader().getResourceAsStream("oauth_consumer.properties"); // 沒有的話就撈設定檔進來
SocialAuthConfig conf = SocialAuthConfig.getDefault();
conf.load(in);
manager = new SocialAuthManager();
manager.setSocialAuthConfig(conf);
sessionMap.put("socialAuthManager", manager);
}
String tempReturnUrl = "http://www.pluzme.com/yo.do"; // 設定當 success 時, yahoo 要 call back 的 url
returnUrl = manager.getAuthenticationUrl("yahoo", tempReturnUrl);
log.info("returnUrl : " + returnUrl);
return "redirect"; // 然後幫 user redirect 過去
}
導過去後, 會看到像這樣的長像
這時候, 當按下同意後, yahoo 會導回去剛設定的 call back url : http://www.pluzme.com/yo.do
@Action(value = "yo", results = { @Result(type = "redirect", name = "success", location = "${returnUrl}") })
public String yo() throws Exception {
SocialAuthManager manager = null;
if (sessionMap.containsKey("socialAuthManager")) {
manager = (SocialAuthManager) sessionMap.get("socialAuthManager"); // 從 session 抓取剛的 object
}
if (manager != null) {
List<Contact> contactsList = new ArrayList<Contact>();
Profile profile = null;
try {
Map<String, String> paramsMap = new HashMap<String, String>();
for (Map.Entry<String, String[]> entry : request.getParameterMap()
.entrySet()) {
String key = entry.getKey();
String values[] = entry.getValue();
log.info(key + ", " + Arrays.toString(values));
paramsMap.put(key, values[0].toString()); // Only 1 value is
}
AuthProvider provider = manager.connect(paramsMap); // 把參數傳進去, 主要是用 oauth_token 取得資訊
profile = provider.getUserProfile(); // 個人資料
log.info(ToStringBuilder.reflectionToString(profile));
contactsList = provider.getContactList();
if (contactsList != null && contactsList.size() > 0) {
for (Contact p : contactsList) {
if (StringUtils.isEmpty(p.getFirstName()) && StringUtils.isEmpty(p.getLastName())) {
p.setFirstName(p.getDisplayName());
}
//log.info(ToStringBuilder.reflectionToString(p)); // contacts list
}
}
} catch (Exception e) {
log.error(e.getMessage(), e);
} finally {
sessionMap.remove("socialAuthManager");
}
}
// 後續自己處理了...
returnUrl = "http://www.pluzme.com/";
return SUCCESS;
}
大概就是這樣囉, 下回再分享 google 申請時要注意的地方, 但程式的地方只需修改一個部份, 其它好像都一樣, 也許可以寫個 util 包起來之類的.
沒有留言:
張貼留言