クイックスタート: 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 リソースにアクセスする

[Call API](API の呼び出し) を選択すると、Web API から表示名が JSON オブジェクトとして返されます。

このシングルページ アプリケーション サンプルは、保護された Web API リソースへの要求にアクセス トークンを追加します。

次のステップ

• Azure portal で Azure Active Directory B2C テナントの作成を開始します。