Xamarin- 與Windows Azure Mobile Servie 整合進行身份驗證.

2013-09-02

2296
0

在八月份北中南3場的跨平台App開發日中, 有一個demo是Xamarin 與Windows Azure Mobile Service整合. 微軟的Windows Azure Mobile Service 對行動裝置跨平台的支援真的是不遺餘力. 它為底下平台提供了SDK：

若不在上述支援平台的解決方案, 亦可以使用REST API. MSDN的參考資訊如下：

Windows Azure 行動服務 REST API 參考

當然, Xamrin 標榜用C#及整合Visual Studio 進行開發, 在雲端服務上怎麼能缺席呢. 微軟特別針對Xamarin撰寫一個免費的元件, 讓我們可以在專案中參考, 很方便的針對Windows Azure Mobile Service 相關的應用進行開發. 元件的說明及下載網頁如下：

http://components.xamarin.com/view/azure-mobile-services/

在這篇文章中, 我們將依據GitHub上的範例進行修改, 加入身份驗證的功能. 讓開發人員可以透過簡單的程式碼, 進行Microsoft Account, Google, Facebook以及Twitter等主流社交網站的登入. 這項功能可以分為兩個部份說明, 分別是在Windows Azure管理界面中的設定, 以及用戶端程式碼的部份.

Windows Azreu 管理界面：

要進行身份驗證, 必須取得目標平台的Client ID及Secret, 下方的連結可以連結到各平台的申請頁面, 依照說明建立應用程式, 即可取得Client ID及Secret

取得ID及Secret後, 登入Windows Azure的管理界面並選取Mobile Service (若您還沒建立行動服務, 可以參考官方的說明, 先建立Windows Azure Mobile Service), 接著切換到IDENTITY. 將您先前申請的Client ID及Secret填入. 以下圖為例, 因為我並沒有使用Twitter的習慣, 因此只申請Microsoft Account, Google以及Facebook.

做完上述動作後, Windows Azure的部份便已設定完成, 接下來就是用戶端的部份了.

行動裝置用戶端：

1. 開啟或建立專案後, 在專案下的Components節點按下滑鼠右鍵, 點擊"Get More Components”

2. 此時會帶出Xamarin 元件列表的視窗, 以下圖為例, 列表中的第一個便是我們要的Azure Mobile Service 元件, 點選後可以加入至專案.

3. 開啟專案中的AppDelegate.cs, 引用Mobile Service的名稱空間如下：

using Microsoft.WindowsAzure.MobileServices;

4. 在AppDelegate.cs 宣告一個靜態的Mobile Service Clieent 物件, 供後續的登入頁面使用.

 //宣告MobileSerciceClient物件
		public static readonly  MobileServiceClient MobileService =
			new MobileServiceClient ("<Application URL>", "<Application Key>");

上述的Application URL以及Application KEY 可以在Azure Portal 中取得, 如下圖所示：

5. 在LoginView.cs中新增以下程式進行登入

 //登入事件
        partial void performLogin(NSObject sender)
        {
            AppDelegate.MobileService.LoginAsync(this, MobileServiceAuthenticationProvider.Facebook)
                .ContinueWith(t =>
                {
                    BeginInvokeOnMainThread(() =>
                    {
                        MobileServiceUser user = t.Result;
                        var alert = new UIAlertView("Welcome!", "登入成功, 你的Token是: " + user.UserId, null, "OK");
                        alert.Show();
                    });
                });
        }

在上述的程式碼中, 我們呼叫AppDelegate中的MobileServiceClient 物件實體, 並呼叫它的LoginAsync方法, 此覆寫方法接收2個參數, 第1個是目前所在的頁面, 所以我們傳入this物件. 第2個參數是您想要實作驗證的平台提供者. 以此例是用Facebook, 當然也可以選擇Microsoft Account, Google或Twitter. 若登入成功後, 我們便可以取得user ID及Token, 搭配各平台的SDK進行後續的開發.

6. 範例執行結果如下：

在此範例中, 還有用到iOS平台的Storyborad物件, 後續會再針對Storyborad做詳細的介紹.

範例程式下載:Lab02-MobileService.zip

回首頁