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 のポータルにログイン
2. Azure Active Directory > アプリの登録 > +新規登録をクリック
3. 任意の名前とコールバックに http://localhost:3000/callback を指定して新規作成
   
4. アプリ画面に遷移するので、後で使用する情報をコピーしておく
   • クライアントID
   • OpenID Connect メタデータ ドキュメント
     
5. 認証を選択し、暗黙的な許可およびハイブリッド フローの IDトークンにチェックをして保存する
   
6. APIのアクセス許可 > アクセス許可の追加 > Microsoft Graph > 委任されたアクセス許可 を選択
7. openid をチェックし、アクセス許可の追加ボタンをクリック。
   

Nuxt.js のプロジェクト作成

1. nuxt.js v2 のプロジェクトを新規作成する
2. axios をチェックし、Single Page App を選択。(他は任意)
   

nuxt/auth を使った設定と簡易実装

1. https://auth.nuxtjs.org/ に沿って設定を進めていく
2. モジュールを追加(v5)
   • yarn add --exact @nuxtjs/auth-next
   • v5 でモジュール名が変わりました
3. 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 を修正

   <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>
   

2. コールバック受信用ページを作成
   • pages/callback.vue を新規作成

   <template>
     <div>
       <h2>コールバック</h2>
     </div>
   </template>
   
   <script>
   export default {};
   </script>
   

3. ログイン後のページを作成
   • pages.home.vue を新規作成

   <template>
     <div>
       <h2>ホーム</h2>
       <p>
         デベロッパーツールの Application - Local Storage
         でトークン等を確認できます
       </p>
     </div>
   </template>
   
   <script>
   export default {};
   </script>
   

4. アプリケーションを起動
   • yarn dev
5. ブラウザで http://localhost:3000 にアクセス
6. ログインボタンをクリック
7. AAD のログイン画面に遷移するのでログイン
8. アプリの許諾を聞かれるので承諾
   
9. HTTP ERROR 431 が発生する場合
   • ヘッダーサイズが大きすぎ、デバッグ用の Web サーバでエラーになる
   • アプリケーション起動コマンドを実行するシェルで以下を実行(シェルに応じて環境変数設定方法は異なる)してから起動
     • コマンドプロンプトの場合

   set NODE_OPTIONS='--max-http-header-size=16384'
   yarn dev
   

10. /home に遷移するので、デベロッパーツールを起動して Application > Local Storage を確認する → 関連情報が格納されている
    

サンプルコード

• https://github.com/Yoshihiro-Hirose/nuxt-auth-openid-sample