Xamarin.Android アプリに認証を追加するAdd authentication to your Xamarin.Android app

注意

Visual Studio App Center は、モバイル アプリ開発の中心となるエンドツーエンドの統合サービスをサポートしています。Visual Studio App Center supports end to end and integrated services central to mobile app development. 開発者は、ビルドテスト配布のサービスを使用して、継続的インテグレーションおよびデリバリー パイプラインを設定できます。Developers can use Build, Test and Distribute services to set up Continuous Integration and Delivery pipeline. アプリがデプロイされたら、開発者は分析および診断のサービスを利用してアプリの状態と使用状況を監視し、プッシュ サービスを利用してユーザーと関わることができます。Once the app is deployed, developers can monitor the status and usage of their app using the Analytics and Diagnostics services, and engage with users using the Push service. また、開発者は Auth を利用してユーザーを認証し、データ サービスを利用してクラウド内のアプリ データを保持および同期することもできます。Developers can also leverage Auth to authenticate their users and Data service to persist and sync app data in the cloud.

モバイル アプリケーションにクラウド サービスを統合することを検討している場合は、今すぐ App Center にサインアップしてください。If you are looking to integrate cloud services in your mobile application, sign up with App Center today.

概要Overview

このトピックでは、クライアント アプリケーションから Mobile App のユーザーを認証する方法について説明します。This topic shows you how to authenticate users of a Mobile App from your client application. このチュートリアルでは、Azure Mobile Apps でサポートされている ID プロバイダーを使用して、クイック スタート プロジェクトに認証を追加します。In this tutorial, you add authentication to the quickstart project using an identity provider that is supported by Azure Mobile Apps. Mobile App によって正常に認証され、承認されると、ユーザー ID 値が表示されます。After being successfully authenticated and authorized in the Mobile App, the user ID value is displayed.

このチュートリアルは、モバイル アプリのクイック スタートに基づいています。This tutorial is based on the Mobile App quickstart. また、先に Xamarin.Android アプリの作成に関するチュートリアルを完了している必要があります。You must also first complete the tutorial Create a Xamarin.Android app. ダウンロードしたクイック スタートのサーバー プロジェクトを使用しない場合は、認証拡張機能パッケージをプロジェクトに追加する必要があります。If you do not use the downloaded quick start server project, you must add the authentication extension package to your project. サーバーの拡張機能パッケージの詳細については、「 Work with the .NET backend server SDK for Azure Mobile Apps (Azure Mobile Apps 用の .NET バックエンド サーバー SDK を操作する)」を参照してください。For more information about server extension packages, see Work with the .NET backend server SDK for Azure Mobile Apps.

アプリケーションを認証に登録し、App Services を構成するRegister your app for authentication and configure App Services

最初に、ID プロバイダーのサイトでアプリを登録する必要があります。その後、プロバイダーによって生成された資格情報を Mobile Apps バックエンドに設定します。First, you need to register your app at an identity provider's site, and then you will set the provider-generated credentials in the Mobile Apps back end.

  1. 次のプロバイダー固有の指示に従い、任意の ID プロバイダーを構成します。Configure your preferred identity provider by following the provider-specific instructions:

  2. アプリ内でサポートするプロバイダーごとに、前の手順を繰り返します。Repeat the previous steps for each provider you want to support in your app.

許可されている外部リダイレクト URL にアプリを追加するAdd your app to the Allowed External Redirect URLs

認証をセキュリティで保護するには、アプリ用の新しい URL スキームの定義が必要になります。Secure authentication requires that you define a new URL scheme for your app. これによって、認証プロセスが完了すると認証システムからアプリにリダイレクトできます。This allows the authentication system to redirect back to your app once the authentication process is complete. このチュートリアル全体を通して、URL スキーム appname を使用します。In this tutorial, we use the URL scheme appname throughout. ただし、選択したあらゆる URL スキームを使用できます。However, you can use any URL scheme you choose. URL スキームは、モバイル アプリに対して一意である必要があります。It should be unique to your mobile application. サーバー側でリダイレクトを有効にするには、以下の手順に従います。To enable the redirection on the server side:

  1. [Azure Portal] で、App Service を選択します。In the [Azure portal], select your App Service.

  2. [認証/承認] メニュー オプションをクリックします。Click the Authentication / Authorization menu option.

  3. [Allowed External Redirect URLs (許可されている外部リダイレクト URL)]url_scheme_of_your_app://easyauth.callback を入力します。In the Allowed External Redirect URLs, enter url_scheme_of_your_app://easyauth.callback. この文字列の url_scheme_of_your_app は、モバイル アプリケーションの URL スキームです。The url_scheme_of_your_app in this string is the URL Scheme for your mobile application. プロトコルの通常の URL 仕様 (文字と数字のみを使用し、文字で始まる) に従う必要があります。It should follow normal URL specification for a protocol (use letters and numbers only, and start with a letter). 数か所で URL スキームに合わせてモバイル アプリケーション コードを調整する必要があるため、選択した文字列をメモしておく必要があります。You should make a note of the string that you choose as you will need to adjust your mobile application code with the URL Scheme in several places.

  4. Click OK.Click OK.

  5. [Save] をクリックします。Click Save.

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

既定では、Mobile Apps バックエンドの API は匿名で呼び出すことができます。By default, APIs in a Mobile Apps back end can be invoked anonymously. 次に、認証されたクライアントのみにアクセスを制限する必要があります。Next, you need to restrict access to only authenticated clients.

  • Node.js バックエンド (Azure Portal 経由) :Node.js back end (via the Azure portal) :

    Mobile Apps の設定で [Easy Tables] をクリックし、目的のテーブルを選択します。In your Mobile Apps settings, click Easy Tables and select your table. [アクセス許可の変更] をクリックし、すべてのアクセス許可に対して [Authenticated access only (認証済みアクセスのみ)] を選択し、 [保存] をクリックします。Click Change permissions, select Authenticated access only for all permissions, and then click Save.

  • .NET バックエンド (C#) :.NET back end (C#):

    サーバー プロジェクトで、 [コントローラー] > [TodoItemController.cs] の順に移動します。In the server project, navigate to Controllers > TodoItemController.cs. 次のように、 [Authorize] 属性を TodoItemController クラスに追加します。Add the [Authorize] attribute to the TodoItemController class, as follows. アクセスを特定のメソッドのみに制限するには、この属性を、クラスではなく、そのメソッドのみに適用するだけです。To restrict access only to specific methods, you can also apply this attribute just to those methods instead of the class. サーバー プロジェクトを発行します。Republish the server project.

      [Authorize]
      public class TodoItemController : TableController<TodoItem>
    
  • Node.js バックエンド (Node.js コード経由) :Node.js backend (via Node.js code) :

    テーブルへのアクセスに対して認証を要求するには、Node.js サーバー スクリプトに次の行を追加します。To require authentication for table access, add the following line to the Node.js server script:

      table.access = 'authenticated';
    

    詳細については、「方法:テーブルへのアクセスに認証を要求する」を参照してください。For more details, see How to: Require authentication for access to tables. サイトからクイック スタート コード プロジェクトをダウンロードするには、「方法:Git を使用して Node.js バックエンド クイック スタート コード プロジェクトをダウンロードする」を参照してください。To learn how to download the quickstart code project from your site, see How to: Download the Node.js backend quickstart code project using Git.

Visual Studio または Xamarin Studio で、デバイスまたはエミュレーターを使用してクライアント プロジェクトを実行します。In Visual Studio or Xamarin Studio, run the client project on a device or emulator. アプリケーションの開始後に、状態コード 401 (許可されていません) のハンドルされない例外が発生することを確認します。Verify that an unhandled exception with a status code of 401 (Unauthorized) is raised after the app starts. これは、認証されないユーザーとして Mobile App バックエンドにアプリがアクセスしようとするために生じます。This happens because the app attempts to access your Mobile App backend as an unauthenticated user. TodoItem テーブルは今すぐ認証が必要です。The TodoItem table now requires authentication.

次に、認証されたユーザーで Mobile App のバックエンドからリソースを要求するように、クライアント アプリを更新します。Next, you will update the client app to request resources from the Mobile App backend with an authenticated user.

アプリケーションに認証を追加するAdd authentication to the app

ユーザーが [サインイン] ボタンをタップし認証されてからデータを表示する必要がある場合は、アプリを更新します。The app is updated to require users to tap the Sign in button and authenticate before data is displayed.

  1. TodoActivity クラスに次のコードを追加します。Add the following code to the TodoActivity class:

     // Define an authenticated user.
     private MobileServiceUser user;
     private async Task<bool> Authenticate()
     {
             var success = false;
             try
             {
                 // Sign in with Facebook login using a server-managed flow.
                 user = await client.LoginAsync(this,
                     MobileServiceAuthenticationProvider.Facebook, "{url_scheme_of_your_app}");
                 CreateAndShowDialog(string.Format("you are now logged in - {0}",
                     user.UserId), "Logged in!");
    
                 success = true;
             }
             catch (Exception ex)
             {
                 CreateAndShowDialog(ex, "Authentication failed");
             }
             return success;
     }
    
     [Java.Interop.Export()]
     public async void LoginUser(View view)
     {
         // Load data only after authentication succeeds.
         if (await Authenticate())
         {
             //Hide the button after authentication succeeds.
             FindViewById<Button>(Resource.Id.buttonLoginUser).Visibility = ViewStates.Gone;
    
             // Load the data.
             OnRefreshItemsSelected();
         }
     }
    

    これにより、ユーザーを認証する新しいメソッドと、新しい [サインイン] ボタンのメソッド ハンドラーが作成されます。This creates a new method to authenticate a user and a method handler for a new Sign in button. 上記のサンプル コードでは、ユーザーは Facebook ログインを使用して認証されます。The user in the example code above is authenticated by using a Facebook login. 認証されると、ダイアログを使用してユーザー ID が表示されます。A dialog is used to display the user ID once authenticated.

    注意

    Facebook 以外の ID プロバイダーを使用している場合は、上の LoginAsync に渡される値をMicrosoftAccountTwitterGoogle、または WindowsAzureActiveDirectory のいずれかに変更します。If you are using an identity provider other than Facebook, change the value passed to LoginAsync above to one of the following: MicrosoftAccount, Twitter, Google, or WindowsAzureActiveDirectory.

  2. OnCreate メソッド内の次のコード行を削除またはコメント アウトします。In the OnCreate method, delete or comment-out the following line of code:

     OnRefreshItemsSelected ();
    
  3. Activity_To_Do.axml ファイル内の既存の AddItem ボタンの前に次の LoginUser ボタン定義を追加します。In the Activity_To_Do.axml file, add the following LoginUser button definition before the existing AddItem button:

       <Button
         android:id="@+id/buttonLoginUser"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:onClick="LoginUser"
         android:text="@string/login_button_text" />
    
  4. 次の要素を Strings.xml リソース ファイルに追加します。Add the following element to the Strings.xml resources file:

     <string name="login_button_text">Sign in</string>
    
  5. AndroidManifest.xml ファイルを開き、<application> XML 要素に次のコードを追加します。Open the AndroidManifest.xml file, add the following code inside <application> XML element:

     <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>
    
  6. Visual Studio または Xamarin Studio で、デバイスまたはエミュレーターでクライアント プロジェクトを実行し、選択した ID プロバイダーを使用してサインインします。In Visual Studio or Xamarin Studio, run the client project on a device or emulator and sign in with your chosen identity provider. ログインに成功すると、アプリケーションにログイン ID と todo 項目の一覧が表示され、データを更新することができます。When you are successfully logged-in, the app will display your login ID and the list of todo items, and you can make updates to the data.

トラブルシューティングTroubleshooting

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

場合によっては、Visual Studio で単なる警告として表示されるサポート パッケージの競合が実行時にこの例外としてアプリケーション クラッシュとして表示されます。In some cases, conflicts in the support packages displayed as just a warning in the Visual studio, but the application crashes with this exception at runtime. この場合、プロジェクトで参照されるすべてのサポート パッケージのバージョンが同じであることを確認する必要があります。In this case you need to make sure that all the support packages referenced in your project have the same version. Azure Mobile Apps の NuGet パッケージには、Android プラットフォームに関して Xamarin.Android.Support.CustomTabs の依存関係があるため、プロジェクトで新しいサポート パッケージを使用する場合は、必要なバージョンを使用してこのパッケージを直接インストールし、競合を回避する必要があります。The Azure Mobile Apps NuGet package has Xamarin.Android.Support.CustomTabs dependency for Android platform, so if your project uses newer support packages you need to install this package with required version directly to avoid conflicts.