はじめに（背景)

Office365を導入して、数年が経ちました。
皆様が慣れてきて、そろそろ、Office365とのシングルサインをすれば、便利になるんじゃない！！との声が出来てきました。そして、上司から、"Single Sign On よろしく！"との恐ろしい声がかかりました。

確かにIDaaSとしてのAzure ADは既に稼働しているので、後は、連携するアプリケーションの準備が出来れば可能ですが、、、このオンプレWebアプリケーションとIDaaSとのSSOは敷居が高い。

なぜなら、アプリケーション側でSAML/OpenIDConnect/OAuthとおしゃべりができないので、改修が必須となる。そこで、Microsoft ID プラットフォームを使えば、ライブラリが提供されているので、これをうまく活用すれば、SSOの敷居が少しでも低くるなると考え、検証を開始致しました。

Microsoft ID プラットフォーム

『Microsoft ID プラットフォーム (旧称: 開発者向け Azure Active Directory)』

Microsoft ID プラットフォームは、Azure Active Directory (Azure AD) 開発者プラットフォームの進化版です。これにより、すべての Microsoft ID にサインインして、Microsoft API (Microsoft Graph) や開発者が構築した API を呼び出すためのトークンを取得するアプリケーションを開発者が構築できます。これはフル機能を備えたプラットフォームであり、OAuth 2.0 および OpenID Connect 標準に準拠した認証サービス、オープンソースライブラリ、アプリケーションの登録および構成、充実した概念とリファレンスのドキュメント、クイックスタートサンプル、コードサンプル、チュートリアル、攻略ガイドによって構成されています。

ふむふむ。確かにサンプルコードがあるので、できそうかも。。。

いざトライ！！

###1.参照ページ

『クイックスタート:JavaScript SPA 内でユーザーをサインインさせ、アクセストークンを取得する』
https://docs.microsoft.com/ja-jp/azure/active-directory/develop/quickstart-v2-javascript

###2.登場人物

1.Identity Provider (Azure AD)

オンマイクロソフトアカウントを使います。
2.Relying Party (JavaScript Single Application)
　* Node.js (事前の準備をお願い致します。インストール方法は割愛させて頂きます)
サンプルコード (以降の手順でダウンロード致します。)
3.Web API (Microsoft Graph API)
サインインのユーザー情報取得に使います。

###3.手順

####◆手順 1:アプリケーションの登録

1.Azure portal(https://portal.azure.com) にサインインします。

2.[ホーム]-> [Azure AD Active Directory] -> [アプリの登録]へ進む。

3.[新規登録] をクリックします。

4.アプリケーション登録で下記項目を選択して、[登録]をクリック。
(1).名前欄：任意のアプリケーション名を入力
(2).サポートされているアカントの種類：この組織ディレクトリのみに含まれるアカウント
(3).リダイレクトURL：空白　=> (後ほど、入力されます。)

5.登録したアプリケーションが表示されますので、[クイックスタート]をクリック。

6.シングルページアプリケーションの[JavaScript]をクリック。

7.[これらの変更を行います]をクリック

8.下記構成内容が表示されますので、[更新する]をクリック。
(1).リダイレクト URI : http://localhost:30662
(2).アクセストークン・IDトークン：Ture
*上記トークンは、インプリシットフローで利用するトークンとなります。

*下記の[認証]画面から構成の反映を確認可能です。

####◆手順 2:プロジェクトのダウンロード

1.Node.js を使用して Web サーバーでプロジェクトを実行致しますので、コアプロジェクトファイルをダウンロードします。

コアプロジェクトファイル：active-directory-javascript-graphapi-v2-quickstart.zip

2.ダウンロードした zip ファイルを任意のフォルダに解凍致します。
下記は、[C:\tmp\active-directory-javascript-graphapi-v2-quickstart]の例となります。

####◆手順 3:JavaScript アプリの構成

1.任意のフォルダに解凍したファイルの中のJavaScriptSPAフォルダーのindex.html を編集し、msalConfig を置き換えます。


const msalConfig = {
    auth: {
        clientId: "5c1e11c4-4d6d-4396-be85-c3f435dd3ada",
        authority: "https://login.microsoftonline.com/a94216cd-7c42-4b24-8ba0-ce5c210951bd",
        redirectURI: "http://localhost:30662/"
    },
    cache: {
        cacheLocation: "localStorage",
        storeAuthStateInCookie: true
    }
};

*実際の値はお客様環境により異なりますので、適宜編集をお願い致します。
*クイックスタート画面では、varで案内されておりますが、プロジェクトファイルは、constとなっております。どちらも変数を宣言することに変わりはないので、続きの手順は、constで進んでおります。

####◆手順 4:プロジェクトを実行する

1.[スタート]-> [Node.js]->[Node.js command prompt]の順にクリックします。

2.active-directory-javascript-graphapi-v2-quickstart ディレクトリで、以下コマンドを実行し、30662のportを起動します。

npm install
node server.js

####◆手順5: サインイン

認証の流れを確認する為に、Fiddler でパケットを取得!!
暗黙的な許可のフローを確認

https://docs.microsoft.com/ja-jp/azure/active-directory/develop/v2-oauth2-implicit-grant-flow

*ダウンロードしたコアプロジェクトサンプルの仕組み

msal.js
MSAL ライブラリは、ユーザーをサインインさせ、Microsoft ID プラットフォームによって保護された API へのアクセスに使用されるトークンを要求します。クイックスタートの index.html ファイルにはこのライブラリへの参照が含まれています。"https://secure.aadcdn.microsoftonline-p.com/lib/1.0.0/js/msal.min.js"

(1).http://localhost:30662/ へアクセスして[Sign In]をクリック

(2).認可エンドポイント(/oauth2/v2.0/authorize)へリダイレクト

GET https://login.microsoftonline.com/a94216cd-7c42-4b24-8ba0-ce5c210951bd/oauth2/v2.0/authorize?response_type=id_token
&scope=user.read openid profile
&client_id=5c1e11c4-4d6d-4396-be85-c3f435dd3ada
&redirect_uri=http://localhost:30662/
&state=89bf09ea-d9bd-417c-92ff-81f30d1ab6a2
&nonce=011779c1-154d-4d05-85fd-374a2af4e1c1
&client_info=1
&x-client-SKU=MSAL.JS
&x-client-Ver=1.0.0
&client-request-id=cb77df46-36b4-4395-b926-7e39d87cc31f
&response_mode=fragment
&sso_reload=true HTTP/1.1
Referer: https://login.microsoftonline.com/a94216cd-7c42-4b24-8ba0-ce5c210951bd/oauth2/v2.0/authorize?

(3).ログイン画面が表示され、ユーザー名とパスワードを入力

(4).要求されているアクセス許可を問われるので、[承諾]をクリック。

(5).[承諾]を行うとアクセストークンと IDトークンがユーザー宛に発行されます。

★ID Token

http://localhost:30662/#id_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6IkhsQzBSMTJza3hOWjFXUXdtak9GXzZ0X3RERSJ9.eyJhdWQiOiI1YzFlMTFjNC00ZDZkLTQzOTYtYmU4NS1jM2Y0MzVkZDNhZGEiLCJpc3MiOiJodHRwczovL2xvZ2luLm1pY3Jvc29mdG9ubGluZS5jb20vYTk0MjE2Y2QtN2M0Mi00YjI0LThiYTAtY2U1YzIxMDk1MWJkL3YyLjAiLCJpYXQiOjE1ODA5NjI2NDEsIm5iZiI6MTU4MDk2MjY0MSwiZXhwIjoxNTgwOTY2NTQxLCJhaW8iOiJBVFFBeS84T0FBQUFUQ3cxOGFMeXhGRmlCVDU4SW1FY0xiR2dPaDE1V201VmdtV210bk5DNG44Q1JEYkRla24xdDh1YzZTK0hqY2ptIiwibmFtZSI6InRlc3QxIiwibm9uY2UiOiIwMTE3NzljMS0xNTRkLTRkMDUtODVmZC0zNzRhMmFmNGUxYzEiLCJvaWQiOiJkY2Y2OWI3ZS0yYzY3LTQ2NTgtODVhYy1kYzAxYWVjODcxMmYiLCJwcmVmZXJyZWRfdXNlcm5hbWUiOiJ0ZXN0MUBnaW52aXRhdGlvbjFvdXRsb29rLm9ubWljcm9zb2Z0LmNvbSIsInN1YiI6IkRYb0dhMmJGY0IwOUFCOXlUNWZ2MkVsaUNvZGVsRmxMQXFtWVRuUDBnUnciLCJ0aWQiOiJhOTQyMTZjZC03YzQyLTRiMjQtOGJhMC1jZTVjMjEwOTUxYmQiLCJ1dGkiOiJYOF9FOVBEcTBFbTlfV1RfNHpVZEFBIiwidmVyIjoiMi4wIn0.GRxmgmbGjh21mIt6KtV5YU8AWQBKBPaV6tLE-v2sbt0jSNhGUbvHnAsyiNjGEspz5FdVjt6iZYh_YfSKC-k1TJ0KT8oalHgpWtGHyy7iQAW5W8d_Vk2IxZXgL6uQkCEMmouHtB6aXqT-HGnInmwNWYPUvOLltb2aV4cfhvYuS5qItPow_99cfgqcEUJ7554TqlITpxivsC9Pk8bj1wb1mmosu16UiJnQuj6gkDcTkSqppZGtfUqtyGukj6O_GmLCL7zmS5Dj_YiiehEAtOb19lHQhT9YcISuv_MfHeMmD8GO-hMS77cMrBBcI53SwuPFdzIM6oqHKItiMOFmYtMaBw&client_info=eyJ1aWQiOiJkY2Y2OWI3ZS0yYzY3LTQ2NTgtODVhYy1kYzAxYWVjODcxMmYiLCJ1dGlkIjoiYTk0MjE2Y2QtN2M0Mi00YjI0LThiYTAtY2U1YzIxMDk1MWJkIn0&state=89bf09ea-d9bd-417c-92ff-81f30d1ab6a2&session_state=696af646-afd2-4dd9-b8ca-444174edb797

上記IDトークンをコピーして、https://jwt.io へ貼り付けると、ヘッダー、ペイロード、署名が確認できます。

(6).リダイレクトURIに遷移してaccess_tokenを送付。

★access_token

http://localhost:30662/#access_token=eyJ0eXAiOiJKV1QiLCJub25jZSI6Ill5QVpZTExvdDBQdE1mWUJoN1hKd2hHNHJGZUZmY1IxN3IwNU4zZGpoVTQiLCJhbGciOiJSUzI1NiIsIng1dCI6IkhsQzBSMTJza3hOWjFXUXdtak9GXzZ0X3RERSIsImtpZCI6IkhsQzBSMTJza3hOWjFXUXdtak9GXzZ0X3RERSJ9.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTAwMDAtYzAwMC0wMDAwMDAwMDAwMDAiLCJpc3MiOiJodHRwczovL3N0cy53aW5kb3dzLm5ldC9hOTQyMTZjZC03YzQyLTRiMjQtOGJhMC1jZTVjMjEwOTUxYmQvIiwiaWF0IjoxNTgwOTYyNjQzLCJuYmYiOjE1ODA5NjI2NDMsImV4cCI6MTU4MDk2NjU0MywiYWNjdCI6MCwiYWNyIjoiMSIsImFpbyI6IkFTUUEyLzhPQUFBQVVOMFprMkwyZnJkZ1k4UlZrdnowbmZxRnFzRUM0MVkzK1NUR1htWkFYYmM9IiwiYW1yIjpbInB3ZCJdLCJhcHBfZGlzcGxheW5hbWUiOiJTUEEtTm9kZS5qcyIsImFwcGlkIjoiNWMxZTExYzQtNGQ2ZC00Mzk2LWJlODUtYzNmNDM1ZGQzYWRhIiwiYXBwaWRhY3IiOiIwIiwiZmFtaWx5X25hbWUiOiIxIiwiZ2l2ZW5fbmFtZSI6InRlc3QiLCJpcGFkZHIiOiIyMTAuMTMwLjI0MS45NyIsIm5hbWUiOiJ0ZXN0MSIsIm9pZCI6ImRjZjY5YjdlLTJjNjctNDY1OC04NWFjLWRjMDFhZWM4NzEyZiIsInBsYXRmIjoiMyIsInB1aWQiOiIxMDAzMjAwMDk3MEJCRTZDIiwic2NwIjoib3BlbmlkIHByb2ZpbGUgVXNlci5SZWFkIGVtYWlsIiwic3ViIjoiSG1IT1FCOEx0SUhQOS1kREFxTUFUdlA0MjVQRjBMR0JYQTFwS2hLbUlmQSIsInRpZCI6ImE5NDIxNmNkLTdjNDItNGIyNC04YmEwLWNlNWMyMTA5NTFiZCIsInVuaXF1ZV9uYW1lIjoidGVzdDFAZ2ludml0YXRpb24xb3V0bG9vay5vbm1pY3Jvc29mdC5jb20iLCJ1cG4iOiJ0ZXN0MUBnaW52aXRhdGlvbjFvdXRsb29rLm9ubWljcm9zb2Z0LmNvbSIsInV0aSI6ImthaTdkNHM1bkVpVDBwMDRNTWNiQUEiLCJ2ZXIiOiIxLjAiLCJ4bXNfc3QiOnsic3ViIjoiRFhvR2EyYkZjQjA5QUI5eVQ1ZnYyRWxpQ29kZWxGbExBcW1ZVG5QMGdSdyJ9LCJ4bXNfdGNkdCI6MTU1MjYzMjMwOH0.o_OGDeyUJB_oB6rKtW4MjFPWCQCkJ1TsKNuVQ3njoZ_jXUMVcPzcH_PHN6P5r1Yh8Y-eFidoTTppvMSMZUUhVoUpojDTq0XA78o57nsSKLNPDYbQ0Mzgz_43Ur-SgHB_H0h3xp64fHzwXBceVKSSpwegacgkPaIleT_kBgNrArzmwrPQCOB2DReZck15TeIZUr3vhw2bINkH16hvuZ8RDyVjNFy6YsMQ7OUhGows3iQCKmdBKfwn_wuAiIuvX4Wl0G5_JaBlc25xdoVrQEdtk3rHAeOnA4qHFwTn56PqmpRQ3rgEXIO9-PcN8890-_F3Ot7-iOb-GrD914xAlCsUfA
&token_type=Bearer
&expires_in=3599
&scope=openid+profile+User.Read+email
&client_info=eyJ1aWQiOiJkY2Y2OWI3ZS0yYzY3LTQ2NTgtODVhYy1kYzAxYWVjODcxMmYiLCJ1dGlkIjoiYTk0MjE2Y2QtN2M0Mi00YjI0LThiYTAtY2U1YzIxMDk1MWJkIn0
&state=ac5bb0ca-a243-4146-afd6-d23f87ac9ede
&session_state=696af646-afd2-4dd9-b8ca-444174edb797

(7).トークンを公開鍵を使って検証致します。
(8).認証が完了。

まとめ

Quick startを使うことにより、サインインまでの確認は、さほど、時間はかかりませんでしたが、トークンの確認に時間を要しました。

恐るべしOpen ID connect !!

次回は、Visual Studioを使ったSPAの検証を予定しております。

最後に、私の記事が少しでも、皆様の役に立てれば幸いでございます。