共用方式為

將驗證新增至 Xamarin Forms 應用程式

  • 發行項

概觀

本主題說明如何從用戶端應用程式驗證 App Service 行動應用程式的使用者。 在本教學課程中，您將使用 App Service 支援的識別提供者，將驗證新增至 Xamarin.Forms 快速入門專案。 由行動應用程式成功驗證並授權之後，就會顯示使用者識別碼值，而您也將可以存取受限制的資料庫資料。

必要條件

為了讓本教學課程產生最佳結果，建議您先完成 建立 Xamarin.Forms 應用程式教學課程。 完成本教學課程之後，您將會有一個多平台 TodoList 應用程式的 Xamarin.Forms 專案。

如果您不要使用下載的快速入門伺服器專案，必須將驗證擴充套件新增至您的專案。 如需伺服器擴充套件的詳細資訊，請參閱使用 Azure Mobile Apps 的 .NET 後端伺服器 SDK。

註冊應用程式進行驗證，並設定應用程式服務

首先，您必須在身分識別提供者網站中註冊您的應用程式，然後在 Mobile Apps 後端中設定提供者產生的認證。

  1. 依照提供者特定的指示設定您偏好的身分識別提供者：

  2. 針對您要在應用程式中支援的每個提供者重複上述步驟。

將您的應用程式新增至允許的外部重新導向 URL

安全的驗證會要求您為應用程式定義新的 URL 配置。 這讓驗證系統能夠在驗證程序完成之後，重新導向回到您的應用程式。 我們會在這整個教學課程中使用 URL 配置 appname。 不過，您可以使用任何您選擇的 URL 結構描述。 它對於您的行動應用程式而言應該是唯一的。 在伺服器端啟用重新導向：

  1. 在 Azure 入口網站 中，選取您的 App Service。

  2. 按一下 [驗證/授權] 功能表選項。

  3. 在 [允許的外部重新導向 URL] 中，輸入 url_scheme_of_your_app://easyauth.callback。 此字串中的 url_scheme_of_your_app 是您行動應用程式的 URL 配置。 它必須遵循通訊協定的標準 URL 規格 (只使用字母和數字，並以字母為開頭)。 請記下您選擇的字串，因為您將需要在數個位置中使用該 URL 配置來調整您的行動應用程式程式碼。

  4. 按一下 [確定]。

  5. 按一下 [儲存]。

限制只有通過驗證的使用者具有權限

根據預設，可以匿名方式叫用 Mobile Apps 後端中的 API。 接下來，您必須限制只有經過驗證的用戶端才有存取權。

  • Node.js 後端 (透過 Azure 入口網站)：

    在您的 Mobile Apps 設定中，按一下 [ 簡單資料表] ，然後選取您的資料表。 按一下 [變更權限]，選取所有權限的 [僅驗證存取]，然後按一下 [儲存]。

  • .NET 後端 (C#)：

    在伺服器專案中，流覽至控制器>TodoItemController .cs。 將 [Authorize] 屬性加入 TodoItemController 類別，如下所示。 若要限制只有特定方法才能存取，也可以將此屬性套用至這些方法，而不是類別。 發佈伺服器專案。

      [Authorize]
  public class TodoItemController : TableController<TodoItem>

  • Node.js 後端 (透過 Node.js 程式碼) ：

    如需要求資料表存取驗證，請將下行加入 Node.js 伺服器指令碼：

      table.access = 'authenticated';

    如需詳細資訊，請參閱 做法：存取資料表所需的驗證。 若要了解如何從您的網站下載快速入門程式碼專案，請參閱 做法：使用 Git 下載 Node.js 後端快速入門程式碼專案。

將驗證加入可攜式類別庫中

Mobile Apps 會使用 MobileServiceClient 的 LoginAsync 擴充方法，透過 App Service 驗證將使用者登入。 這個範例使用伺服器管理的驗證流程，在應用程式中顯示提供者的登入介面。 如需詳細資訊，請參閱 伺服器管理的驗證。 若要在實際執行應用程式中提供更好的使用者體驗，您應該考慮改用用戶端管理的驗證。

為了驗證 Xamarin Forms 專案，請在應用程式的可攜式類別庫中定義 IAuthenticate 介面。 然後，將 [登入] 按鈕新增至可攜式類別庫中定義的使用者介面，讓您按一下來開始驗證。 驗證成功後，將會從行動應用程式後端載入資料。

為應用程式支援的每個平台實作 IAuthenticate 介面。

  1. 在 Visual Studio 或 Xamarin Studio 中，從名稱中具有可攜性的可移植性的專案開啟 app.config （可移植類別庫專案），然後加入下列 using 語句：

     ```csharp
 using System.Threading.Tasks;
 ```

  2. 在 App.cs 中，在 App 類別定義之前緊接著加入下列 IAuthenticate 介面定義。

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

  3. 將下列靜態成員新增至 App 類別，以使用平台特定實作來初始化介面。

     ```csharp
 public static IAuthenticate Authenticator { get; private set; }

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

  4. 從可攜式類別庫專案中開啟 TodoList.xaml，在 buttonsPanel 配置項目中，將下列 Button 項目新增至現有按鈕後面︰

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

    此按鈕會向行動應用程式後端觸發伺服器管理的驗證。

  5. 從可攜式類別庫專案中開啟 TodoList.xaml.cs，然後將下列欄位加入至 TodoList 類別︰

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

  6. 使用下列程式碼取代 OnAppearing 方法：

     ```csharp
 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;
     }
 }
 ```

    此程式碼可確保只有在您通過驗證之後，才會從服務重新整理資料。

  7. 將下列有關 Clicked 事件的處理常式新增至 TodoList 類別︰

     ```csharp
 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);
 }
 ```

  8. 儲存變更，並建置可攜式類別庫專案，以驗證沒有錯誤。

將驗證加入 Android 應用程式中

本節說明如何在 Android 應用程式專案中實作 IAuthenticate 介面。 如果您不要支援 Android 裝置，請略過這一節。

  1. 在 Visual Studio 或 Xamarin Studio 中，以滑鼠右鍵按一下 droid 專案，然後按一下 [設定為啟始專案]。

  2. 按下 F5 在偵錯工具中啟動專案，然後確認在應用程式啟動後，發生狀態代碼 401 (未經授權) 的未處理例外狀況。 產生 401 代碼是因為只有獲授權的使用者才能存取後端。

  3. 開啟 Android 專案中的 MainActivity.cs，然後加入下列 using 陳述式：

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

  4. 更新 MainActivity 類別來實作 IAuthenticate 介面，如下所示︰

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

  5. 更新 MainActivity 類別，新增 IAuthenticate 介面所需的 MobileServiceUser 欄位和 Authenticate 方法，如下所示︰

     ```csharp
 // Define an 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.Facebook, "{url_scheme_of_your_app}");
         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;
 }

 public override void OnResume()
 {
     base.OnResume();
     Xamarin.Essentials.Platform.OnResume();
 }
 ```

    如果您使用 Facebook 以外的識別提供者，請為 MobileServiceAuthenticationProvider選擇不同的值。

  6. 藉由新增下列 <application> 元素內部的 XML，更新 AndroidManifest.xml 檔案：

    <activity android:name="com.microsoft.windowsazure.mobileservices.authentication.RedirectUrlActivity" android:launchMode="singleTop" android:noHistory="true">
  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="{url_scheme_of_your_app}" android:host="easyauth.callback" />
  </intent-filter>
</activity>

    將 {url_scheme_of_your_app} 取代為您的 URL 配置。

  7. 在 MainActivity 類別的 OnCreate 方法中，在呼叫 LoadApplication() 之前新增下列程式碼：

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

    此程式碼可確保在應用程式載入之前初始化驗證器。

  8. 重新建置應用程式，執行它，然後以您選擇的驗證提供者登入，並確認您能夠以已驗證的使用者身分存取資料表。

疑難排解

應用程式因 Java.Lang.NoSuchMethodError: No static method startActivity 而當機

在某些情況下，支援套件中的衝突在 Visual studio 中僅顯示為警告，但應用程式在執行階段會因此例外狀況而當機。 在此情況下，您必須確定您專案中所參考的所有支援套件都具有相同版本。 Azure Mobile Apps NuGet 套件 具有 Android 平台的 Xamarin.Android.Support.CustomTabs 相依性，因此若您的專案使用較新的支援套件，您必須直接安裝具有必要版本的此套件以避免發生衝突。

將驗證加入 iOS 應用程式中

本節說明如何在 iOS 應用程式專案中實作 IAuthenticate 介面。 如果您不要支援 iOS 裝置，請略過這一節。

  1. 在 Visual Studio 或 Xamarin Studio 中，以滑鼠右鍵按一下 iOS 專案，然後按一下 [設定為啟始專案]。

  2. 按下 F5 在偵錯工具中啟動專案，然後確認在應用程式啟動後，發生狀態代碼 401 (未經授權) 的未處理例外狀況。 產生 401 回應是因為只有獲授權的使用者才能存取後端。

  3. 開啟 iOS 專案中的 AppDelegate.cs，然後加入下列 using 陳述式：

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

  4. 更新 AppDelegate 類別來實作 IAuthenticate 介面，如下所示︰

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

  5. 更新 AppDelegate 類別，新增 IAuthenticate 介面所需的 MobileServiceUser 欄位和 Authenticate 方法，如下所示︰

     ```csharp
 // Define an 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.Facebook, "{url_scheme_of_your_app}");
             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.
     UIAlertController avAlert = UIAlertController.Create("Sign-in result", message, UIAlertControllerStyle.Alert);
     avAlert.AddAction(UIAlertAction.Create("OK", UIAlertActionStyle.Default, null));
     UIApplication.SharedApplication.KeyWindow.RootViewController.PresentViewController(avAlert, true, null);

     return success;
 }
 ```

    如果您使用 Facebook 以外的識別提供者，請為 [MobileServiceAuthenticationProvider] 選擇不同的值。

  6. 藉由新增 OpenUrl 方法多載來更新 AppDelegate 類別，如下所示：

     ```csharp
 public override bool OpenUrl(UIApplication app, NSUrl url, NSDictionary options)
 {
     if (TodoItemManager.DefaultManager.CurrentClient.ResumeWithURL(app, url, options))
         return true;
     return base.OpenUrl(app, url, options);
 }
 ```

  7. 在 FinishedLaunching 方法中，在呼叫 LoadApplication() 之前新增下面這行程式碼：

     ```csharp
 App.Init(this);
 ```

    此程式碼可確保在應用程式載入之前初始化驗證器。

  8. 開啟 Info.plist，並新增 URL 類型。 將識別碼設定為您選擇的名稱，將 URL 配置設為您應用程式的 URL 配置，並將角色設為「無」。

  9. 重新建置應用程式，執行它，然後以您選擇的驗證提供者登入，並確認您能夠以已驗證的使用者身分存取資料表。

將驗證新增至 Windows 10 (包括 Phone) 應用程式專案

本節說明如何在 Windows 10 應用程式專案中實作 IAuthenticate 介面。 相同的步驟適用於通用 Windows 平台 (UWP) 專案，但使用 UWP 專案 (內含已標註的變更)。 如果您不要支援 Windows 裝置，請略過這一節。

  1. 在 Visual Studio 中，以滑鼠右鍵按一下 UWP 專案，然後按一下 [設定為啟始專案]。

  2. 按下 F5 在偵錯工具中啟動專案，然後確認在應用程式啟動後，發生狀態代碼 401 (未經授權) 的未處理例外狀況。 發生 401 回應是因為只有獲授權的使用者才能存取後端。

  3. 開啟 Windows 應用程式專案的 MainPage.xaml.cs，然後加入下列 using 陳述式：

     ```csharp
 using Microsoft.WindowsAzure.MobileServices;
 using System.Threading.Tasks;
 using Windows.UI.Popups;
 using <your_Portable_Class_Library_namespace>;
 ```

    以您的可攜式類別庫的命名空間取代 <your_Portable_Class_Library_namespace> 。

  4. 更新 MainPage 類別來實作 IAuthenticate 介面，如下所示︰

     public sealed partial class MainPage : IAuthenticate

  5. 更新 MainPage 類別，新增 IAuthenticate 介面所需的 MobileServiceUser 欄位和 Authenticate 方法，如下所示︰

     ```csharp
 // Define an authenticated user.
 private MobileServiceUser user;

 public async Task<bool> Authenticate()
 {
     string message = string.Empty;
     var success = false;

     try
     {
         // Sign in with Facebook login using a server-managed flow.
         if (user == null)
         {
             user = await TodoItemManager.DefaultManager.CurrentClient
                 .LoginAsync(MobileServiceAuthenticationProvider.Facebook, "{url_scheme_of_your_app}");
             if (user != null)
             {
                 success = true;
                 message = string.Format("You are now signed-in as {0}.", user.UserId);
             }
         }

     }
     catch (Exception ex)
     {
         message = string.Format("Authentication Failed: {0}", ex.Message);
     }

     // Display the success or failure message.
     await new MessageDialog(message, "Sign-in result").ShowAsync();

     return success;
 }
 ```

    如果您使用 Facebook 以外的識別提供者，請為 MobileServiceAuthenticationProvider選擇不同的值。

  6. 在 MainPage 類別的建構函式中，在呼叫 LoadApplication() 之前新增下面這行程式碼：

     ```csharp
 // Initialize the authenticator before loading the app.
 <your_Portable_Class_Library_namespace>.App.Init(this);
 ```

    以您的可攜式類別庫的命名空間取代 <your_Portable_Class_Library_namespace> 。

  7. 如果您使用 UWP，請將下列 OnActivated 方法覆寫新增至 App 類別：

     ```csharp
 protected override void OnActivated(IActivatedEventArgs args)
 {
    base.OnActivated(args);

     if (args.Kind == ActivationKind.Protocol)
     {
         ProtocolActivatedEventArgs protocolArgs = args as ProtocolActivatedEventArgs;
         MobileServiceClientExtensions.ResumeWithURL(TodoItemManager.DefaultManager.CurrentClient,protocolArgs.Uri);
     }
 }
 ```

  8. 開啟 Package.appxmanifest，並新增通訊協定宣告。 將顯示名稱設定為您選擇的名稱，並將名稱設定為您應用程式的 URL 配置。

  9. 重新建置應用程式，執行它，然後以您選擇的驗證提供者登入，並確認您能夠以已驗證的使用者身分存取資料表。

後續步驟

現在您已經完成了這個基本驗證的教學課程，可以考慮繼續進行下列其中一個教學課程：

  • 將推播通知新增至應用程式

    了解如何將推播通知支援新增至應用程式，並設定行動應用程式後端以使用 Azure 通知中樞傳送推播通知。

  • 啟用應用程式的離線同步處理

    了解如何使用行動應用程式後端，將離線支援新增至應用程式。 離線同步處理可讓使用者與行動應用程式進行互動 (檢視、新增或修改資料)，即使沒有網路連接也可以。