クイック スタート: ネイティブ認証 JavaScript SDK を使用してシングルページ アプリでユーザーをサインインする

適用対象: 外部テナント (詳細)

このクイック スタートでは、シングルページ アプリケーション (SPA) を使用して、ネイティブ認証 SDK を使用してユーザーを認証する方法を示します。 サンプル アプリでは、パスワードを使用した電子メールと電子メールのワンタイム パスコード認証フローの両方に対して、ユーザーのサインアップ、サインイン、サインアウトを示します。

[前提条件]

• アクティブなサブスクリプションを持つ Azure アカウント。 アカウントをまだお持ちでない場合は、 無料でアカウントを作成してください。
• この Azure アカウントには、アプリケーションを管理するためのアクセス許可が必要です。 以下のいずれの Microsoft Entra ロールにも、必要なアクセス許可が含まれています。
  • アプリケーション管理者
  • アプリケーション開発者
• 外部テナント。 お持ちでない場合は、Microsoft Entra 管理センターで 新しい外部テナントを作成 します。
• ユーザーの流れ。 詳細については、「 外部テナントのアプリのセルフサービス サインアップ ユーザー フローを作成する」を参照してください。 [ID プロバイダー] で、優先する認証方法 (パスワードを使用した電子メール)、または電子メールワンタイム パスコードを選択します。 このコード サンプルでは、サンプル アプリがユーザーからそれらを収集する際に、ユーザー フローで次のユーザー属性を使用します。
  • 指定の名前
  • 姓
  • 役職
  • 国/地域設定
• まだ登録していない場合は、Microsoft Entra 管理センターでアプリケーションを登録します。 次のことを確認してください。
  • 後で使用するために、 アプリケーション (クライアント) ID と ディレクトリ (テナント) ID を 記録します。
  • アプリの登録に管理者の同意を与えます。
• アプリの登録をユーザー フローに関連付ける
• Node.js。
• Visual Studio Code または別のコード エディター。

パブリック クライアントとネイティブ認証フローを有効にする

このアプリがパブリック クライアントであり、ネイティブ認証を使用できることを指定するには、パブリック クライアントとネイティブ認証フローを有効にします。

1. アプリ登録ページから、パブリック クライアントとネイティブ認証フローを有効にするアプリ登録を選択します。
2. [管理] で、 [認証] を選択します。
3. [詳細設定 で、パブリック クライアント フローを許可します。
   1. [次のモバイルとデスクトップ フローを有効にする] で、[はい] を選択します。
   2. ネイティブ認証 を有効にするには、[はい] を選択します。
4. [ 保存] ボタンを 選択します。

サンプル SPA を複製またはダウンロードする

サンプル アプリケーションを取得するには、GitHub から複製するか、.zip ファイルとしてダウンロードします。

• サンプルを複製するには、コマンド プロンプトを開き、プロジェクトを作成する場所に移動し、次のコマンドを入力します。

  git clone https://github.com/Azure-Samples/ms-identity-ciam-native-javascript-samples.git
  

• サンプルをダウンロードします。 名前の長さが 260 文字未満のファイル パスに抽出します。

プロジェクトの依存関係をインストールする

サンプル React アプリを構成する

CORS プロキシ サーバーを構成する

ネイティブ認証 API は クロスオリジン リソース共有 (CORS) をサポートしていないため、SPA アプリと API の間にプロキシ サーバーを設定する必要があります。

このコード サンプルには、ネイティブ認証 API URL エンドポイントに要求を転送する CORS プロキシ サーバーが含まれています。 CORS プロキシ サーバーは、ポート 3001 でリッスンする Node.js サーバーです。

プロキシ サーバーを構成するには、proxy.config.js ファイルを開き、プレースホルダーを見つけます。

• tenantSubdomain をディレクトリ (テナント) サブドメインに置き換えます。 たとえば、テナントのプライマリ ドメインが contoso.onmicrosoft.com の場合は、contoso を使用します。 テナント サブドメインがない場合は、テナントの詳細を 読み取る方法について説明します。
• tenantId をディレクトリ (テナント) ID に置き換えます。 テナント ID がわからない場合は、テナントの詳細を読み取る方法を確認してください。

アプリを実行してテストする

これで、サンプル アプリを構成し、実行する準備ができました。

エイリアスまたはユーザー名を使用してサインインを有効にする

メール アドレスとパスワードを使用してサインインするユーザーも、ユーザー名とパスワードでサインインできます。 代替サインイン識別子とも呼ばれるユーザー名には、顧客 ID、アカウント番号、またはユーザー名として使用する別の識別子を指定できます。

Microsoft Entra 管理センターを使用してユーザー アカウントにユーザー名を手動で割り当てたり、Microsoft Graph API を使用してアプリで自動化したりできます。

「エイリアスまたはユーザー名を使用してサインインする」の記事の手順を使用して、ユーザーがアプリケーションでユーザー名を使用してサインインできるようにします。

1. サインインでユーザー名を有効にします。
2. 管理センターでユーザー名を持つユーザーを作成するか、ユーザー名 を 追加して既存のユーザーを更新します。 または、 Microsoft Graph API を使用して、アプリでのユーザーの作成と更新を自動化することもできます。

関連コンテンツ

• ネイティブ認証 SDK を使用してユーザーを認証する React シングルページ アプリを構築します。
• ネイティブ認証 SDK を使用してユーザーを認証する Angular シングルページ アプリを構築します。