Apache Cordova アプリに認証を追加する

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

概要

このチュートリアルでは、サポートされている ID プロバイダーを使用して、Apache Cordova の todolist クイックスタートプロジェクトに認証を追加します。このチュートリアルは、「Mobile Apps の使用を開始する」に基づいています。このチュートリアルは、最初に完了する必要があります。

認証用にアプリを登録し、App Service を構成する

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

プロバイダー固有の手順に従って、優先 ID プロバイダーを構成します。
アプリでサポートするプロバイダーごとに、前の手順を繰り返します。

同様の手順を示すビデオを見る

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

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

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

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

サーバープロジェクトで、Controllers>TodoItemController.csに移動します。次のように、[Authorize] クラスに属性を追加します。特定のメソッドにのみアクセスを制限するには、クラスではなく、これらのメソッドにのみこの属性を適用することもできます。サーバープロジェクトを再公開します。
```
  [Authorize]
  public class TodoItemController : TableController<TodoItem>
```
バックエンド Node.js (Node.js コード経由):

テーブルアクセスの認証を要求するには、Node.js サーバースクリプトに次の行を追加します。
```
  table.access = 'authenticated';
```
詳細については、「方法:テーブルへのアクセスに認証を要求する」を参照してください。サイトからクイックスタートコードプロジェクトをダウンロードする方法については、「方法: Gitを使用して Node.js バックエンドクイックスタートコードプロジェクトをダウンロードする」を参照してください。

これで、バックエンドへの匿名アクセスが無効になっていることを確認できます。 Visual Studio で次の手順を実行します。

チュートリアル「Mobile Apps の概要」を完了したときに作成したプロジェクトを開きます。
Google Android Emulator でアプリケーションを実行します。
アプリの起動後に予期しない接続エラーが表示されることを確認します。

次に、モバイルアプリバックエンドにリソースを要求する前に、ユーザーを認証するようにアプリを更新します。

アプリに認証を追加する

Visual Studio でプロジェクトを開き、www/index.html ファイルを開いて編集します。

ヘッドセクションで Content-Security-Policy メタタグを見つけます。許可されているソースの一覧に OAuth ホストを追加します。

プロバイダー	SDK プロバイダー名	OAuth ホスト
Azure Active Directory	aad	https://login.microsoftonline.com
Facebook	facebook	https://www.facebook.com
Google	Google	https://accounts.google.com
Microsoft	Microsoft アカウント	https://login.live.com
ツイッター	ツイッター	https://api.twitter.com

Content-Security-Policy (Azure Active Directory 用に実装) の例を次に示します。

 <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 ホストに置き換えます。 content-security-policy メタタグの詳細については、 Content-Security-Policy のドキュメントを参照してください。

一部の認証プロバイダーは、適切なモバイルデバイスで使用する場合、コンテンツSecurity-Policy の変更を必要としません。たとえば、Android デバイスで Google 認証を使用する場合、コンテンツSecurity-Policy の変更は必要ありません。

編集用の www/js/index.js ファイルを開き、 onDeviceReady() メソッドを見つけ、クライアント作成コードの下に次のコードを追加します。
```
 // 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 を更新する既存のコードを置き換えます。

login() メソッドは、プロバイダーによる認証を開始します。 login() メソッドは、JavaScript Promise を返す非同期関数です。初期化の残りの部分は、login() メソッドが完了するまで実行されないように promise 応答内に配置されます。
追加したコードで、 SDK_Provider_Name をログインプロバイダーの名前に置き換えます。たとえば、Azure Active Directory の場合は、 client.login('aad')を使用します。
プロジェクトを実行します。プロジェクトの初期化が完了すると、選択した認証プロバイダーの OAuth ログインページがアプリケーションに表示されます。

次のステップ

詳細については、Azure App Service での認証に関するページを参照してください。
Apache Cordova アプリにプッシュ通知を追加して、チュートリアルを続行します。

SDK の使用方法について説明します。

次の方法で共有

Apache Cordova アプリに認証を追加する

概要

認証用にアプリを登録し、App Service を構成する

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

アプリに認証を追加する

次のステップ

その他のリソース