【facebook】進階：OAuth code flow

Posted on | In , , ,

First at all

官方 : https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow

  • 手動建立的流程中，有分兩個方式取得 token
    1. 直接在要求 oauth 的授權 url 中 加入參數 response_type=token，但返回的 token 會夾帶在 fragment(hashtag) 中，可透過 js 取得(因為在 url 的解析中，無法直接取得 fragment 的參數)。
    2. 透過 oauth default 方法取得 code，把 code 送去交換取得 token

方法一 : 直接取得 token -> 驗證 token

  • URL 組成 : scheme://host:port/path?query#fragment
  • fragment : fragment 片段 網頁中可能會分為不同的片段，如果想訪問網頁後直接到達指定位置(tag)，可以在這部分設置
  1. https://www.facebook.com/v2.10/dialog/oauth?client_id={your_app_id}&response_type=token&redirect_uri={redirect_uri}
    • parameters
      • client_id
      • response_type = token
      • redirect_uri
    • response url : {redirect_uri}?#access_token={token}&expires_in={expires_in} : 注意 token 是放在 fragment 的字串中
      • php 透過 javascript 取得 fragment string : $fragment = "<script>document.write(window.location.hash);</script>";
  2. 驗證 :
    1. 取得 your_app_token : https://graph.facebook.com/oauth/access_token?client_id={your_app_id}&client_secret={your_app_secret}&grant_type=client_credentials
      • parameters
        • client_id
        • client_secret
        • grant_type=client_credentials
      • response json : {"access_token": {your_app_token}, "token_type": "bearer"}
    2. 驗證 : https://graph.facebook.com/debug_token?input_token={token}&access_token={app-token-or-admin-token}
      • parameters
        • input_token
        • access_token : 此為 上步驟中 respone 的 access_token
      • response : 請參考 附註:javascript pass value to php

先取得 code -> 使用 code 來取得 token -> 驗證 token

  1. https://www.facebook.com/v2.10/dialog/oauth?client_id={your_app_id}&redirect_uri={redirect_url}
    • parameters
      • client_id
      • redirect_uri
    • response url : {reditect_url}?code={code}#_=_
  2. https://graph.facebook.com/v2.10/oauth/access_token?client_id={your_app_id}&client_secret={your_app_secret}&redirect_uri={redirect_url}&code={code}
    • parameters
      • client_id
      • client_secret
      • redirect_uri : 在索取 code 時，使用的 redirect_uri，兩者必須相同
      • code : 步驟 1 中取得的 code
    • response json : { "access_token": {access-token}, "token_type": {type}, "expires_in": {seconds-til-expiration} }
  3. 驗證 :
    1. 取得 your_app_token : https://graph.facebook.com/oauth/access_token?client_id={your_app_id}&client_secret={your_app_secret}&grant_type=client_credentials
      • parameters
        • client_id
        • client_secret
        • grant_type=client_credentials
      • response json : {"access_token": {your_app_token}, "token_type": "bearer"}
    2. 驗證 : https://graph.facebook.com/debug_token?input_token={token}&access_token={app-token-or-admin-token}
      • parameters
        • input_token
        • access_token : 此為 上步驟中 respone 的 access_token
      • response : 請參考 https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow#checktoken

附註 : javascript pass value to php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script type="text/javascript">

var protocol = window.location.protocol;
var hostname = window.location.hostname;
var pathname = window.location.pathname; 
baseUrl = protocol+'//'+hostname+pathname;
// alert(baseUrl);

fragment = window.location.hash.substr(1);

if (fragment) {
    // alert(fragment);
    state = fragment.substr(fragment.indexOf('state='))
                  .split('&')[0]
                  .split('=')[1];
    // alert(state);
    access_token = fragment.substr(fragment.indexOf('access_token='))
                  .split('&')[0]
                  .split('=')[1];
    // alert(access_token);
    
    // alert("do it");
    location.href = baseUrl+"?state=" + state + '&access_token=' + access_token;
} 
else 
    exit();

</script>

<?php  
echo $_GET['access_token'];