Apache Cordova アプリへの認証の追加Add authentication to your Apache Cordova 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.

まとめSummary

このチュートリアルでは、サポートされている ID プロバイダーを使用して、Apache Cordova で todolist クイック スタート プロジェクトに認証を追加します。In this tutorial, you add authentication to the todolist quickstart project on Apache Cordova using a supported identity provider. 最初に、このチュートリアルの基になっている Mobile Apps の使用 チュートリアルを完了しておく必要があります。This tutorial is based on the Get started with Mobile Apps tutorial, which you must complete first.

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

最初に、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.

同様の手順を説明するビデオを見るWatch a video showing similar steps

アクセス許可を、認証されたユーザーだけに制限する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.

これで、バックエンドへの匿名アクセスが無効になっていることを確認できます。Now, you can verify that anonymous access to your backend has been disabled. Visual Studio で次の操作を行います。In Visual Studio:

  • チュートリアル「Mobile Apps の使用」を実行したときに作成したプロジェクトを開きます。Open the project that you created when you completed the tutorial Get started with Mobile Apps.
  • Google Android エミュレーターでアプリケーションを実行します。Run your application in the Google Android Emulator.
  • アプリの開始後に、「予期しない接続エラー」が表示されていることを確認します。Verify that an Unexpected Connection Failure is shown after the app starts.

次に、Mobile App バックエンドのリソースを要求する前にユーザーを認証するようにアプリを更新します。Next, update the app to authenticate users before requesting resources from the Mobile App backend.

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

  1. Visual Studio でプロジェクトを開き、編集する www/index.html ファイルを開きます。Open your project in Visual Studio, then open the www/index.html file for editing.

  2. head セクションで Content-Security-Policy メタ タグを見つけます。Locate the Content-Security-Policy meta tag in the head section. 許可されているソースの一覧に OAuth ホストを追加します。Add the OAuth host to the list of allowed sources.

    プロバイダーProvider SDK プロバイダー名SDK Provider Name OAuth ホストOAuth Host
    Azure Active DirectoryAzure Active Directory aadaad https://login.microsoftonline.com
    FacebookFacebook Facebookfacebook https://www.facebook.com
    GoogleGoogle Googlegoogle https://accounts.google.com
    MicrosoftMicrosoft microsoftaccountmicrosoftaccount https://login.live.com
    TwitterTwitter Twittertwitter https://api.twitter.com

    サンプルの Content-Security-Policy (Azure Active Directory に実装されている) は次のようになっています。An example Content-Security-Policy (implemented for Azure Active Directory) is as follows:

     <meta http-equiv="Content-Security-Policy" content="default-src 'self'
         data: gap: https://login.microsoftonline.com https://yourapp.azurewebsites.net; style-src 'self'">
    

    https://login.microsoftonline.com を前の表の OAuth ホストに置き換えます。Replace https://login.microsoftonline.com with the OAuth host from the preceding table. content-security-policy メタ タグの詳細については、Content-Security-Policy に関するドキュメント をご覧ください。For more information about the content-security-policy meta tag, see the Content-Security-Policy documentation.

    一部の認証プロバイダーについては、適切なモバイル デバイスで使用する場合、Content-Security-Policy を変更する必要がありません。Some authentication providers do not require Content-Security-Policy changes when used on appropriate mobile devices. たとえば、Android デバイスで Google 認証を使用する場合は、Content-Security-Policy を変更する必要はありません。For example, no Content-Security-Policy changes are required when using Google authentication on an Android device.

  3. 編集する www/js/index.js ファイルを開き、onDeviceReady() メソッドを見つけて、クライアント作成コードの下に次のコードを追加します。Open the www/js/index.js file for editing, locate the onDeviceReady() method, and under the client creation code add the following code:

     // Login to the service
     client.login('SDK_Provider_Name')
         .then(function () {
    
             // BEGINNING OF ORIGINAL CODE
    
             // Create a table reference
             todoItemTable = client.getTable('todoitem');
    
             // Refresh the todoItems
             refreshDisplay();
    
             // Wire up the UI Event Handler for the Add Item
             $('#add-item').submit(addItemHandler);
             $('#refresh').on('click', refreshDisplay);
    
             // END OF ORIGINAL CODE
    
         }, handleError);
    

    テーブル参照を作成し、UI を更新する既存のコードをこのコードで置き換えます。This code replaces the existing code that creates the table reference and refreshes the UI.

    login() メソッドは、プロバイダーでの認証を開始します。The login() method starts authentication with the provider. login() メソッドは、JavaScript Promise を返す非同期関数です。The login() method is an async function that returns a JavaScript Promise. 初期化の残りの部分は promise の応答内に配置されているため、login() メソッドが完了するまで実行されません。The rest of the initialization is placed inside the promise response so that it is not executed until the login() method completes.

  4. 先ほど追加したコードで、 SDK_Provider_Name を実際のログイン プロバイダーの名前に置き換えます。In the code that you just added, replace SDK_Provider_Name with the name of your login provider. たとえば、Azure Active Directory の場合、 client.login('aad')を使用します。For example, for Azure Active Directory, use client.login('aad').

  5. プロジェクトを実行します。Run your project. プロジェクトの初期化が終了すると、アプリケーションにより、選択した認証プロバイダーの OAuth ログイン ページが表示されます。When the project has finished initializing, your application shows the OAuth login page for the chosen authentication provider.

次のステップNext Steps

SDK の使用方法を確認してください。Learn how to use the SDKs.