Xamarin Forms アプリに認証を追加する

[アーティクル]
06/25/2019

概要

このトピックでは、クライアントアプリケーションから App Service モバイルアプリのユーザーを認証する方法について説明します。このチュートリアルでは、App Service でサポートされている ID プロバイダーを使用して、Xamarin Forms クイックスタートプロジェクトに認証を追加します。モバイルアプリによって正常に認証、承認されると、ユーザー ID 値が表示され、制限付きのテーブルデータにアクセスできます。

前提条件

このチュートリアルで最善の結果が得られるように、最初にチュートリアル「Xamarin.Forms アプリの作成」を完了しておくことをお勧めします。このチュートリアルを完了すると、マルチプラットフォーム TodoList アプリである Xamarin Forms プロジェクトを作成できます。

ダウンロードしたクイックスタートのサーバープロジェクトを使用しない場合は、認証拡張機能パッケージをプロジェクトに追加する必要があります。サーバーの拡張機能パッケージの詳細については、「 Work with the .NET backend server SDK for Azure Mobile Apps (Azure Mobile Apps 用の .NET バックエンドサーバー SDK を操作する)」を参照してください。

アプリケーションを認証に登録し、App Services を構成する

最初に、ID プロバイダーのサイトでアプリを登録する必要があります。その後、プロバイダーによって生成された資格情報を Mobile Apps バックエンドに設定します。

次のプロバイダー固有の指示に従い、任意の ID プロバイダーを構成します。
アプリ内でサポートするプロバイダーごとに、前の手順を繰り返します。

許可されている外部リダイレクト URL にアプリを追加する

認証をセキュリティで保護するには、アプリ用の新しい URL スキームの定義が必要になります。これによって、認証プロセスが完了すると認証システムからアプリにリダイレクトできます。このチュートリアル全体を通して、URL スキーム appname を使用します。ただし、選択したあらゆる URL スキームを使用できます。 URL スキームは、モバイルアプリに対して一意である必要があります。サーバー側でリダイレクトを有効にするには、以下の手順に従います。

Azure Portal で、App Service を選択します。
[認証/承認] メニューオプションをクリックします。
[Allowed External Redirect URLs (許可されている外部リダイレクト URL)] に url_scheme_of_your_app://easyauth.callback を入力します。この文字列の url_scheme_of_your_app は、モバイルアプリケーションの URL スキームです。プロトコルの通常の URL 仕様 (文字と数字のみを使用し、文字で始まる) に従う必要があります。数か所で URL スキームに合わせてモバイルアプリケーションコードを調整する必要があるため、選択した文字列をメモしておく必要があります。
[OK] をクリックします。
[保存] をクリックします。

アクセス許可を、認証されたユーザーだけに制限する

既定では、Mobile Apps バックエンドの API は匿名で呼び出すことができます。次に、認証されたクライアントのみにアクセスを制限する必要があります。

Node.js バックエンド (Azure Portal 経由):

Mobile Apps の設定で、[ 簡易テーブル ] をクリックし、テーブルを選択します。 [アクセス許可の変更] をクリックし、すべてのアクセス許可に対して [Authenticated access only (認証済みアクセスのみ)] を選択し、[保存] をクリックします。
.NET バックエンド (C#):

サーバープロジェクトで、 Controllers>TodoItemControllerに移動します。次のように、 [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 インターフェイスを実装します。

Visual Studio または Xamarin Studio で、ポータブルクラスライブラリプロジェクトである名前で、ポータブルを使用してプロジェクトから app.xaml を開き、次 using のステートメントを追加します。
```
 ```csharp
 using System.Threading.Tasks;
 ```
```
App.cs に、次の IAuthenticate インターフェイス定義を、App クラス定義の直前に追加します。
```
 ```csharp
 public interface IAuthenticate
 {
     Task<bool> Authenticate();
 }
 ```
```

インターフェイスをプラットフォーム固有の実装で初期化するように、次の静的メンバーを App クラスに追加します。

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

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

ポータブルクラスライブラリプロジェクトから TodoList.xaml を開き、既存のボタンの後ろに、 buttonsPanel レイアウト要素の次の Button 要素を追加します。
```
 ```xml
   <Button x:Name="loginButton" Text="Sign-in" MinimumHeightRequest="30"
     Clicked="loginButton_Clicked"/>
 ```
```
このボタンは、モバイルアプリバックエンドによるサーバー側管理認証をトリガーします。
ポータブルクラスライブラリプロジェクトから TodoList.xaml.cs を開き、 TodoList クラスに次のフィールドを追加します。
```
 ```csharp
 // Track whether the user has authenticated.
 bool authenticated = false;
 ```
```

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

このコードにより、認証の完了後にのみ、データがサービスによって更新されるようになります。

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

変更を保存し、ポータブルクラスライブラリプロジェクトをリビルドしてエラーがないことを確認します。

Android アプリに認証を追加する

このセクションでは、Android アプリプロジェクト内に IAuthenticate インターフェイスを実装する方法について説明します。 Android デバイスをサポートしない場合、このセクションはスキップしてください。

Visual Studio または Xamarin Studio で、droid プロジェクトを右クリックし、 [スタートアッププロジェクトに設定] をクリックします。
F5 キーを押してデバッガーでプロジェクトを開始し、アプリの開始後に、状態コード 401 のハンドルされない例外 (許可されていません) が発生することを確認します。 401 コードは、バックエンドへのアクセスが承認済みのユーザーのみに制限されているために生成されます。
Android プロジェクトの MainActivity.cs を開き、次の using ステートメントを追加します。
```
 ```csharp
 using Microsoft.WindowsAzure.MobileServices;
 using System.Threading.Tasks;
 ```
```

次のように、MainActivity クラスを更新して IAuthenticate インターフェイスを実装します。

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

次のように、MobileServiceUser フィールドのほか、IAuthenticate インターフェイスに必要な Authenticate メソッドを追加して、MainActivity クラスを更新します。

 ```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 以外の ID プロバイダーを使用している場合、 MobileServiceAuthenticationProviderには別の値を選択してください。

<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 スキームで置換します。

LoadApplication() の呼び出しの前にある MainActivity クラスの OnCreate メソッドに次のコードを追加します。
```
 ```csharp
 // Initialize the authenticator before loading the app.
 App.Init((IAuthenticate)this);
 ```
```
このコードにより、アプリの読み込み前に Authenticator が初期化されるようになります。
アプリをリビルドして実行します。その後で、選択した認証プロバイダーを使用してサインインし、認証されたユーザーとしてデータにアクセスできることを確認します。

トラブルシューティング

アプリケーションが でクラッシュしたJava.Lang.NoSuchMethodError: No static method startActivity

場合によっては、Visual Studio で単なる警告として表示されるサポートパッケージの競合が実行時にこの例外としてアプリケーションクラッシュとして表示されます。この場合、プロジェクトで参照されるすべてのサポートパッケージのバージョンが同じであることを確認する必要があります。 Azure Mobile Apps の NuGet パッケージには、Android プラットフォームに関して Xamarin.Android.Support.CustomTabs の依存関係があるため、プロジェクトで新しいサポートパッケージを使用する場合は、必要なバージョンを使用してこのパッケージを直接インストールし、競合を回避する必要があります。

iOS アプリに認証を追加する

このセクションでは、iOS アプリプロジェクト内に IAuthenticate インターフェイスを実装する方法について説明します。 iOS デバイスをサポートしない場合、このセクションはスキップしてください。

Visual Studio または Xamarin Studio で、iOS プロジェクトを右クリックし、 [スタートアッププロジェクトに設定] をクリックします。
F5 キーを押してデバッガーでプロジェクトを開始し、アプリの開始後に、状態コード 401 のハンドルされない例外 (許可されていません) が発生することを確認します。 401 応答は、バックエンドへのアクセスが承認済みのユーザーのみに制限されているために生成されます。
iOS プロジェクトの AppDelegate.cs を開き、次の using ステートメントを追加します。
```
 ```csharp
 using Microsoft.WindowsAzure.MobileServices;
 using System.Threading.Tasks;
 ```
```

次のように、AppDelegate クラスを更新して IAuthenticate インターフェイスを実装します。

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

次のように、MobileServiceUser フィールドのほか、IAuthenticate インターフェイスに必要な Authenticate メソッドを追加して、AppDelegate クラスを更新します。

 ```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 以外の ID プロバイダーを使用している場合、[MobileServiceAuthenticationProvider] には別の値を選択してください。

次のように 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);
 }
 ```

LoadApplication() の呼び出しの前の FinishedLaunching メソッドに、次のコード行を追加します。
```
 ```csharp
 App.Init(this);
 ```
```
このコードにより、アプリの読み込み前に Authenticator が初期化されるようになります。
Info.plist を開き、 [URL Type] を追加します。 [Identifier] を任意の名前に、 [URL Schemes] をアプリの URL スキームに、 [Role] を [None] に設定します。
アプリをリビルドして実行します。その後で、選択した認証プロバイダーを使用してサインインし、認証されたユーザーとしてデータにアクセスできることを確認します。

Windows 10 (Phone を含む) アプリプロジェクトに認証を追加する

このセクションでは、Windows 10 アプリプロジェクト内に IAuthenticate インターフェイスを実装する方法について説明します。同じ手順をユニバーサル Windows プラットフォーム (UWP) プロジェクトにも適用できますが、UWP プロジェクトを使用します (相違点が注記されています)。 Windows デバイスをサポートしない場合、このセクションはスキップしてください。

Visual Studio で、UWP プロジェクトを右クリックし、 [スタートアッププロジェクトに設定] をクリックします。
F5 キーを押してデバッガーでプロジェクトを開始し、アプリの開始後に、状態コード 401 のハンドルされない例外 (許可されていません) が発生することを確認します。 401 応答は、バックエンドへのアクセスが承認済みのユーザーのみに制限されているために発生します。
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> を、ポータブルクラスライブラリの名前空間に置き換えます。
次のように、MainPage クラスを更新して IAuthenticate インターフェイスを実装します。
```
 public sealed partial class MainPage : IAuthenticate
```

次のように、MobileServiceUser フィールドのほか、IAuthenticate インターフェイスに必要な Authenticate メソッドを追加して、MainPage クラスを更新します。

 ```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 以外の ID プロバイダーを使用している場合、 MobileServiceAuthenticationProviderには別の値を選択してください。

LoadApplication() の呼び出しの前にある MainPage クラスのコンストラクター内に次のコード行を追加します。
```
 ```csharp
 // Initialize the authenticator before loading the app.
 <your_Portable_Class_Library_namespace>.App.Init(this);
 ```
```
<your_Portable_Class_Library_namespace> を、ポータブルクラスライブラリの名前空間に置き換えます。

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

Package.appxmanifest を開き、 [プロトコル] 宣言を追加します。 [表示名] を任意の名前に設定し、 [名前] をアプリの URL スキームに設定します。
アプリをリビルドして実行します。その後で、選択した認証プロバイダーを使用してサインインし、認証されたユーザーとしてデータにアクセスできることを確認します。

次のステップ

これで基本的な認証チュートリアルは完了しましたので、引き続き次のいずれかのチュートリアルのご利用を検討してください。

アプリへのプッシュ通知の追加

アプリにプッシュ通知のサポートを追加して、Azure Notification Hubs を使ってプッシュ通知を送信するようにモバイルアプリバックエンドを構成する方法について説明します。
アプリのオフライン同期の有効化

モバイルアプリバックエンドを使用してオフラインサポートをアプリに追加する方法について説明します。オフライン同期を使用すると、エンドユーザーはネットワークにアクセスできなくても、データの表示、追加、変更など、モバイルアプリケーションとやり取りできます。

次の方法で共有

Xamarin Forms アプリに認証を追加する

概要

前提条件

アプリケーションを認証に登録し、App Services を構成する

許可されている外部リダイレクト URL にアプリを追加する

アクセス許可を、認証されたユーザーだけに制限する

ポータブルクラスライブラリに認証を追加する

Android アプリに認証を追加する

トラブルシューティング

iOS アプリに認証を追加する

Windows 10 (Phone を含む) アプリプロジェクトに認証を追加する

次のステップ

その他のリソース

次の方法で共有

Xamarin Forms アプリに認証を追加する

概要

前提条件

アプリケーションを認証に登録し、App Services を構成する

許可されている外部リダイレクト URL にアプリを追加する

アクセス許可を、認証されたユーザーだけに制限する

ポータブル クラス ライブラリに認証を追加する

Android アプリに認証を追加する

トラブルシューティング

iOS アプリに認証を追加する

Windows 10 (Phone を含む) アプリ プロジェクトに認証を追加する

次のステップ

その他のリソース

ポータブルクラスライブラリに認証を追加する

Windows 10 (Phone を含む) アプリプロジェクトに認証を追加する