[API] Facebook API開發紀錄

這次稍微寫一點Facebook Api的東西

其實一開始看覺得看不懂只是因為英文或是都是片段片段的東西

要自己完整組合起來才會比較了解!

關於申請App Id的部分就不贅述了



直接拿sample code來看

當然我也是參考 Facebook Developer與網路上的資源

(function(d)
{
  var js,
  id = 'facebook-jssdk',
  ref = d.getElementsByTagName('script')[0];
  if (d.getElementById(id))
  {
    return;
  }
  js = d.createElement('script');
  js.id = id;
  js.async = true;
  js.src = "//connect.facebook.net/en_US/all.js";
  ref.parentNode.insertBefore(js, ref);
}(document));

 上面這段是非同步載入FB JS SDK
通常這段很制式的寫法..
沒有載入當然跑下面的FB.init()就會出現ERROR
因為沒載入之前FB這個物件也沒有被定義!
或是一開始就用就將SDK在html header內載入也是OK的!

// 初始化FB物件
window.fbAsyncInit = function()
{
  FB.init(
  {
    appId      : ' 將你申請到的 APP ID放這 ',
    status     : true,  //確認使用者的登入狀況是否是最新的狀態
    xfbml      : true
  });
}
 初始或FB物件是一定要做
詳細參數問題可以自己連結過去看
基本上用上面的參數就夠用了

function FB_Login()
{
  FB.login(function(response)
  {
    if (response.authResponse)  //若有登入並取得使用者同意則進入這裡
    {
         //accessToken = response.authResponse.accessToken;   此處取得access token
         getUserInfo(); //自訂function : 取得使用者資訊
    }
    else
    {
      //若無取得權限則在瀏覽器console顯示出底下文字
      console.log('User cancelled login or did not fully authorize.');
    }
  },{scope: 'email,user_photos,user_videos,user_birthday,user_location'});

}
 上面function功能是用來確認使用者到底有沒有登入
入沒有登入會自動pop up出登入或取得權限的頁面(Login Dialog)
scope的地方為需要存取使用者的那些東西

function getUserInfo()
{
  FB.api('/me', function(response)
  {
console.log(response);
  });
}
 接下來是取得使用者資訊了
這個就需要用到Graph API的東西
詳細不多加介紹,可以自行上Facebool Developer看 XD
重點是在於FB.api('/me', function(response) {}
此function是用JS SDK去跟Graph API存取資料
其中的response物件其實就已經是使用者資訊的JSON陣列了!
用console.log(response)就可以看出端倪了!
當然是不建議前端這麼做
建議方法是取得access token後丟給後端PHP或其他程式
由Server端再去討資料才是比較安全的作法!
至於Access token怎麼取得?
其實在FB.login那裏就有註解了!
後端的部分就請自己努力! XD


留言

張貼留言

這個網誌中的熱門文章

Grafana K6

圖片
Grafana K6 最近工作需要做壓力測試, 由於 api 有做自定義的加密 在挑選壓力測試工具的時候就先想到了 k6 安裝 K6 mac: brew install k6. 其餘的可以參考這裡: Installation 使用 K6 撰寫 壓力測試腳本 基本的入門測試可以參考網路上其他大神寫的文章 或是參考這裡: Running K6 這裡主要介紹, 如果要透過額外寫 Node.js 的邏輯上去該怎麼處理。 因為 K6 底層是由 Go 撰寫而成的，js 只是對應的介面， 所以要加入 Node.js 邏輯要額外透過 Webpack 處理！ 步驟 0 : 先建立對應的目錄 mkdir . / example - project && \ cd "$_" && \ npm init - y 步驟 1 : 安裝會用到的工具 npm install -- save - dev \ webpack \ webpack - cli \ @types / k6 \ babel - loader \ @babel / core \ @babel / preset - env \ core - js 步驟 2 : 設定 webpack.config.js const path = require ( 'path' ) ; const webpack = require ( 'webpack' ) ; // 這是新增的，要引入 webpack。 module . exports = { mode : 'production' , entry : { login : './src/login.test.js' , signup : './src/signup.test.js' , } , output : { path : path . resolve ( __dirname , 'dist' ) , // eslint-disable-line li
閱讀完整內容

[翻譯] 介紹現代網路負載平衡與代理伺服器

圖片
原文(Source): https://blog.envoyproxy.io/introduction-to-modern-network-load-balancing-and-proxying-a57f6ff80236 什麼是網路負載平衡 (network load balancing) 與 代理伺服器的代理行為 (proxying)? 維基百科是這樣定義負載平衡的 > 負載平衡藉由工作量分配到多台運算資源, 例如: 主機, 主機叢集, 網路連結, CPU,  硬碟等. > 負載平衡盡量最佳化資源的使用, 最大化每個最大化每個資源的吞吐量(生產能力), 最小化反應時間, 避免單一資源工作量過重 > 使用多個資源來當負載平衡來提升可靠與高可用而不是單一個資源 > 負載平衡總是使用獨立的軟體或硬體, 例如獨立的 multilayer switch, 或是 DNS主機的程式 上面的定義用於各資訊領域的各方面, 不單單只有網路而已. 作業系統使用負載平衡在實體處理器去分配運算任務, 容器編排服務像是K8S使用負載平衡在不同的主機叢集中去分配任務, 而網路負載平衡器則是將網路上進來的任務分配給可用的後端主機們. 剩下的文章主要都是講解關於網路負載平衡. 圖1 圖1展示了從應用層來看網路負載平衡. 許多的用戶端(Client)透過只需要向 load balancer 請求, load balancer就會將這些request, 也就是上述提到的任務分配給可用的後端服務. Load balancer位於Client 與後端之間執行幾個重要的任務: 服務發現 (Service discovery) 後端的服務在系統的哪裡, 他們的IP(位置)是什麼? (也就是load balancer該如何與後端主機溝通) 服務的狀態檢查 (Health checking) 現在的服務是否是可接受請求的 負載平衡 (Load Balancing) 該用什麼樣的演算法去平均將request分配給可用的服務 在分散式系統使用負載平衡主要有幾個好處: 主機抽象 (Naming abstraction): 每個client 不需要知道每個後端服務在哪, 只需要利用預先定義好的機制向負載平衡器發出請求
閱讀完整內容

Linux 事件驅動筆記

圖片
 I/O Model Synchronous I/O Blocking Non-Blocking I/O multiplexing Asynchronous I/O Blocking 跟 Non-Blocking 差異只差在 選擇 ! Blocking 以 read (read from a file descriptor) 來舉例, 從 user space 發出 read (kernel提供的 system call) 之後， 這時候就會切換到 kernel mode，kernel 會依據給定的 file descriptor 去判斷， 這個 fd 來自哪裡，接下來等待資料，因為 kernel space 跟 user space 本身就是 isolated， 這樣在 user space 的 process crash，也不會影響到 kernel space， 所以 kernel space 拿到資料之後，因為 isolated 的關係，要將資料複製到 user space 去。 在這個過程中，user space 的 read 基本上就是一直在等結果。 read 如果失敗會有 err number 可以注意 EAGAIN EWOULDBLOCK Non-blocking 就是類似一直來問 read 目前的狀態， kernel 回到 user space 可能裝置還沒準備好，或是要等之後的操作才會生效， 這時候就會發出 EAGAIN 的錯誤，EAGAIN 不代表是真的錯誤，再試一次可能就可以， I/O Multiplexing (這個邏輯跟數位邏輯的 mux 很像，故取做 IO multiplexing) multiplexing => 有多個輸入(input), 可以透過一個 select 去決定輸出 假設 Linux 要等待很多種資料, 就可以用這個概念，去監控哪個 fd 有資料， 有資料的話就挑選出來! 所以 I/O Multiplexing 本質還是 blocking，只是可以一次監聽多個 所以像網頁伺服器要監聽很多個 incoming request，就可以用這種方式處理 select 單個 process 可以被監聽的 fd 數量有限制 (跟這個 /proc/sys/fs/file-max 有關) 因為是一個一個詢問(輪詢)，所以監聽越多 f
閱讀完整內容