在 Xamarin.Forms 加入身份認證功能

在這段文章，將會說明如何透過 Azure Mobile App 內建提供的功能，進行使用者身份驗證能力，在這裡，將會說明如何整合 Azure Active Directory 與 Facebook 兩種身分驗證功能，讓具有通過身份驗證的使用者，才能夠存取後端資料庫。

建立 Azure Active Directory 與整合驗證

在這裡，將會說明如何自行建立一個 Azure Active Directory 服務，並且將其將入到 Azure Mobile App 認證服務內。

建立新的 Azure Active Directory

1. 請在瀏覽器中，輸入這個網址： https://manage.windowsazure.com/ 進入到 Azure 的舊管理網頁內。
2. 在最左方工具列中，往下捲動，將會看到 Actvie Directory 這個選項，使用滑鼠點選這個項目
   
3. 在左下方，請點選 + NEW 連結，接著點選 APP SERVICES > ACTIVE DIRECTORY > DIRECTORY >CUSTOM CREATE 準備開始要建立一個新的 Azure Active Directory 服務。
4. 當 Add directory 對話窗出現的時候，
   • 在 DIRECTORY 欄位下，選擇 Create new directory
   • 在 Name 欄位下，輸入 DoggyMobileAAD
   • 在 DOMAIN NAME 欄位下，輸入 DMAAD
   • 在 COUNTRY OF REGION 欄位下，選擇 Taiwan
   • 最後，請點選右下角的打勾圖示，完成建立一個目錄的動作。
   

設定剛剛建立的 Azure Active Directory

1. 請選擇剛剛建立的目錄服務
   
2. 當進入到 doggymobileaad 頁面時候，請在上方的功能列中，點選 APPLICATION，接著點選下方中間的+ ADD 連結`，準備要進行新增一個應用程式到 Azure Active Directory 內。
   
3. 接著，螢幕出現一個對話窗，請點選 Add an application my organization is developing 這個選項，使用滑鼠點選這個項目
   
4. 當出現 ADD APPLICATION 對話視窗的時候，
   • 請在 NAME 欄位下，輸入 DoggyMobileBE
   • 確認底下有選擇 WEB APPLICATION AND/OR WEB API
     
   • 請點選該對護窗右下方的往右箭頭，進行第二頁的設定動作。
5. 請另外開啟一個網頁，進入到 Azure 儀表板內，點選網頁左上角 Microsoft Azure 文字，進入到 Microsoft Azure 儀表板，接著點選 doggymobilebe 行動 App 圖示，進入到 doggymobilebe 行動 App設定刀鋒頁面。請在 DoggyMobileBE 的頁面下，找到 URL 欄位，當游標移動到這個 URL 欄位值上時候，該值的右方會有一個黑色、表示複製的圖示出現，點選這個圖示，以便複製 DoggyMobileBE 這個服務的代表 URL；當然，您也可以手動選取這個URL值，按下 Ctrl+C 來進行複製。
   
6. 回到 ADD APPLICATION 對話視窗，現在依該是在第二頁次下的 App properties，請分別在 SIGN-ON URL 與 APP ID URI 這兩個欄位內，輸入剛剛複製下來的 URL。
   
7. 當 Active Directory 的應用程式建立完成後，請點選 CONFIGURE 標籤頁次，接著，請捲動到最下方，將會看到 ssingle sign-on 標籤，在下方有 REPLY URL 標題，請在該標題右方輸入https://doggymobilebe.azurewebsites.net/.auth/login/aad/callback。也就是把您的 Azure Mobile App 行動應用程式的網址，後面加上/.auth/login/aad/callback

   請注意，需要輸入 https 通訊協定

   
8. 最後，點選下方的 SAVE 儲存按鈕
9. 請在這個頁面上，複製 CLIENT ID 這個欄位值
   
10. 在最下方按鈕列中，請點選 VIEW ENDPOINTS 這個按鈕，當出現 App Endpoints 對話窗時候，複製FEDERATION METADATA DOCUMENT 這個欄位的值；複製完成後，請點選右下角的打勾圖示，以關閉此對話窗。
    
11. 使用新的瀏覽器標籤頁次，開啟剛剛複製下來的 FEDERATION METADATA DOCUMENT 網址，這是剛剛複製下來的網址 : https://login.microsoftonline.com/a65ae84f-756b-4451-aeba-90dc8051554e/federationmetadata/2007-06/federationmetadata.xml
    從網頁顯示的內容(請參考下圖)，可以看到最上方，可以找到 entityID 這個欄位後面有個 URL，這裡看到的是 https://sts.windows.net/a65ae84f-756b-4451-aeba-90dc8051554e/ 請將這個 URL 複製下來。
    

加入 Azure AD 到 doggymobilebe 行動 App

1. 請回到 Azure 儀表板，接著點選 doggymobilebe 行動 App 圖示，進入到 doggymobilebe 行動 App 設定刀鋒頁面。
2. 在 設定 刀鋒視窗內，找到 驗證/授權 項目，點選這個項目。
   
3. 在 驗證/授權 刀鋒視窗內，在 App Service 驗證 標題下方，點選 開啟
   • 在 當要求未經驗證時所要採取的動作 標題下方，選擇 允許要求 (無動作)
   • 在 驗證提供者 標題下方，點選 Azure Active Directory
4. 在 Azure Active Directory 設定 刀鋒視窗內，在 管理模式 標題旁，點選 進階
   • 將上面步驟複製下來的 CLIENT ID 值，複製到標題 用戶端識別碼 文字輸入盒內
   • 將上面步驟複製下來的 entityID 值，複製到標題 簽發者 URL 文字輸入盒內
   • 請點選下方的 確定 按鈕
   
5. 當回到 驗證/授權 刀鋒視窗下，請點選上方的 儲存 按鈕

使用 Xamarin.Forms 應用程式進行測試

Azure Mobile App 後端服務專案

1. 請根據 Azure Mobile App 後端服務建立說明 文章中，最後下載的 Azure Mobile App 後端服務專案， 使用 Visual Studio 2015，開啟 Azure Mobile App 前端專案 DoggyMobileBE.sln
2. 在方案總管內，展開專案 DoggyMobileBEService > Controllers，接著打開 TodoItemController.cs檔案。
3. 在 TodoItemController 類別前，加入 [Authorize] 屬性，如下面所示

[Authorize]
public class TodoItemController : TableController<TodoItem>

1. 在專案節點 DoggyMobileBEService 使用滑鼠右擊，選擇 發行 項目，再度發行這個專案到後端

Azure Mobile App 前端專案

核心PCL 專案

1. 請根據 Azure Mobile App 後端服務建立說明 文章中，最後下載的 Azure Mobile App 前端專案， 使用 Visual Studio 2015，開啟 Azure Mobile App 前端專案 DoggyMobileBE.sln
2. 請立即在 Android 模擬器下執行，您會發現到，現在無法查詢到任何資料，因為，您的 App 需要加入讓使用者可以通過身分驗證的功能，而後才可以存取後端的資料。
3. 在 核心PCL 內，打開 App.cs 檔案，加入底下 using 敘述

using System.Threading.Tasks;

1. 在 App.cs 檔案內，加入一個 IAuthenticate 介面定義在 App 類別前

public interface IAuthenticate
{
    Task<bool> Authenticate();
}

1. 在 App 類別內，加入底下靜態成員與初始化介面的數

public static IAuthenticate Authenticator { get; private set; }

public static void Init(IAuthenticate authenticator)
{
    Authenticator = authenticator;
}

1. 在核心PCL內，開啟 TodoList.xaml 檔案，在 buttonsPanel 版面配置內的存在 Button 按鈕控制項後方，加入底下 XAML 宣告

<Button x:Name="loginButton" Text="Sign-in" MinimumHeightRequest="30" 
    Clicked="loginButton_Clicked"/>

1. 開啟 TodoList.xaml.cs 檔案，加入底下的欄位定義到 TodoList 類別內

// Track whether the user has authenticated. 
bool authenticated = false;

1. 將 OnAppearing 方法，使用底下程式碼來替換，這樣將會使得當使用者要更新資料，但又沒有經過身分驗證的時候，會自動跳出登入畫面，要求使用者來登入，進行身分驗證。

protected override async void OnAppearing()
{
    base.OnAppearing();

    // Refresh items only when authenticated.
    if (authenticated == true)
    {
        // Set syncItems to true in order to synchronize the data 
        // on startup when running in offline mode.
        await RefreshItems(true, syncItems: false);

        // Hide the Sign-in button.
        this.loginButton.IsVisible = false;
    }
}

1. 加入底下按鈕事件程式碼

async void loginButton_Clicked(object sender, EventArgs e)
{
    if (App.Authenticator != null)
        authenticated = await App.Authenticator.Authenticate();

    // Set syncItems to true to synchronize the data on startup when offline is enabled.
    if (authenticated == true)
        await RefreshItems(true, syncItems: false);
}

DoggyMobileBE.Droid 專案

1. 在 DoggyMobileBE.Droid 專案內，打開 MainActivity.cs 檔案，加入底下 using 敘述。

using Microsoft.WindowsAzure.MobileServices;
using System.Threading.Tasks;

1. 修改 MainActivity 這個類別，需要建置 `IAuthenticate 介面，如下範例程式碼

public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsApplicationActivity, IAuthenticate

1. 將底下程式碼，加入到 MainActivity 類別內。

// Define a authenticated user.
private MobileServiceUser user;

public async Task<bool> Authenticate()
{
    var success = false;
    var message = string.Empty;
    try
    {
        // Sign in with Facebook login using a server-managed flow.
        user = await TodoItemManager.DefaultManager.CurrentClient.LoginAsync(this,
            MobileServiceAuthenticationProvider.WindowsAzureActiveDirectory);
        if (user != null)
        {
            message = string.Format("you are now signed-in as {0}.",
                user.UserId);
            success = true;
        }
    }
    catch (Exception ex)
    {
        message = ex.Message;
    }

    // Display the success or failure message.
    AlertDialog.Builder builder = new AlertDialog.Builder(this);
    builder.SetMessage(message);
    builder.SetTitle("Sign-in result");
    builder.Create().Show();

    return success;
}

1. 在 MainActivity 內的 OnCreate 方法內，在 LoadApplication() 方法前，加入底下程式碼

// Initialize the authenticator before loading the app.
App.Init((IAuthenticate)this);

1. 滑鼠右擊專案節點 DoggyMobileBE.Droid 選擇 設定為起始專案，並且按下 F5 開始執行，執行後的畫面如下圖，在右上方有個 Sign-in按鈕，點選這個按鈕，準備進行身分驗證。
   
2. 請在登入頁面輸入 Azure Active Directory 內存在的使用者，因為還沒有定義任何其他使用者，因此，使用您的 Azure 登入 ID 來進行登入。
   
   • 當輸入完成電子郵件後，此時，會自動切換到官方的 Microsoft account 身分驗證頁面，請繼續輸入密碼，並且點選 Sign in 按鈕。
   
   • 當輸入的帳號與密碼都正確無誤，您會取得該使用者的 sid 資訊
   
   • 最後，就可以看到後端資料了
   

DoggyMobileBE.iOS 專案

1. 在 DoggyMobileBE.iOS 專案內，打開 AppDelegate.cs 檔案，加入底下 using 敘述。

using Microsoft.WindowsAzure.MobileServices;
using System.Threading.Tasks;

1. 在 AppDelegate 類別定義中，加入需要建置 IAuthenticate 介面，如下程式碼

public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate, IAuthenticate

3.在 AppDelegate 類別內，加入底下的欄位與介面方法的定義

// Define a authenticated user.
private MobileServiceUser user;

public async Task<bool> Authenticate()
{
    var success = false;
    var message = string.Empty;
    try
    {
        // Sign in with Facebook login using a server-managed flow.
        if (user == null)
        {
            user = await TodoItemManager.DefaultManager.CurrentClient
                .LoginAsync(UIApplication.SharedApplication.KeyWindow.RootViewController,
                MobileServiceAuthenticationProvider.WindowsAzureActiveDirectory);
            if (user != null)
            {
                message = string.Format("You are now signed-in as {0}.", user.UserId);
                success = true;                        
            }
        }        
    }
    catch (Exception ex)
    {
       message = ex.Message;
    }

    // Display the success or failure message.
    UIAlertView avAlert = new UIAlertView("Sign-in result", message, null, "OK", null);
    avAlert.Show();         

    return success;
}

1. 在 FinishedLaunching 方法內，將底下程式碼加入到 `LoadApplication(); 前

App.Init(this);

1. 滑鼠右擊專案節點 DoggyMobileBE.iOS 選擇 設定為起始專案，接著按下 F5 開始執行這個 iOS 應用程式，在右上方有個 Sign-in按鈕，點選這個按鈕，準備進行身分驗證。
   
2. 請在登入頁面輸入 Azure Active Directory 內存在的使用者，因為還沒有定義任何其他使用者，因此，使用您的 Azure 登入 ID 來進行登入。
   
   • 當輸入完成電子郵件後，此時，會自動切換到官方的 Microsoft account 身分驗證頁面，請繼續輸入密碼，並且點選 Sign in 按鈕。
   
   • 當輸入的帳號與密碼都正確無誤，您會取得該使用者的 sid 資訊
   
   • 最後，就可以看到後端資料了