クイック スタート: Azure Active Directory B2C を使用してシングルページ アプリのサインインを設定する

Azure Active Directory B2C (Azure AD B2C) は、アプリケーション、ビジネス、顧客を保護するためのクラウド ID 管理を提供します。 Azure AD B2C を使用すると、アプリケーションはオープン標準プロトコルを使用してソーシャル アカウントとエンタープライズ アカウントに対して認証できます。

このクイック スタートでは、シングルページ アプリケーションを使用してソーシャル ID プロバイダーを使用してサインインし、Azure AD B2C で保護された Web API を呼び出します。

[前提条件]

• Visual Studio Code

• Node.js

• Facebook、Google、または Microsoft のソーシャル アカウント

• GitHub のコード サンプル: ms-identity-b2c-javascript-spa:

  zip アーカイブをダウンロードするか、リポジトリを複製できます

  git clone https://github.com/Azure-Samples/ms-identity-b2c-javascript-spa.git
  

アプリケーションを実行する

1. Node.js コマンド・プロンプトから次のコマンドを実行して、サーバーを起動します。

   npm install
   npm update
   npm start
   

   server.js によって起動されたサーバは、待機しているポートを表示します。

   Listening on port 6420...
   

2. アプリケーションの URL を参照します。 たとえば、http://localhost:6420 のようにします。

アカウントを使用してサインインする

1. [ サインイン] を選択してユーザー体験を開始します。

2. Azure AD B2C では、サンプル Web アプリケーション用の "Fabrikam" という架空の会社のサインイン ページが表示されます。 ソーシャル ID プロバイダーを使用してサインアップするには、使用する ID プロバイダーのボタンを選択します。

   

   ソーシャル アカウントの資格情報を使用して認証 (サインイン) し、ソーシャル アカウントから情報を読み取るアプリケーションを承認します。 アクセス権を付与することで、アプリケーションは自分の名前や市区町村などのソーシャル アカウントからプロファイル情報を取得できます。

3. ID プロバイダーのサインイン プロセスを完了します。

保護された API リソースにアクセスする

Web API から表示名を JSON オブジェクトとして返すには、[ API の呼び出し ] を選択します。

サンプルのシングルページ アプリケーションには、保護された Web API リソースへの要求にアクセス トークンが含まれています。

次のステップ

• Azure portal で独自の Azure Active Directory B2C テナントの作成を開始する