Nuxt.js(v2) nuxt/auth(v5) で Azure Active Directory に OpenID でログインするまでのサンプル

# 概要
- 以下環境で OpenID を使ってログインするまでの手順を残す
    - Nuxt.js
        - v2
    - nuxt/auth
        - v5
        - https://auth.nuxtjs.org/
    - Azure Active Directory
        - 以下 AAD

# 手順
## AAD でアプリを作成
1. Azure のポータルにログイン
1. Azure Active Directory > アプリの登録 > +新規登録をクリック
1. 任意の名前とコールバックに `http://localhost:3000/callback` を指定して新規作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517184/5b1c5801-f3d7-d129-fdaa-a6ce6c4bc150.png)
1. アプリ画面に遷移するので、後で使用する情報をコピーしておく
    - クライアントID
    - OpenID Connect メタデータ ドキュメント
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517184/370da167-d7e9-d904-06f5-fc9c4ca6554d.png)
1. 認証を選択し、暗黙的な許可およびハイブリッド フローの IDトークンにチェックをして保存する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517184/d908d257-cee3-5a28-afd8-e42d38540245.png)
1. APIのアクセス許可 > アクセス許可の追加 > Microsoft Graph > 委任されたアクセス許可 を選択
1. openid をチェックし、アクセス許可の追加ボタンをクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517184/29df11fc-e3a2-f347-4bc7-d4e4f773d03b.png)
 
## Nuxt.js のプロジェクト作成
1. nuxt.js v2 のプロジェクトを新規作成する
1. axios をチェックし、Single Page App を選択。(他は任意)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517184/0fe4607a-bcb1-aece-1436-86fd3c3aa27f.png)

## nuxt/auth を使った設定と簡易実装
1. https://auth.nuxtjs.org/ に沿って設定を進めていく
1. モジュールを追加(v5)
    - `yarn add --exact @nuxtjs/auth-next`
    - v5 でモジュール名が変わりました
1. `nuxt.config.js` の modules を修正(@nuxtjs/auth-next を追加)
```
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth-next'
  ],
```
1. `nuxt.config.js` に auth の設定を追加
    - clientId と endpoints - configuration は AAD のアプリ作成時にコピーしておいてものを指定
```
  auth: {
    strategies: {
      AAD: {
        scheme: "openIDConnect",
        clientId: "<AADアプリのクライアントID>",
        endpoints: {
          configuration:
            "https://login.microsoftonline.com/<AADアプリのテナントID>/v2.0/.well-known/openid-configuration",
        },
        idToken: {
          property: "id_token",
          maxAge: 60 * 60 * 24 * 30,
          prefix: "_id_token.",
          expirationPrefix: "_id_token_expiration.",
        },
        responseType: "code",
        grantType: "authorization_code",
        scope: ["openid"],
        codeChallengeMethod: "S256",
      },
    },
    redirect: {
      login: "/",
      logout: "/logout",
      callback: "/callback",
      home: "/home",
    },
  },
```
1. デフォルトページにログインボタンを追加
    - `pages/index.vue` を修正
    ```vue
    <template>
      <div>
        <h2>ログイン</h2>
        <button @click="login">ログイン!</button>
      </div>
    </template>
    
    <script>
    export default {
      auth: false,
      methods: {
        login() {
          console.log("before login");
          this.$auth.loginWith("AAD");
        },
      },
    };
    </script>
    ```
1. コールバック受信用ページを作成
    - `pages/callback.vue` を新規作成
    ```vue
    <template>
      <div>
        <h2>コールバック</h2>
      </div>
    </template>
    
    <script>
    export default {};
    </script>
    ```
1. ログイン後のページを作成
    - `pages.home.vue` を新規作成
    ```vue
    <template>
      <div>
        <h2>ホーム</h2>
        <p>
          デベロッパーツールの Application - Local Storage
          でトークン等を確認できます
        </p>
      </div>
    </template>
    
    <script>
    export default {};
    </script>
    ```
1. アプリケーションを起動
    - `yarn dev`
1. ブラウザで http://localhost:3000 にアクセス
1. ログインボタンをクリック
1. AAD のログイン画面に遷移するのでログイン
1. アプリの許諾を聞かれるので承諾
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517184/0dbdf968-9849-eb48-8915-0c9ddea91731.png)
1. HTTP ERROR 431 が発生する場合
    - ヘッダーサイズが大きすぎ、デバッグ用の Web サーバでエラーになる
    - アプリケーション起動コマンドを実行するシェルで以下を実行(シェルに応じて環境変数設定方法は異なる)してから起動
        - コマンドプロンプトの場合
    ```
    set NODE_OPTIONS='--max-http-header-size=16384'
    yarn dev
    ```
1. /home に遷移するので、デベロッパーツールを起動して Application > Local Storage を確認する → 関連情報が格納されている
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517184/7c566f83-ec0a-9bf0-b9d0-a04e0ab1dc77.png)

# サンプルコード
- https://github.com/Yoshihiro-Hirose/nuxt-auth-openid-sample