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

このチュートリアルでは、Microsoft Entra ID を使用して Microsoft 認証をクイック スタート プロジェクトに追加します。 このチュートリアルを完了するには、あらかじめ確実にプロジェクトを作成し、オフライン同期を有効にしておきます。

認証用のバックエンドを構成する

認証用のバックエンドを構成するには、次のことを行う必要があります。

• アプリの登録を作成します。
• Azure App Service の認証と承認を構成する。
• [許可される外部リダイレクト URL] にアプリを追加する。

このチュートリアルでは、Microsoft 認証を使用するようにアプリを構成します。 Microsoft Entra テナントは、Azure サブスクリプションで自動的に構成されています。 Microsoft Entra ID を使用して、Microsoft 認証を構成できます。

サービスをプロビジョニングしたときに提供された Azure Mobile Apps サービスのバックエンド URL が必要です。

アプリ登録の作成

1. Azure portal にサインインします。
2. [Microsoft Entra ID]>[アプリの登録]>[新規登録] を選択します。
3. [アプリケーションの登録] ページの [名前] フィールドに「zumoquickstart」と入力します。
4. [サポートされているアカウントの種類] で、任意の組織ディレクトリ (任意の Microsoft Entra ディレクトリ - マルチテナント) と個人用 Microsoft アカウント (Skype、Xbox など) のアカウントを選択します。
5. [リダイレクト URI] で、[Web] を選択し、「<backend-url>/.auth/login/aad/callback」と入力します。 たとえば、バックエンド URL が https://zumo-abcd1234.azurewebsites.net である場合は、「https://zumo-abcd1234.azurewebsites.net/.auth/login/aad/callback」と入力します。
6. フォームの下部にある [登録] ボタンを押します。
7. アプリケーション (クライアント) ID をコピーします。
8. 左側のウィンドウで、[Certificates & secrets]\(証明書とシークレット\) を選択し、[New client secret]\(新しいクライアント シークレット\) を選択します。
9. 適切な説明を入力し、有効期間を選択してから、[追加] を選択します。
10. [証明書とシークレット] ページにシークレットをコピーします。 この値が再び表示されることはありません。
11. [認証] を選択します。
12. [Implicit grant and hybrid flows]\(暗黙的な許可およびハイブリッド フロー\) で、[ID トークン] を有効にします。
13. ページの上部にある [保存] を押します。

Azure App Service の認証および承認を構成する

1. Azure portal で、[すべてのリソース]、ご利用の App サービスの順に選択します。

2. [設定]>[認証] の順に選択します。

3. [ID プロバイダーの追加] を押します。

4. ID プロバイダーとして [Microsoft] を選択します。

   • [App registration type]\(アプリの登録の種類\) で、[既存のアプリの登録に関する詳細を指定してください] を選択します。
   • 前にコピーした値を [アプリケーション (クライアント) ID] と [クライアント シークレット] ボックスに貼り付けます。
   • [発行者 URL] に「https://login.microsoftonline.com/9188040d-6c67-4c5b-b112-36a304b66dad/v2.0」と入力します。 この URL は、Microsoft ログイン用の "マジック テナント URL" です。
   • [アクセスの制限] で、[認証が必要] を選びます。
   • [認証されていない要求] で、[HTTP 401 認可されていない] を選びます。

5. [追加] をクリックします。

6. 認証画面に戻ったら、[認証の設定] の横にある [編集] を押します。

7. [Allowed External Redirect URLs (許可されている外部リダイレクト URL)] に「zumoquickstart://easyauth.callback」と入力します。

8. 保存をクリックします。

手順 10 では、すべてのユーザーを承認してバックエンドにアクセスできるようにする必要があります。 バックエンドにコードを追加することで、きめ細かな制御手段を実現できます。

参考情報: Microsoft Entra ID、Facebook、Google、Twitter、または OpenID Connect 互換プロバイダーの組織アカウントを持つユーザーを許可することもできます。 Azure App Service のドキュメントに記載の手順に従ってください。

認証が要求されることをテストする

• cordova run android を使用してアプリを実行します。
• アプリケーションの開始後に、状態コード 401 (許可されていません) のハンドルされない例外が発生することを確認します。

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

組み込みプロバイダーを介して認証を追加するには、次のことを行う必要があります。

• 認証プロバイダーを既知の適切なソースの一覧に追加する。
• データにアクセスする前に認証プロバイダーを呼び出す。

コンテンツ セキュリティ ポリシーを更新する

各 Apache Cordova で、Content-Security-Policy ヘッダーを介して、既知の適切なソースを宣言します。 サポートされている各プロバイダーに用意されている OAuth ホストを追加する必要があります。

編集 www/index.htmlし、次のように Microsoft Entra ID の OAuth ホストを追加します。

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

コンテンツは、読みやすくするために複数行になっています。 すべてのコードを同じ行に配置します。

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

ZUMOAPPNAME は、既に実際のアプリの名前に置き換えてあります。

認証プロバイダーを呼び出します。

www/js/index.js を編集します。 setup() メソッドを次のコードで置き換えます。

function setup() {
    client.login('aad').then(function () {
        // ORIGINAL CONTENTS OF FUNCTION
        todoTable = client.getSyncTable('todoitem');
        refreshDisplay();
        addItemEl.addEventListener('submit', addItemHandler);
        refreshButtonEl.addEventListener('click', refreshDisplay);
        // END OF ORIGINAL CONTENTS OF FUNCTION
    });
}

アプリをテストする

次のコマンドを実行します。

cordova run android

初回の起動が完了すると、Microsoft 資格情報を使用してサインインするように求めるメッセージが表示されます。 完了したら、項目を一覧に追加または一覧から削除ができるようになります。

リソースの削除

クイックスタート チュートリアルが完了したので、az group delete -n zumo-quickstart を使用してリソースを削除できます。 また、ポータルを介して、認証に使用されるグローバル アプリの登録を削除することもできます。

次のステップ

「方法」セクションを参照してください。

• サーバー (Node.js)
• サーバー (ASP.NET Framework)
• Apache Cordova クライアント

同じサービスを使用して、別のプラットフォーム向けのクイック スタートを実行することもできます。

• Windows (UWP)
• Windows (WPF)
• Xamarin.Android
• Xamarin.Forms
• Xamarin.iOS