Metro Style App: 使用 WebAuthenticationBroker 做 Facebook 帳號驗證


因為 Facebook 的流行,現在很多開發人員都會運用 Facebook 帳號作為應用程式的身份驗證,在 WinRT 中有一個很好用的一組 API: WebAuthenticationBroker,它提供了一個架構,讓應用程式很容易就能完成 OAuth 的驗證機制。過去要在應用程式中完成 OAuth 驗證,總是會很麻煩地在應用程式或網頁瀏覽器之間切換 (因為網站登入及授權須在網頁中完成) ,容易造成使用者的混淆,這組 API 讓整個驗證的過程皆在應用程式的對話盒中完成,可以讓使用者留在應用程式中完成一切的動作。


在 Metro Style App 中使用 WebAuthenticationBroker

以 Facebook 為例

參考 Facebook 的開發文件,整個驗證的工作可以歸納成幾件事情:

  1. 註冊你的應用程式,取得一個應用程式的身份,得到一個「應用程式 ID」
  2. 視你應用程式的需要,組合成一個 URL,接著讓使用者透過這個 URL 來授權你的應用程式 (使用者須登入 facebook)
  3. 完成授權,取得 access_token 以便呼叫 facebook APIs。(當然要處理授權失敗的狀況)
這些動作要使用 WebAuthenticationBroker 來完成便非常簡單,直接來看程式碼 (JavaScript) 就好瞭解了:

值得注意的是,在 authUrl 中的 display=popup 參數一定要設定,才會符合 Metro Style App 的畫面,於是乎你就可以做出上面圖示的效果了!

同場加映 C# 版本:

以及 C++/CX 版本:

Comments (0)

Skip to main content