ホーム

SPA × MSAL.jsサンプルアプリでAzure AD B2Cの認証機能を利用する

導入

本記事では、Azureがサンプルとして公開しているSPA × MSAL.jsのサンプルアプリを使って、Azure AD B2Cの認証機能を試してみようかと思います。

このアプリケーションはAzure AD B2Cの登録/設定不要で認証機能を利用できるようになっています。

目次

  1. MSAL.jsとは
  2. サンプルアプリケーションの設定
  3. アプリケーションを起動する
  4. ログインする
  5. APIをcallする
  6. シーケンス図(概要)

MSAL.jsとは

MSAL.jsとは、Microsoft Authentication Library for JavaScriptの略で、Azureの認証機能を使う機能を簡易的に実装できるライブラリです。

サンプルアプリケーションの設定

はじめにgitからプロジェクトをクローンします。
コマンドプロンプト/ターミナルにて以下コマンドを実行してください。

git clone https://github.com/Azure-Samples/active-directory-b2c-javascript-msal-singlepageapp.git

クローンできたら、プロジェクトフォルダに移動して、npm installを実行し、ライブラリ周りをインストールします。

npm install && npm update

実行ログは以下のようになりました。
これだけで準備は完了です。

rui@ruinoMacBook-Pro works % git clone https://github.com/Azure-Samples/active-directory-b2c-javascript-msal-singlepageapp.git
Cloning into 'active-directory-b2c-javascript-msal-singlepageapp'...
remote: Enumerating objects: 93, done.
remote: Counting objects: 100% (93/93), done.
remote: Compressing objects: 100% (62/62), done.
remote: Total 457 (delta 53), reused 60 (delta 31), pack-reused 364
Receiving objects: 100% (457/457), 561.79 KiB | 80.00 KiB/s, done.
Resolving deltas: 100% (272/272), done.
rui@ruinoMacBook-Pro works % 
rui@ruinoMacBook-Pro works % cd active-directory-b2c-javascript-msal-singlepageapp 
rui@ruinoMacBook-Pro active-directory-b2c-javascript-msal-singlepageapp % 
rui@ruinoMacBook-Pro active-directory-b2c-javascript-msal-singlepageapp % npm install && npm update

> nodemon@2.0.4 postinstall /Users/rui/works/active-directory-b2c-javascript-msal-singlepageapp/node_modules/nodemon
> node bin/postinstall || exit 0

added 172 packages from 90 contributors and audited 172 packages in 9.432s

8 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

+ morgan@1.10.0
added 1 package from 1 contributor, updated 1 package and audited 173 packages in 2.106s

8 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

rui@ruinoMacBook-Pro active-directory-b2c-javascript-msal-singlepageapp % 

アプリケーションを起動する

では、npm startでアプリケーションを起動します。

rui@ruinoMacBook-Pro active-directory-b2c-javascript-msal-singlepageapp % npm start

> active-directory-b2c-javascript-msal-singlepageapp@1.1.0 start /Users/rui/works/active-directory-b2c-javascript-msal-singlepageapp
> node server.js

Listening on port 6420...

上記のように「Listening on port 6420…」と表示されたら、 http://localhost:6420/ にアクセスしてください。
以下のような画面が表示されたら動作確認は完了です。
ScreenShot 2020-09-18 22.16.12.png

ログインする

右上の「サインイン」ボタンを押下すると、別タブでログイン画面が開きますので、任意のアカウントでログインします。
ここではGoogleアカウントでログインします。
ScreenShot 2020-09-18 22.25.35.png

アカウントを選択します。
ScreenShot 2020-09-18 22.25.48.png

ログインが成功すると、「Hello ユーザ名」と表示されます。
ScreenShot 2020-09-18 22.25.56.png

APIをcallする

このサンプルでは既にAPIが登録されているので、アプリから呼ぶことができます。
「Call API」を押下してください。
再度ログイン画面が開くので、同様にログインすると、トップページの表示が更新されます。 ScreenShot 2020-09-18 22.26.48.png

ここでどのようなAPIがcallされているか確認してみます。

[Chromeの開発者ツール] -> [ネットワークタブ] を開いたら、再度「Call API」を押下します。

[ネットワークタブ] を見ると、名前がhello、typeがfetchという通信があります。
この通信の詳細を見ていくと、以下のエンドポイントにアクセスしています。
また、authorizationヘッダーにアクセストークンを設定しているのがわかります。
このアクセストークンは、事前にAzure AD B2Cで払い出されたもので、これを利用するAPIにアクセスすることができています。
ScreenShot 2020-09-18 22.46.33.png

APIのエンドポイント

https://fabrikamb2chello.azurewebsites.net/hello

アクセストークン

authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6Ilg1ZVhrNHh5b2pORnVtMWtsMll0djhkbE5QNC1jNTdkTzZRR1RWQndhTmsifQ.eyJpc3MiOiJodHRwczovL2ZhYnJpa2FtYjJjLmIyY2xvZ2luLmNvbS83NzU1MjdmZi05YTM3LTQzMDctOGIzZC1jYzMxMWY1OGQ5MjUvdjIuMC8iLCJleHAiOjE2MDA0NDAwMTQsIm5iZiI6MTYwMDQzNjQxNCwiYXVkIjoiOTM3MzM2MDQtY2M3Ny00YTNjLWE2MDQtODcwODRkZDU1MzQ4IiwiZ2l2ZW5fbmFtZSI6IlIiLCJmYW1pbHlfbmFtZSI6IkkiLCJuYW1lIjoiUiBJIiwiaWRwIjoiZ29vZ2xlLmNvbSIsIm9pZCI6IjYxY2FmNDNiLTVmZTMtNDIxNi1hYWE2LWRhNmVhM2ViM2VhYiIsInN1YiI6IjYxY2FmNDNiLTVmZTMtNDIxNi1hYWE2LWRhNmVhM2ViM2VhYiIsImVtYWlscyI6WyJydWkuaXNoaWthd2EuYnVzaW5lc3NAZ21haWwuY29tIl0sIm5vbmNlIjoiZmUwYTk0ZGQtZGI5Ny00YjdlLWFjMjYtODUzODFlNTk3NGRiIiwic2NwIjoiZGVtby5yZWFkIiwiYXpwIjoiZTc2MGNhYjItYjlhMS00YzBkLTg2ZmItZmY3MDg0YWJkOTAyIiwidmVyIjoiMS4wIiwiaWF0IjoxNjAwNDM2NDE0fQ.d-o4iOOeXynbgQZN1w5VBHeU1avGieAhEjT1qsXTXhtVY0jkHzyze5PTOqEuIxEj8l_B2u9dUI61aCHusRHLqycg-sz2CqvS2JLNbzVPdGT9qiZS9vDrP-UH2fvIpKBTzVkeSNe7vZRysuYhAblWN0TsMLSEE8IuPh4lq5Jy5uQNuQnuz_ppfYxaS-2zoLhl0XJOW5DtN9F3kS0YXPAS5m9yx26kSRpfideppLOH7XkhSAcN5LyMePrRDO1bTQZWrz_aiUReT0UJ9n3TO0Ec5g-9relMOz0nK-V8aIVQ4tmatMfvHz6LenAFxuCS8mQf658u-OZXzrMx9KzbIMnQ0A

シーケンス図(概要)

ここまでの処理を大まかに見ていくと以下のようなフローとなります。

UserUserSPASPAAzure AD B2CAzure AD B2CGoogleGoogleリソースサーバリソースサーバhttp://localhost:6420/にアクセストップページ表示「Sign In」押下ページ遷移ログイン画面表示「Google」押下ページ遷移Googleログイン画面表示アカウント選択認証処理レスポンス認証処理レスポンスログイン後画面表示「Call API」を押下リクエストユーザ情報をレスポンスユーザ情報を画面に表示

詳細のシーケンス図については後日紹介したいと思います。
Azure AD B2Cの設定不要で動作確認できるので、初心者の方にもおすすめです。

ぜひ試してみてください。