Apache Cordova アプリへの認証の追加

• Android
• Cordova
• iOS
• Windows
• Xamarin.Android
• Xamarin.Forms
• Xamarin.iOS

まとめ

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

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

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

1. 次のプロバイダー固有の指示に従い、任意の ID プロバイダーを構成します。

   • Azure Active Directory
   • Facebook
   • Google
   • Microsoft
   • Twitter

2. アプリ内でサポートするプロバイダーごとに、前の手順を繰り返します。

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

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

既定では、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 バックエンド クイック スタート コード プロジェクトをダウンロードする」を参照してください。

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

• チュートリアル「Mobile Apps の使用」を実行したときに作成したプロジェクトを開きます。
• Google Android エミュレーターでアプリケーションを実行します。
• アプリの開始後に、「予期しない接続エラー」が表示されていることを確認します。

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

アプリケーションに認証を追加する

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

2. head セクションで 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	microsoftaccount	https://login.live.com
   Twitter	Twitter	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 に関するドキュメント をご覧ください。

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

3. 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 を返す非同期関数です。 初期化の残りの部分は promise の応答内に配置されているため、login() メソッドが完了するまで実行されません。

4. 先ほど追加したコードで、 SDK_Provider_Name を実際のログイン プロバイダーの名前に置き換えます。 たとえば、Azure Active Directory の場合、 client.login('aad')を使用します。

5. プロジェクトを実行します。 プロジェクトの初期化が終了すると、アプリケーションにより、選択した認証プロバイダーの OAuth ログイン ページが表示されます。

次の手順

• Azure App Service を使用した 認証の詳細 を確認します。
• このチュートリアルの続きとして、Apache Cordova アプリに プッシュ通知 を追加します。

SDK の使用方法を確認してください。

• Apache Cordova SDK
• ASP.NET サーバー SDK
• Node.js サーバー SDK