Microsoft Azure Entra External ID를 활용해 구글 소셜 로그인 구현하기

Azure를 활용해 프로젝트를 하나 진행하고 있습니다.

먼저 로그인 기능부터 구현해야 하는데,

직접 백엔드를 구성하기보다는 소셜로그인을 Azure를 활용하여 구성할 계획입니다.

Microsoft AD B2C라는 서비스가 있긴 하지만, 해당 서비스는 곧 종료 예정입니다. Microsoft Azure Entra External ID를 사용하는게 최신 방법입니다.

이를 위해 "External Tenant"라고 하는 것을 만들어야 합니다.

테넌트 (Tenant)란?

---

Tenant란 Azure에서 사용하는 하나의 Organization을 의미합니다. 테넌트가 하나의 조직을 나타내고,

해당 테넌트 안에 생성된 여러 Subscription이 각자 독립된 비용 부과를 가지게 됩니다.

즉, 하나의 큰 조직으로 Tenant를 만들어놓고 Subscription을 팀 별로 만들어놓으면 팀 별 비용관리가 가능하다는 소리입니다.

Microsoft Entra External ID로 새롭게 테넌트를 하나 생성해 줍시다.

소셜 로그인을 Microsoft Entra External ID을 통해 구현하려면 외부 사용자들이 우리 소셜 로그인에 접근할 수 있어야하기 때문에 External로 만들어야 합니다.

나머지 설정은 여러분들의 프로젝트에 맞게 만들어주시면 됩니다.

tenant manage 탭에 들어가서 'switch'를 해주셔야 해당 테넌트에서 작업하게 됩니다.

Application 등록

---

그 다음으로는 Application을 등록해주면 됩니다.

Azure 검색란에 App registration -> new registration을 클릭하면 됩니다.

- 여기서 Supported account types는

• Accounts in any organizational directory 를 선택해야 합니다.
• 우리 앱은 로그인/회원가입용이기 때문에 외부 사용자도 접근 가능해야하기 때문입니다.

그리고 밑의 Redirect URI (optional) 같은 경우에는

저는 React로 개발했으므로 플랫폼을 SPA, 일단 개발 환경에서 잘 되는지 확인할 예정이기 때문에 'http://localhost:5173/auth/callback' 으로 작성했습니다.

해당 내용은 추후에 수정 가능합니다.

User Flow 생성

검색창에 user flow를 검색하고 'Configure user flows' 버튼을 클릭 후, 'New user flow'로 생성을 진행합니다.

저는 여기서 Identity providers에 Google이 이미 추가되어 있는데, 혹시 Microsoft 소셜로그인 뿐만아니라 Google 소셜로그인도 설정하실 분은

• 해당 링크를 클릭하셔서 적용해보시길 바랍니다. Microsoft 공식 문서입니다.

Add Applications

user flow를 만드는데 성공하셨다면, user flow 내부로 들어오셔서 Applications를 클릭, Add application을 클릭합니다.

방금 생성한 Application을 연결합니다.

Frontend에서 처리하기

// .env.local
VITE_AZURE_EXTERNAL_ID_CLIENT_ID=""
VITE_AZURE_EXTERNAL_ID_TENANT_NAME=""
VITE_AZURE_EXTERNAL_ID_TENANT_ID=""
VITE_AZURE_EXTERNAL_ID_SIGNIN_FLOW=""
VITE_AZURE_EXTERNAL_ID_DOMAIN="ciamlogin.com"
VITE_AZURE_EXTERNAL_ID_REDIRECT_URI="http://localhost:5173/auth/callback"
VITE_AZURE_EXTERNAL_ID_POST_LOGOUT_REDIRECT_URI="http://localhost:5173/"

1. VITE_AZURE_EXTERNAL_ID_CLIENT_ID
   1. App registrations에 들어가셔서 방금 생성한 app에 들어가보시면, Application (client) ID라고 하는 것을 볼 수 있습니다. 그 값을 붙여넣습니다.
2. VITE_AZURE_EXTERNAL_ID_TENANT_NAME
   1. 테넌트의 기본 도메인입니다. 아래 사진과 같이 tenant라고 검색하시면 맨 밑에 뜨는 'Continue searching in Microsoft Entra ID'라고 하는걸 선택하시고, Overview를 보시면 xxx.onmicrosoft.com 이라고 하는 부분에서 xxx가 tenant name입니다.
      

      

3. VITE_AZURE_EXTERNAL_ID_TENANT_ID
   1. 테넌트 name을 복사하실 때 동일한 페이지에서 tenant id도 찾으실 수 있습니다.
4. VITE_AZURE_EXTERNAL_ID_SIGNIN_FLOW
   
   1. External Identities -> user flow에 들어가서 우리가 만든 유저 플로우를 클릭하면 뜨는 이름입니다.
5. VITE_AZURE_EXTERNAL_ID_DOMAIN
   1. 권한 호스트 이름인데 기본값은 'ciamlogin.com' 입니다.
6. VITE_AZURE_EXTERNAL_ID_REDIRECT_URI
   1. 로그인 후 브라우저가 돌아올 콜백 URI입니다.
   2. App registrations에서 설정했던 URI와 동일해야 합니다.
7. VITE_AZURE_EXTERNAL_ID_POST_LOGOUT_REDIRECT_URI
   1. 로그아웃 후 브라우저가 돌아올 콜백 URI입니다.
   2. App registrations에서 해당 내용에 대한 URI도 추가해두는 것이 좋습니다.

VITE_AZURE_EXTERNAL_ID_TENANT_ID

VITE_AZURE_EXTERNAL_ID_TENANT_ID

// authConfig.ts
import type { Configuration } from '@azure/msal-browser';

const tenantName = (import.meta.env.VITE_AZURE_EXTERNAL_ID_TENANT_NAME || '').trim();   // 예: praecursscramble
const tenantId   = (import.meta.env.VITE_AZURE_EXTERNAL_ID_TENANT_ID   || '').trim();   // GUID 권장
const clientId   = (import.meta.env.VITE_AZURE_EXTERNAL_ID_CLIENT_ID   || '').trim();
const redirectUri = (import.meta.env.VITE_AZURE_EXTERNAL_ID_REDIRECT_URI || '').trim();
const postLogoutRedirectUri = (import.meta.env.VITE_AZURE_EXTERNAL_ID_POST_LOGOUT_REDIRECT_URI || '').trim();

const authority = tenantId
  ? `https://${tenantName}.ciamlogin.com/${tenantId}`
  : `https://${tenantName}.ciamlogin.com/${tenantName}.onmicrosoft.com`;

export const msalConfig: Configuration = {
  auth: {
    authority,
    clientId,
    redirectUri,
    postLogoutRedirectUri,
    knownAuthorities: tenantName ? [`${tenantName}.ciamlogin.com`] : [],
  },
  cache: { cacheLocation: 'localStorage', storeAuthStateInCookie: false },
};

export const loginRequest = { scopes: ['openid', 'profile', 'offline_access'] };

 

위 코드는 GPT가 만들어준 auth 예시입니다.

제가 먼저 해보니 CORS 에러가 발생해서, 해당 에러까지 해결해달라고 했습니다.

msal 이라고 하는 sdk를 이용하니 해당 패키지를 다운로드받으시고 사용하시는 것을 권장드립니다.

 

추가로

가입한 사용자는 Tenant 내의 'Users'에 저장되고, Graph API로 조회가 가능합니다.

그러나 로그인한 기록은 7일치만 볼 수 있으며, Azure 라이선스를 유로로 업그레이드하면 더욱 오래된 로그도 확인할 수 있습니다.