【Azure】ReactSPAからAzureADに対して認証し、WebAPI呼び出しのためのアクセストークンを取得する方法（Windows 10）

## 概要
　React SPA内でAzure Active Directoryに対して認証し、アクセストークンを取得する方法を確認した。
　その際の手順を自分用にメモ。

　主に下記記事を参考に調査をした。
　[クイックスタート: 認可コード フローを使用して React SPA 内でユーザーをサインインさせ、アクセス トークンを取得する](https://docs.microsoft.com/ja-jp/azure/active-directory/develop/quickstart-v2-javascript-auth-code-react)


## 参考
 
#####1. Azure Active Directoryについて

　作成したReactSPAを、AzureADに登録し、アプリケーションでサインインしたときの認証ができるようにする。
　Azure側と、アプリケーション側双方での設定が必要になる。
　[Azure Active Directory とは](https://docs.microsoft.com/ja-jp/azure/active-directory/fundamentals/active-directory-whatis)

#####2. Web APIを呼び出すためのアクセストークンについて
* Web APIを呼び出すために、APIを呼び出す権限があるかどうかを判断する。  
リクエストにアクセストークンという、権限確認のための情報を載せて送ることで、呼び先がこのアクセストークンを確認し、承認するという仕組み。

　[一番分かりやすい OAuth の説明](https://qiita.com/TakahikoKawasaki/items/e37caf50776e00e733be)

* Azureではアクセストークンを取得する方法は、Azureにログインして取得する方法と、ReactSPAから取得する方法の２通りがある。  
(今回はReactSPAから取得する方法)

　[AzureでAccessTokenを取得する方法](https://blog.kokoni.jp/entry/2018/10/08/azure%25e3%2581%25a7accesstoken%25e3%2582%2592%25e5%258f%2596%25e5%25be%2597%25e3%2581%2599%25e3%2582%258b%25e6%2596%25b9%25e6%25b3%2595/)

## 手順

1. Azure側の設定（アプリケーションの登録）

2. プロジェクトのダウンロード

3. アプリ側の設定（構成ファイルの編集）

4. プロジェクトを実行する


### 1. Azure側の設定（アプリケーションの登録）

(1) Azure portalの `Azure Active Directory`で、`アプリの登録` → `＋ 新規登録`を選択する。
`[Azure Active Directory] > [アプリの登録] > [新規登録]`

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677125/39a6f6d9-015a-a0f6-b803-f4bdaa9c21de.png)



(2)`アプリケーションの登録` ページが表示されたら、アプリケーションの名前を入力する。
　他の項目は変更なし。

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677125/cbb3e5c2-85dc-3638-7acf-57819735cc6d.png)


(3)`管理` で、 `認証` を選択し、`プラットフォーム構成` で `プラットフォームを追加` を選択する。
`[Azure Active Directory] > [管理] > [認証]`

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677125/30947371-193d-d5ed-14ab-1847477b05e6.png)



(4) 表示されたウィンドウで `シングルページ アプリケーション` を選択する。

![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677125/92b242d1-6fea-c582-8b6c-369c34a0476f.png)


(4)`リダイレクト URI` の値を http://localhost:3000/ に設定する。

　このURIは、NodeJS がローカル コンピューターでリッスン(※)する既定のポート。
　ユーザー認証が成功すると、この URI に認証応答が返される。


> ※ リッスン  
> 通信機能を持つソフトウェアが、外部からのアクセスに備えて待機することをこのように呼ぶ。

　`構成` を選択して変更を適用する。

![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677125/f2e077fe-8054-ca49-133b-ff8c75ed654c.png)


(5)`プラットフォーム構成` の `シングルページ アプリケーション` を展開する。
`許可の種類` が構成済みで、自分のリダイレクト URI が PKCE を使用した認可コード フローの対象になっていることを確認する。

![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677125/8436e2d5-3099-d612-0867-6129756d2687.png)


### 2. サンプルコードのダウンロード
下記URLの手順２から、サンプルコードをダウンロードする。

https://docs.microsoft.com/ja-jp/azure/active-directory/develop/quickstart-v2-javascript-auth-code-react


### 3. アプリ側の設定（構成ファイルの編集）
ダウンロードしたサンプルコードを開く。  
`src`フォルダ内の`authConfig.js`ファイルを開き、`msalConfig`オブジェクトの `clientID`、`authority`、`redirectUri`の値を更新する。

```javascript

export const msalConfig = {
   auth: {
       clientId: "Enter_the_Application_Id_Here",
       authority: "Enter_the_Cloud_Instance_Id_HereEnter_the_Tenant_Info_Here", 
       redirectUri: "Enter_the_Redirect_Uri_Here" 
   },
   cache: {
       cacheLocation: "sessionStorage", // 変更なし
       storeAuthStateInCookie: false, // 変更なし
   },

```

(1)`Enter_the_Application_Id_Here` は、登録したアプリケーションの アプリケーション (クライアント) ID を入力する。  
`[Azure Active Directory] > [アプリの登録] > [アプリケーション名] > [概要]`

![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677125/1c9c3ece-214f-b780-722b-9c4692a8615b.png)


(2)`Enter_the_Cloud_Instance_Id_Here` は、「https://login.microsoftonline.com/」と入力する。

(3)`Enter_the_Tenant_info_here` には、テナントIDを入力する。  
`[Azure Active Directory] > [アプリの登録] > [アプリケーション名] > [概要]`

![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677125/c37edfba-6eb8-0d73-f23b-d194ff01d230.png)

(4)Enter_the_Redirect_Uri_Hereには http://localhost:3000/ と入力する。

(5)同ファイル内で下へスクロールし、graphMeEndpoint を更新する。  
　Enter_the_Graph_Endpoint_Herev1.0/me を https://graph.microsoft.com/v1.0/meに置き換える。(Microsoft Graph API 用 URI)

### 4. 実行
(1)サンプルコードを入れたディレクトリ内から、次のコマンドを実行する。

```shell

npm install
npm start

```

(2)http://localhost:3000/ を開く。

(3)`サインイン`を選択する。

　初回サインイン時に、自分のプロファイルにアプリケーションがアクセスして自分をサインインさせることについて同意を求められる。  
　正常にサインインした後、 `Request Profile Information`をクリックして、自分のプロファイル情報をページに表示する。

　正常に動作していれば、MicroSoftIDプラットフォームから、WebAPIを呼び出すためのアクセストークンが取得できている。


##### イメージ図（公式）
![ReactSPA トークン取得1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677125/19a0f1ca-ad07-dbf4-d0ff-53ec73bf5e6d.png)