次はAzure AD B 2 C認証の設定方法.js

次のAzure B 2 Cによる認証の設定JSは特に直接的なプロセスではない.Nextauthを使用してこれを容易にする方法を見ていきます.JSライブラリー.

Azure B 2 Cと次の認証js

認証Next.js 少なくとも、私にとっては、少なからぬ問題、特に開発要件が100 %固化されていない場合.クライアントとサーバー(環境)の両方の環境にアクセスできますので、サーバー上で純粋に認証を処理することができます.
Azure B 2 Cで認証を設定するタスクを追加し、合併症が複雑です.Azure AD B 2 Cは、多くのことですが、まっすぐ進むのは、私が見つけた限りでは、それらのうちの1つではありません.
注意してくださいAzure AD B2C と同じことではないAzure AD . Azure AD B 2 C(ここでAzure B 2 Cとも呼ばれます)は、顧客に直面しているアプリケーションのために、アイデンティティとアクセス管理解決です.

nextauthを入力します。js

NextAuth.js 次の認証を行うフレームワークです.JS(比較的)シンプルで無痛のプロセス.最初の設定値を設定した後に重いリフティングは、次のダイナミックルートを介して行われます.jsそこから、設定＆クライアントとサーバーの両方のセッションをチェックする柔軟性があります.

ネクサス＋アジュールB 2 C

しかし、NexTauthでの認証のためのAzure B 2 Cの設定は、まだ少しのプロセスです.これは、いくつかの初期設定＆設定Azureポータルだけでなく、カスタムの設定をnextauthが必要です.
この記事で私の目標は、次の最小限の認証設定を作成するために必要な手順のすべてを詳細にすることです.Azure B 2 CとNextauthを用いたJSJSは、特に私が使用しているnextauth設定ファイルを共有する.私は、仕事Azure B 2 Cの次に深く潜んでいません.JSまたはNextauth.

必要な手順

Example Repository

Set up Azure B2C

Create a Next.js App

Test the NextAuth Signin

Add Signout Functionality

リポジトリ

実装に直接行きたい場合はtake a look at the repository 完全なコードについてはthe initial diff to create basic working authentication , だけでなくthe diff to add signout functionality .

azure B 2 Cの設定

サブスクリプションとAzure広告

これはおそらくプロセスの最も複雑な部分です.あなたがここにいるので、あなたはすでにAzureサブスクリプションにアクセスできると仮定します.おそらくAzure広告B 2 Cテナント.
しかし、それらの1つまたは他の場合はyou will have to start here , あなたは1つを持っていない場合は、サブスクリプションを作成するプロセスを介して歩いていくだろうし、HTE Azure広告B 2 Cテナントを作成するプロセスを介して.

Pay special attention to the Initial domain name you create, which you will use in a later step for NextAuth configuration.

アプリケーション登録

次はanother walkthrough from Microsoft detailing how to create an App Registration . あなたのAzure B 2 Cテナント内に住んでいるこのアプリの登録は、ユーザーと課題トークンを認証する権限になります.

Pay special attention to the Client ID & Client Secret you create, which you will use in a later step for NextAuth configuration.

追加リダイレクトURIを追加する

アプリケーション登録の認証セクションに戻って、nextauthで使用される2つの追加リダイレクトURIを追加します.

http://localhost:3000/api/auth/callback/azureb2c
http://localhost:3000/auth/signout

Also make sure you checked the two checkboxes under 'Implicit grant'

ユーザーフローの作成

……one more walkthrough from Microsoft on creating the User Flow . ユーザーフローは、ユーザーがサインアップ、signin、プロファイル編集、およびパスワードのリセットのために使用する管理インターフェイスです.

Note that you may want to add additional properties to be either collected or returned from the user flow!

基本的な事前に生成されたユーザーフローが開始するのに十分ですが、必要に応じてユーザーフローを完全に登録/認証プロセス中に希望するすべての機能を提供するためにカスタマイズすることができます進化することができます.

次を作成します。jsアプリ

それはAzure B 2 C側に必要なセットアップと構成でなければなりません.環境設定.私の名前nextjs-azureb2c-nextauth 次のコマンドを実行したとき、

npx create-next-app
cd nextjs-azureb2c-nextauth
npm install next-auth

nextauthの設定とファイルの追加

つのファイルを作成するか、この作業を得るために変更する必要があります.env , next.config.js , _app.js and [...nextauth].js ファイル.その後、我々は更新されますindex.js ファイルが動作していることを証明する..envこれを設定するには、.env.example プロジェクトのルートのファイル.env . Azure B 2 Cから4つの値を更新する必要があります.

アプリケーションの登録クライアントID.

Authchen ClientCount秘密-アプリケーション登録クライアントの秘密.初めて作成したときに値を保存しない場合はjust create a new one .

あなたが最初にAzure B 2 Cをセットしたときからの「初期のドメイン名」.

AuthRange TenantSense Guid - B 2 Cテナントのguid、それはAzureトップNavバーの「ディレクトリ+購読」ブレードで見つかります.

USERLANEフロー-あなたのサインアップ/signinユーザーフローの名前、おそらくB 2 Crest 1

next.config.js次.JSはこのファイルをあなたの.env 値とアプリケーションにそれらを提供します.プロジェクトのルートにファイルを作成します.次のようになります.

// next.config.js
require('dotenv').config()

module.exports = {
  env: {
    NEXTAUTH_URL: process.env.NEXTAUTH_URL,
    AUTH_CLIENT_ID: process.env.AUTH_CLIENT_ID,
    AUTH_CLIENT_SECRET: process.env.AUTH_CLIENT_SECRET,
    AUTH_TENANT_NAME: process.env.AUTH_TENANT_NAME,
    AUTH_TENANT_GUID: process.env.AUTH_TENANT_GUID,
    JWT_SECRET: process.env.JWT_SECRET,
    USER_FLOW: process.env.USER_FLOW,
  }
}

I'm not sure the require('dotenv').config() も必要ですが、それは今のところ何も壊されていません._app.jsラップしなければならないpages/_app.js ネクサスでProvider セッションにアクセスするためのコンポーネントであり、nextauthstra urlを使用してnextauthを提供します.ファイルを更新します.

// pages/_app.js
import '../styles/globals.css'
import { Provider as AuthProvider } from 'next-auth/client'

function MyApp({ Component, pageProps }) {
  const { session } = pageProps

  return (
    <AuthProvider options={{ site: process.env.NEXTAUTH_URL }} session={session}>
      <Component {...pageProps} />)
    </AuthProvider>
  )
}

export default MyApp

[...nextauth.js]最後に、私たちのNextauthの設定をAzure ADdynamic route file . これはpages/api/auth/[...nextauth].js . この基本的な例では、以下のオプションに変更を加える必要はありません- Azure AD B 2 Cテナント特定のカスタマイズのすべてが.env 変数.

// pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth'

const tenantName = process.env.AUTH_TENANT_NAME
const tenantGuid = process.env.AUTH_TENANT_GUID
const userFlow = process.env.USER_FLOW

const options = {
  session: {
    jwt: true,
  },
  secret: process.env.JWT_SECRET,
  pages: {
    signOut: '/auth/signout',
  },
  providers: [
    {
      id: 'azureb2c',
      name: 'Azure B2C',
      type: 'oauth',
      version: '2.0',
      debug: true,
      scope: 'offline_access openid',
      params: {
        grant_type: 'authorization_code',
      },
      accessTokenUrl: `https://${tenantName}.b2clogin.com/${tenantName}.onmicrosoft.com/${userFlow}/oauth2/v2.0/token`,
      // requestTokenUrl: `https://login.microsoftonline.com/${process.env.AUTH_TENANT_GUID}/oauth2/v2.0/token`,
      authorizationUrl: `https://${tenantName}.b2clogin.com/${tenantName}.onmicrosoft.com/${userFlow}/oauth2/v2.0/authorize?response_type=code+id_token&response_mode=form_post`,
      profileUrl: 'https://graph.microsoft.com/oidc/userinfo',
      profile: (profile) => {
        console.log('THE PROFILE', profile)

        return {
          id: profile.oid,
          fName: profile.given_name,
          lName: profile.surname,
          email: profile.emails.length ? profile.emails[0] : null,
        }
      },
      clientId: process.env.AUTH_CLIENT_ID,
      clientSecret: process.env.AUTH_CLIENT_SECRET,
      idToken: true,
      state: false,
    },
  ],
}

export default (req, res) => NextAuth(req, res, options)

いくつかの注意

The providers.id 文字列はあなたのコールバック(リダイレクトURI)で使用したものと一致しなければなりませんhttp://localhost:3000/api/auth/callback/azureb2c .
The profile プロパティを使用して、認証フローからユーザートークンに返される値をマップします.電子メールアドレスの配列を返すように、Auzre AD B 2 Cはいくつかの奇妙なものをします、それで、あなたがこれらの利用可能であるならばprofile を返します.
The state プロパティはfalseです.私はnextauthリリースv 3とこれが有効になったときにいくつかの問題があった.but it doesn't sound like disabling it should be a problem .
詳細はall the options for using a custom provider here .

テストする

これは、(プロジェクトを実行していると仮定して)移動することができます http://localhost:3000/api/auth/signin/azureb2c とログインフローを実行!実際には、それが動作していることをテストするには、あなたの小さなコードを追加することができますpages/index.js セッションをチェックするファイルthe useSession hook!

// pages/index.js
// ...
import styles from '../styles/Home.module.css'
import { useSession } from 'next-auth/client'

export default function Home() {
  const [session, loading] = useSession()

  return ( //...

次に、ファイル内のどこか他の条件ロジックを使用して、ユーザーセッションの有無に基づいてメッセージを表示することができます.

// pages/index.js
// ...
{session ?
  <>
    <div className={styles.grid}>
    You are signed in!
    </div>
  </>
  : 
  <div>
    You are not signed in! <a style={{color: 'blue'}} href="/api/auth/signin">You must sign in to access documentation!</a>
  </div>
}
// ...

署名機能追加

Nextauthは露出するSignOut 機能は我々が活用することができますが、これは地元のセッションをクリアするだけです.ユーザーがAzure AD B 2 Cを通して再びサインするこのメソッドを通してサインをするならば、B 2 Cのセッションがまだ存在する時から、彼らは彼らの資格情報を再入力するよう促されません.
それはあなたのための問題ではないかもしれない🤷‍♂️ しかし、それがAzure B 2 C SignOut URLを呼ぶことができるならば、ユーザーをNextauthサインアウトURLにリダイレクトしてください.B 2 CサインアウトURLは次のようになります.

https://${process.env.AUTH_TENANT_NAME}.b2clogin.com/${process.env.AUTH_TENANT_NAME}.onmicrosoft.com/${process.env.USER_FLOW}/oauth2/v2.0/logout?post_logout_redirect_uri=${process.env.NEXTAUTH_URL}/auth/signout

どこでユーザーがログアウトすることができますしたい場合は、リンク内に含めることができます.あなたが完全なB 2 Cサインアウトを必要としないならば、代わりにNextauth APIサインアウトルートを呼ぶこともできます

// Addition to `index.js`
// Can also `useSession` to show only if signed in!
// ...
<div>
  <p>You are signed in! You can also sign out if you like.</p>
  <ul>
    <li>
      <a style={{color: 'blue'}} href="/api/auth/signout/azureb2c">Sign Out (API)</a>
    </li>
    <li>
      <a style={{color: 'blue'}} href={`https://${process.env.AUTH_TENANT_NAME}.b2clogin.com/${process.env.AUTH_TENANT_NAME}.onmicrosoft.com/${process.env.USER_FLOW}/oauth2/v2.0/logout?post_logout_redirect_uri=${process.env.NEXTAUTH_URL}/auth/signout`}>Sign Out (FULL)</a>
    </li>
  </ul>
</div>
// ...

URLの最後に気づくなら、私たちはpost_logout_redirect_uri 設定する${process.env.NEXTAUTH_URL}/auth/signout - それで、我々はこれを促進するもう一つのルートを作る必要があります.The signOut メソッドはクライアントでのみ動作します.したがって、これはAPIルートではなく、サーバー上では実行しないでください.ファイルを作成するpages/auth/signout.js

// pages/auth/signout.js
import { signOut } from 'next-auth/client'

export default function Signout() {
  if (typeof window !== 'undefined') {
    signOut({ callbackUrl: process.env.NEXTAUTH_URL })
  }

  return null
}

それで？

理論上、あなたはすべて設定されます.しかし、私がAzure(時々時々次のjs)で経験した特異性のいくらかを与えられるならば?うまくいけば、この場合でも、この統合に苦労していた場合、これは正しい方向にあなたを助ける.Azure AD B 2 Cについての私の経験は特に快適ではありませんでしたが、そこにある多くの選択肢よりもかなり安くなっています.

問題?質問？コメント?

さえずりの上で私を見つけてください