這篇文章其實是在講網站利用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,所以稍微看了一下下面這個

Facebook SDK for .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 貼到瀏覽器去試試,會得到這樣結果

Clipboard02  

 

使用者按下"確定"之後就會導頁到你剛剛設定的參數 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 值了吧

1389170172-35539902  

然後剛剛提到 access_token 非常重要,因為你要做任何事都必須有他

可以做什麼事請看這邊  Graph API Examples

你要取得 User 的各種資料,把 access_token 帶到網址列後面就會返回 JSON了

Clipboard02

 

上面的 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 

 

 

 

 

 

arrow
arrow
    全站熱搜

    小雕 發表在 痞客邦 留言(3) 人氣()