Azure AD B2C 인증을 Next로 구성하는 방법회사 명

다음 단계에서는 Azure B2C를 사용하여 인증을 구성합니다.js는 특별히 직접적인 과정이 아니다.이를 촉진하기 위해 NextAuth를 사용하는 방법을 연구할 것입니다.js 라이브러리.

Azure B2C 및 Next를 사용하여 인증합니다.회사 명

적어도 나에게 Next.js의 신분 검증은 모호한 문제이다. 특히 개발 수요가 100% 고화되지 않은 상황에서 말이다.클라이언트와 서버 (less) 환경에 동시에 접근할 수 있기 때문에 클라이언트, 서버 또는 두 가지를 혼합하여 인증을 처리할 수 있습니다.
게다가 Azure B2C를 사용하여 인증을 구성하는 작업은 복잡한 상황을 더욱 복잡하게 한다.Azure 광고 B2C는 많은 기능을 가지고 있지만 적어도 내가 발견한 바와 같이straight forward는 그 중의 하나가 아니다.
Azure AD B2C은 Azure AD과 다르다는 것을 주의하십시오.Azure AD B2C(여기서는 Azure B2C라고도 함)는 고객을 위한 어플리케이션의 ID 및 액세스 관리 솔루션입니다.

NextAuth 를 입력합니다.회사 명

NextAuth.js은 Next를 사용하여 인증하기 위한 프레임워크입니다.js는 간단하고 통증이 없는 과정이다.초기 구성 값을 설정하면 다음 단계의 동적 경로를 통해 재부팅이 완료됩니다.js.클라이언트와 서버에서 세션을 유연하게 설정하고 검사할 수 있습니다.

NextAuth+Azure B2C

그러나 NextAuth를 사용하여 Azure B2C를 설정하여 인증을 하는 데는 시간이 걸릴 수 있습니다.이것은 Azure 포털에서 초기 설정과 설정을 하고 NextAuth에서 사용자 정의 설정을 해야 합니다.
본고의 목표는 다음 단계에서 최소 인증 설정을 만드는 데 필요한 모든 절차를 상세하게 소개하는 것이다.Azure B2C 및 NextAuth의 js를 사용합니다.js, 특히 내가 사용하고 있는 다음 프로필을 공유합니다.다음은 Azure B2C의 작업 원리에 대해 깊이 있게 토론하지 않겠습니다.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은 완전한 코드이고, 두 개의 서로 다른 PRS는 the initial diff to create basic working authentication과 the diff to add signout functionality을 표시한다.

Azure B2C 설정

구독 및 Azure AD B2C 임차인 만들기

이것은 아마도 이 과정에서 가장 복잡한 부분일 것이다.기왕 네가 여기에 있는 이상, 나는 네가 이미 Azure 구독에 접근할 수 있다고 가정한다.심지어 Azure 광고 B2C 세입자일 수도 있는데...
그러나 이 중 하나가 you will have to start here이 아니라면 구독 (선결 조건으로) 을 만드는 과정 (구독하지 않으면) 을 끝내고 hte Azure AD B2C 세입자를 만드는 과정을 안내합니다.

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 B2C 임대인에 위치하고 사용자에 대한 신분 검증과 영패를 발급하는 기구입니다.

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

다른 리디렉션 URI 추가

응용 프로그램 등록의 인증 섹션을 되돌려주고 두 개의 추가 URI를 추가합니다. 이 두 개의 URI는 NextAuth에서 사용됩니다.

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 . 사용자 흐름은 사용자가 등록, 로그인, 프로필 편집 및 암호 재설정에 사용할 위탁 관리 인터페이스입니다.

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

기본적인 사전 생성 사용자 흐름은 충분히 시작할 수 있지만 수요가 발전함에 따라 사용자 흐름은 등록/인증 과정에서 필요한 모든 기능을 제공하기 위해 완전히 맞춤형으로 제작할 수 있다.

다음을 만듭니다.js 응용 프로그램

이것은 Azure B2C 측에 필요한 모든 설정과 설정이어야 하기 때문에 다음 것을 보겠습니다.js 환경 설정.다음 명령을 실행할 때 nextjs-azureb2c-nextauth으로 이름을 지정합니다.

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

다음 프로필 추가(&F)

.env, next.config.js, _app.js, [...nextauth].js 및 index.js 파일 네 개를 만들거나 수정해야 합니다.그리고 .env 파일을 업데이트하여 정상적으로 작동하고 있음을 증명합니다..env.example설정하려면 프로젝트 루트 디렉터리에 있는 .env 파일을 복사하여 이름을 바꾸거나 이름만 바꾸십시오.이 내용은 Azure B2C의 네 가지 값을 사용하여 업데이트해야 합니다.

AUTH\u CLIENT\u ID - 애플리케이션 등록 클라이언트 ID.

AUTH_CLIENT_SECRET - 등록 클라이언트 암호를 적용합니다.처음 생성할 때 이 값을 저장하지 않으면 just create a new one으로 되돌아옵니다.

AUTH\u TENANT\u NAME - Azure B2C를 처음 설정할 때의 초기 도메인 이름입니다.

AUTH\u TENANT\u GUID-B2C 임차인의 GUID는 Azure 상단 탐색 모음의 "디렉터리 + 구독"블레이드에서 찾을 수 있습니다. 이 아이콘:

USER\u FLOW - B2C\u1\u

으로 시작할 수 있는 등록/로그인 사용자 흐름 이름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은 require('dotenv').config()까지 필요하지만 현재는 아무것도 파괴하지 않았다._app.js세션에 액세스하려면 pages/_app.js을 NextAuth Provider 어셈블리에 포장하고 NextAuth_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]마지막으로 Azure AD B2C의 다음 구성을 dynamic route file에 추가해야 합니다.이것은 pages/api/auth/[...nextauth].js에 살고 있습니다.이 기본 예시에서 다음 옵션을 변경할 필요가 없습니다. 모든 Azure AD B2C 임차인의 특정한 사용자 정의는 .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)

약간의 주석

providers.id 문자열은 Azure B2C의 리셋 (리셋 URI) 에 사용된 내용과 일치해야 합니다. 리셋 (리셋 URI) 은 http://localhost:3000/api/auth/callback/azureb2c입니다.profile 속성은 권한 수여 흐름이 되돌아오는 값을 사용자 영패에 비추는 데 사용됩니다.Auzre AD B2C는 일련의 전자 우편 주소를 되돌려 주는 등 이상한 일을 했습니다. 따라서 그 중 하나를 사용할 수 있으려면 profile obejct에서 되돌아오는 값을 이해하고 되돌아오는 속성에 맞게 비추십시오.state 속성은false입니다.나는 다음 버전 v3에서 몇 가지 문제에 부딪혔다. 이것은 활성화된 것이다. 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 B2C를 통해 다시 로그인하면 B2C에 세션이 남아 있기 때문에 자격 증명을 다시 입력하라는 메시지가 표시되지 않습니다.
이것은 너에게 문제가 아닐 수도 있다🤷‍♂️ 그러나 만약 그렇다면, 당신은 Azure B2C 로그아웃 URL을 호출해서 사용자를 다음 로그아웃 URL로 바꿀 수 있습니다.B2C 로그아웃 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

사용자가 어디에서 로그아웃하길 원하든지 링크에 포함할 수 있습니다.전체 B2C 로그아웃이 필요하지 않으면 다음 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으로 설정했습니다. 따라서 이 점을 실현하기 위해 다른 경로를 만들어야 합니다.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(때로는 Next.js)에서 겪은 특질을 감안하면 그렇지 않을지도 모른다.적어도 당신이 올바른 방향으로 나아가는 데 도움이 되기를 바랍니다. 당신도 이런 통합을 위해 분투하고 있다면.지금까지 저는 Azure AD B2C에 대한 체험이 그다지 즐겁지 않았지만 다른 많은 대체 제품보다 훨씬 싸다는 것을 감안하여 예견할 수 있는 미래에 계속 사용할 것입니다.

문제문제댓글?

트위터에서 날 찾았어 -