Microsoft Entra ID

💡

마이크로소프트는 Azure AD를 Microsoft Entra ID로 이름을 변경했습니다. 새로운 이름에 대한 자세한 정보는 여기에서 확인할 수 있습니다.

리소스

설정

콜백 URL

https://example.com/api/auth/callback/microsoft-entra-id

https://example.com/auth/callback/microsoft-entra-id

https://example.com/auth/callback/microsoft-entra-id

환경 변수

AUTH_MICROSOFT_ENTRA_ID_ID
AUTH_MICROSOFT_ENTRA_ID_SECRET
AUTH_MICROSOFT_ENTRA_ID_ISSUER

설정

/auth.ts

import NextAuth from "next-auth"
import MicrosoftEntraID from "next-auth/providers/microsoft-entra-id"
 
const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [
    MicrosoftEntraID({
      clientId: process.env.AUTH_MICROSOFT_ENTRA_ID_ID,
      clientSecret: process.env.AUTH_MICROSOFT_ENTRA_ID_SECRET,
      issuer: process.env.AUTH_MICROSOFT_ENTRA_ID_ISSUER,
    }),
  ],
})

/src/routes/plugin@auth.ts

import { QwikAuth$ } from "@auth/qwik"
import Entra from "@auth/qwik/providers/microsoft-entra-id"
 
export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$(
  () => ({
    providers: [
      Entra({
        clientId: import.meta.env.AUTH_MICROSOFT_ENTRA_ID_ID,
        clientSecret: import.meta.env.AUTH_MICROSOFT_ENTRA_ID_SECRET,
        issuer: import.meta.env.AUTH_MICROSOFT_ENTRA_ID_ISSUER,
      }),
    ],
  })
)

/src/auth.ts

import { SvelteKitAuth } from "@auth/sveltekit"
import Entra from "@auth/sveltekit/providers/microsoft-entra-id"
import { env } from "$env/dynamic/private"
 
export const { handle, signIn, signOut } = SvelteKitAuth({
  providers: [
    Entra({
      clientId: env.AUTH_MICROSOFT_ENTRA_ID_ID,
      clientSecret: env.AUTH_MICROSOFT_ENTRA_ID_SECRET,
      issuer: process.env.AUTH_MICROSOFT_ENTRA_ID_ISSUER,
    }),
  ],
})

/src/app.ts

import { ExpressAuth } from "@auth/express"
import Entra from "@auth/express/providers/microsoft-entra-id"
 
app.use(
  "/auth/*",
  ExpressAuth({
    providers: [
      Entra({
        clientId: process.env.AUTH_MICROSOFT_ENTRA_ID_ID,
        clientSecret: process.env.AUTH_MICROSOFT_ENTRA_ID_SECRET,
        issuer: process.env.AUTH_MICROSOFT_ENTRA_ID_ISSUER,
      }),
    ],
  })
)

참고 사항

특정 Active Directory 사용자만 허용하기

https://entra.microsoft.com/에서 왼쪽 메뉴 바에서 Identity를 선택합니다.
다음으로, 왼쪽 메뉴에서 “App Registration”으로 이동하여 새로 생성합니다.
“Who can use this application or access this API?” 부분에 주의하세요.
- 이를 통해 특정 유형의 사용자 계정에 대한 접근 범위를 지정할 수 있습니다.
- 테넌트 내부만, 모든 Microsoft 테넌트, 또는 모든 Microsoft 테넌트와 공용 Microsoft 계정(Skype, Xbox, Outlook.com 등)까지 허용할 수 있습니다.
리디렉션 URL을 요청받으면 https://yourapplication.com/api/auth/callback/microsoft-entra-id를 사용하거나, 개발 중이라면 http://localhost:3000/api/auth/callback/microsoft-entra-id를 사용합니다.
App Registration이 생성된 후, “Client Credential”에서 Client secret을 생성합니다.
이제 다음을 복사하세요:
- Application (client) ID
- Client secret (value)
- Issuer

.env.local 파일에 다음 항목을 추가합니다:

AUTH_MICROSOFT_ENTRA_ID_ID=<여기에 Application (client) ID를 복사하세요>
AUTH_MICROSOFT_ENTRA_ID_SECRET=<생성된 client secret 값을 복사하세요>
AUTH_MICROSOFT_ENTRA_ID_ISSUER=<issuer를 복사하세요>

이렇게 하면 테넌트가 common 권한 부여 엔드포인트를 사용하도록 기본 설정됩니다. 자세한 내용은 여기를 참조하세요.

Microsoft Entra는 프로필 사진을 URL 대신 ArrayBuffer로 반환합니다. 따라서 우리의 프로바이더는 이를 base64로 인코딩된 이미지 문자열로 변환하여 반환합니다. 자세한 내용은 여기를 참조하세요. 기본 이미지 크기는 48x48로 설정되어 있으며, 세션이 JWT로 저장될 경우 공간 부족 문제를 방지하기 위함입니다.

Medium Naver

Microsoft Entra ID

리소스

설정

콜백 URL

환경 변수

설정

참고 사항

About Auth.js

Download

Acknowledgements