這篇文章其實是在講網站利用Facebook OAuth 來 Login!
但前言很長大家可以跳過
前言與廢話 : (想跳過請按此)
=======================================
因為最近跟主管討論 + 聊天深深覺得 javascript 雖然強大
但卻因為資訊曝露在外顯的很不安全，真正要做到側邊防漏還是要在server端進行
如果邏輯是寫在client，就變成要怎麼被人玩都可以
用這個 Fiddler
就可以抓到你網頁web request、web response 的所有資訊
http header、傳送的XML、JSON格式與內容、Cookies 值 (client cookies) 都看的很清楚啊
被人家知道傳遞的規則之後再裝個 jQuery injector 就可以做 jQuery injection
(chrome 套件)
https://chrome.google.com/webstore/detail/jquery-injector/indebdooekgjhkncmgbkeopjebofdoid
裝完之後點一下按鈕，網站就被置入 jQuery library
然後就可以直接去 console 下 jQuery 改code 了
主管說，有人用這招瞬間買了n 隻紅米手機
我有稍微試了一下的確很強大.... (我沒有玩人家網站)
所以我就開始想把以前的 Facebook Javascript SDK 改成用 Server Code 的方式
本人不才是用 .net，所以稍微看了一下下面這個
教學跟文件在這邊
http://facebooksdk.net/docs/web/getting-started/
其實是很簡單
但是我就是不想用......因為.Net SDK 只能用在 .Net
俺學東西一向都是為了未來著想 XDDD
能跨平台的東西最喜歡學了，所以之前才用 Javascript SDK 寫
=======================================
正式開始~~~
我這一次要用的是 OAuth 的方式
寫法非常之簡單，但前置作業當然還是需要
ex : 建立一個 APP 之類的動作
不知道怎麼建的請看之前寫的這篇 網站利用 Facebook 帳號登入 (Javascript SDK)
然後有關 OAuth Login 的說明這邊寫得很清楚，基本上照做沒什麼問題
https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow/
但我下面還是練習一下來混字數好了
下面是步驟 (請你跟我這樣做) :
1. 建立 APP，取得 App ID 與 App Secret 兩組 ID
(如何建立請看 網站利用 Facebook 帳號登入 (Javascript SDK) 前半段)
2. 利用 https://www.facebook.com/dialog/oauth 這個網址取得授權
必須要使用的參數有：
client_id：剛剛產生應用程式的 APP ID
redirect_uri：取得授權完之後要返回的連結
非必要的參數可以自己看文件，但比較重要的就是
scope：要取得的權限類型
可以取得什麼樣的權限可以來這邊查
https://developers.facebook.com/docs/facebook-login/permissions/
所以最後我組完的 URL 會長這樣 (為了方便閱讀所以斷行了)
https://www.facebook.com/dialog/oauth?
client_id=568390199919780&
scope=email,user_birthday&
redirect_uri=http://localhost:50051/Default.aspx
像上面那個例子 scope 就是取得 user的 email + 生日
要注意的是 redirect_uri 參數的 URL 必須要跟你APP裡面設定的一樣喔
你可以直接把 URL 貼到瀏覽器去試試，會得到這樣結果
使用者按下"確定"之後就會導頁到你剛剛設定的參數 redirect_uri 的位置
然後返回的網址後面會附帶一個 code 參數，請把值接下來之後把他收好~
像下面這樣，但因為 code 太長了所以用 ... 代替
http://localhost:50051/Default.aspx?code=..............
3. 取得完授權後接下來就要來取得萬能的 access_token了，有了access_token 你呼風喚雨囉~
利用下面這個網址取得 access_token，因為網址很長所以一樣斷行了
https://graph.facebook.com/oauth/access_token?
client_id=568390199919780&
redirect_uri=http://localhost:50051/Default.aspx&
client_secret=e7ea32e022b14c05a5cdfabb64d23ac3&
code=請放你剛剛接下來的 code 參數值
必須要使用的參數有：
client_id：你的 APP ID
redirect_uri：返回的 URL
client_secret：你的應用程式密鑰 App Secret
code：你剛剛接下來的 code 參數
把連結貼到網址列就會在頁面上看到一個字串，其中包含兩個參數，如下
access_token=CAAIE8qf1xKQBAPJvZB2RqycMnHXn8AAO6Y21k4yV2ZAj9cnJQ1EW4fyBAZBk4LLl8TBtuZAWbKBitVum1VnyUkdt4lmOFOZAbytBOxpR6DF1zVU4HPW35AmCs0WIJdSIhsfCokaQ88Soqb6DEGst6ZBmn8Rba4pOOgSY31etYgu5BvwfvrYTyw
expires=5182901
其中 access_token 非常重要，請把他寫在 session 之類的地方，以便可重複使用
expires 的話是指這個 access_token 可以存活的秒數
4. 這個 access_token 要怎麼用呢?
先講取得登入的使用者資料好了，下面這個網址後面參數填你抓到的 access_token 試試
https://graph.facebook.com/me?access_token=
網址貼到瀏覽器上就會得到一串 JSON 囉
如下圖 :
id 就是 Facebook 唯一的 UID，如果是用Facebook登入你的網站的話
這個大概就是 key 值了吧
然後剛剛提到 access_token 非常重要，因為你要做任何事都必須有他
可以做什麼事請看這邊 Graph API Examples
你要取得 User 的各種資料，把 access_token 帶到網址列後面就會返回 JSON了
上面的 Basic Objects 沒事可以自己玩一玩
基本上也是帶入....帳號名稱、UID 之類的值就會取得 JSON
抓回來剖一剖就好了
比起 Javascript SDK 我覺得更簡單更安全 (因為都在 server side 進行嘛)
綜合以上簡單的步驟來把他程式化好了
sorry 俺用的是 C#，應該也沒差~反正原理都一樣嘛
首先網頁上有一個登入的按鈕，點下去就到 Facebook 取得授權
要求的授權有 email + birthday，還有預設公開的資料
protected void Button1_Click(object sender, EventArgs e)
{
Response.Redirect("https://www.facebook.com/dialog/oauth?client_id=568390199919780&scope=email,user_birthday&redirect_uri=http://localhost:50051/Default.aspx");
}
因為是在 Server 轉頁，所以很安全
再來，因為之後要一直取得目的頁面的返回 JSON 字串
所以先寫個發送 web request + 接收 web response 的 function 吧
因為待會要一直呼叫
public string GetWebRequest(string URL) {
WebRequest MyRequest = WebRequest.Create(URL);
MyRequest.Method = "GET";
WebResponse MyResponse = MyRequest.GetResponse();
StreamReader sr = new StreamReader(MyResponse.GetResponseStream());
string result = sr.ReadToEnd();
sr.Close();
MyResponse.Close();
return result;
}
完成了之後
因為按鈕 Button1 點下去會去Facebook取得授權，如果已經授權過就導回 redirect_uri
所以在你設定的 redirect_uri 頁面接收等下要取得的 code 值，以便待會取得 access_token
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Net;
using System.IO;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string code;
if (Request.QueryString["code"] != null)
{
//接回來的code
code = Request.QueryString["code"].ToString();
//APP ID
string client_id = "568390199919780";
//redirect_uri
string redirect_uri = "http://localhost:50051/Default.aspx";
//APP 密鑰
string client_secret = "e7ea32e022b14c05a5cdfabb64d23ac3";
string URL = "https://graph.facebook.com/oauth/access_token?client_id=" + client_id + "&redirect_uri=" + redirect_uri + "&client_secret=" + client_secret + "&code=" + code;
//取得頁面返回值
//此時頁面上返回 access_token=demo&expires=demo 字串
string result = GetWebRequest(URL);
//稍微剖一下就取得 access_token
string token = result.Replace("access_token=", "").Split('&')[0];
//取得 access_token後，透過https://graph.facebook.com/me 抓個人資料
//頁面返回 JSON
string JSON = GetWebRequest("https://graph.facebook.com/me?access_token=" + token);
//使用 JSON.Net 動態剖 JSON
dynamic json = JValue.Parse(JSON);
//取得 Facebook UID
string UID = json.id;
Response.Write(UID);
}
}
}
既然都取得 UID 跟其它資料了，那網站的登入也就不是什麼大問題了
總之，OAuth 非常的簡單~~
End
留言列表
CSS、Responsive Web Design (2)