因为 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) 就好了解了:
// 組合授權的 URLvar authUrl = new Windows.Foundation.Uri([ "https://www.facebook.com/dialog/oauth?", "client_id=<你的應用程式 ID>", "&redirect_uri=", encodeURIComponent('https://www.facebook.com/connect/login_success.html'), "&response_type=token", "&display=popup", "&scope=<權限列表,以 , 隔開>"].join(''));
// 回呼 URLvar callbackUrl = new Windows.Foundation.Uri("https://www.facebook.com/connect/login_success.html");
// 呼叫 WebAuthenticationBroker// 因為回傳的是 Promise 物件,
所以可以接著 done 函式執行Windows.Security.Authentication.Web.WebAuthenticationBroker.authenticateAsync( Windows.Security.Authentication.Web.WebAuthenticationOptions.none, authUrl, callbackUrl).done(
function(result) { // 完成授權的動作,檢查授權是否成功 if (result.response
Status === Windows.Security.Authentication.Web.WebAuthenticationStatus.success) { // 成功授權,從 result.responseData 中取得 access_token 以及 expires_in 的值 } else { // 使用者並不同意授權 } }, function(error) { // 處理發生錯誤的狀況 });
值得注意的是,在 authUrl 中的 display=popup 参数一定要设定,才会符合 Metro Style App 的画面,于是乎你就可以做出上面图示的效果了!
同场加映 C# 版本:
using Windows.Foundation;using Windows.Security.Authentication.Web;
// 組合授權的 URLvar authUrl = new Uri(string.Format( "https://www.facebook.com/dialog/oauth?client_id={0}&redirect_uri={1}&response_type=token&display=popup&scope={2}", "<你應用程式的 ID>", Uri.EscapeDataString("https://www.facebook.com/connect/login_success.html"), "<權限列表,以 , 隔開>"));
// 回呼 URLvar callbackUrl = new Uri("https://www.facebook.com/connect/login_success.html");
// 呼叫 WebAuthenticationBrokervar result = await WebAuthenticationBroker.authenticateAsync( WebAuthenticationOptions.none, authUrl, callbackUrl);
// 完成授權的動作,檢查授權是否成功if (result.ResponseStatus == WebAuthenticationStatus.Success) { // 成功授權,從 result.ResponseData 中取得 access_token 以及 expires_in 的值} else { // 處理發生錯誤的狀況}
以及 C++/CX 版本:
#include <sstream>
using namespace std;
using namespace Windows::Foundation;using namespace Windows::Security::Authentication::Web;
// 組合授權的 URLwstringstream rawUri;rawUri << L"https://www.facebook.com/dialog/oauth?" << L"client_id=" << <應用程式 ID> << L"&redirect_uri=https%3A%2F%2Fwww.facebook.com%2Fconnect%2Flogin_success.html" << L"&response_type=token" << L"&display=popup" << L"&scope=" << <權限列表,以 , 隔開>;auto authUrl = ref new Uri(ref new String(rawUri.str().c_str()));
// 回呼 URLauto callbackUrl = ref new Uri("https://www.facebook.com/connect/login_success.html");
// 以非同步形式呼叫 WebAuthenticationBrokercreate_task(WebAuthenticationBroker::AuthenticateAsync( WebAuthenticationOptions::
None, startURI, endURI)) .then([this](WebAuthenticationResult^ result){ switch (result->ResponseStatus) { case WebAuthenticationStatus::Success: // 使用者授權成功,從 result->ResponseData 中取得 access_token 以及 expires_in break; ... }}