Azure Active Directory B2C를 사용하여 샘플 Node.js 웹 애플리케이션에서 인증 구성

아티클
01/11/2024

이 샘플 문서에서는 샘플 Node.js 애플리케이션을 사용하여 Node.js 웹 애플리케이션에 Azure AD B2C(Azure Active Directory B2C) 인증을 추가하는 방법을 보여줍니다. 샘플 애플리케이션을 사용하면 사용자가 Azure AD B2C 사용자 흐름을 사용하여 로그인, 로그아웃, 프로필 업데이트 및 암호를 재설정할 수 있습니다. 샘플 웹 애플리케이션은 노드용 MSAL(Microsoft 인증 라이브러리)을 사용하여 인증 및 권한 부여를 처리합니다.

이 문서에서는 다음 작업을 수행합니다.

Azure Portal에 웹 애플리케이션을 등록합니다.
Azure Portal에서 앱에 대한 결합된 로그인 및 등록, 프로필 편집 및 암호 재설정 사용자 흐름을 만듭니다.
사용자 고유의 Azure AD B2C 애플리케이션 및 사용자 흐름을 사용하도록 샘플 노드 애플리케이션을 업데이트합니다.
샘플 애플리케이션을 테스트합니다.

필수 조건

Node.js
Visual Studio Code 또는 다른 코드 편집기
Azure AD B2C 테넌트. 고유한 테넌트를 아직 만들지 않은 경우 자습서: Azure Active Directory B2C 테넌트 만들기의 단계를 따르고 테넌트 이름을 기록합니다.

1단계: 사용자 흐름 구성

사용자가 앱에 로그인하려고 하면 앱은 사용자 흐름을 통해 권한 부여 엔드포인트에 대한 인증 요청을 시작합니다. 사용자 흐름은 사용자 환경을 정의하고 제어합니다. 사용자 흐름을 완료하면 Azure AD B2C에서 토큰을 생성한 다음, 사용자를 애플리케이션으로 다시 리디렉션합니다.

아직 없는 경우 사용자 흐름 또는 사용자 지정 정책을 만듭니다. 다음과 같이 3개의 개별 사용자 흐름을 만드는 단계를 반복합니다.

결합된 로그인 및 등록 사용자 흐름(예: susi). 이 사용자 흐름은 암호를 잊으셨나요? 환경도 지원합니다.
프로필 편집 사용자 흐름(예: edit_profile).
암호 재설정 사용자 흐름(예: reset_password).

Azure AD B2C는 사용자 흐름 이름 앞에 B2C_1_를 추가합니다. 예를 들어 susi은 B2C_1_susi이 됩니다.

2단계: 웹 애플리케이션 등록

Azure AD B2C를 사용해 애플리케이션 로그인을 활성화하려면 Azure AD B2C 디렉터리에 앱을 등록합니다. 앱 등록은 앱과 Azure AD B2C 간에 트러스트 관계를 설정합니다.

앱을 등록하는 동안 리디렉션 URI를 지정합니다. 리디렉션 URI는 사용자가 Azure AD B2C로 인증하면 Azure AD B2C에 의해 리디렉션되는 엔드포인트입니다. 앱 등록 프로세스는 앱을 고유하게 식별하는 애플리케이션 ID(클라이언트 ID라고도 함)를 생성합니다. 앱이 등록되면 Azure AD B2C에서 애플리케이션 ID와 리디렉션 URI를 모두 사용하여 인증 요청을 만듭니다.

2.1단계: 앱 등록

웹앱을 등록하려면 다음 단계를 수행합니다.

Azure Portal에 로그인합니다.
여러 테넌트에 액세스할 수 있는 경우 상단 메뉴의 설정 아이콘을 선택하여 디렉터리 + 구독 메뉴에서 Azure AD B2C 테넌트로 전환합니다.
Azure Portal에서 Azure AD B2C를 검색하고 선택합니다.
앱 등록을 선택한 다음, 새 등록을 선택합니다.
이름 아래에 애플리케이션 이름을 입력합니다(예: webapp1).
지원되는 계정 유형 아래에서 모든 ID 공급자 또는 조직 디렉터리의 계정(사용자 흐름에서 사용자를 인증하는 용도) 을 선택합니다.
리디렉션 URI에서 웹을 선택한 다음 URL 상자에 http://localhost:3000/redirect를 입력합니다.
사용 권한에서 openid 및 offline_access 권한에 대한 관리자 동의 부여 확인란을 선택합니다.
등록을 선택합니다.
개요를 선택합니다.
웹 애플리케이션을 구성할 때 나중에 사용할 수 있도록 애플리케이션(클라이언트) ID를 기록합니다.

2.2단계: 웹앱 클라이언트 비밀 만들기

등록된 웹 애플리케이션에 대한 클라이언트 비밀을 만듭니다. 웹 애플리케이션은 토큰을 요청할 때 클라이언트 비밀을 사용하여 ID를 입증합니다.

관리에서 인증서 및 비밀을 선택합니다.
새 클라이언트 비밀을 선택합니다.
설명 상자에 클라이언트 비밀에 대한 설명을 입력합니다(예: clientsecret1).
만료에서 암호가 유효한 기간을 선택한 다음 추가를 선택합니다.
비밀의 값을 기록합니다. 이후 단계에서 구성에 이 값을 사용합니다.

3단계: 샘플 웹앱 가져오기

zip 파일을 다운로드하거나, GitHub에서 샘플 웹 애플리케이션을 복제합니다.

git clone https://github.com/Azure-Samples/active-directory-b2c-msal-node-sign-in-sign-out-webapp.git

샘플 파일을 폴더에 추출합니다. 다음 디렉터리 구조를 가진 웹앱을 가져옵니다.

active-directory-b2c-msal-node-sign-in-sign-out-webapp/
├── index.js
└── package.json
└── .env
└── views/
    └── layouts/
        └── main.hbs
    └── signin.hbs

views 폴더에는 애플리케이션의 사용자 인터페이스에 대한 Handlebars 파일이 포함되어 있습니다.

4단계: 종속성 설치

콘솔 창을 열고, Node.js 샘플 앱이 있는 디렉터리로 변경합니다. 예시:
```
cd active-directory-b2c-msal-node-sign-in-sign-out-webapp
```
다음 명령을 실행하여 종속성을 설치합니다.
```
npm install && npm update
```

5단계: 샘플 웹앱 구성

Visual Studio Code와 같은 코드 편집기에서 웹앱을 엽니다. 프로젝트 루트 폴더에서 .env 파일을 엽니다. 이 파일에는 Azure AD B2C ID 공급자에 대한 정보가 포함되어 있습니다. 다음 앱 설정 속성을 업데이트합니다.

키	값
`APP_CLIENT_ID`	2.1단계에서 등록한 웹앱의 애플리케이션(클라이언트) ID.
`APP_CLIENT_SECRET`	2.2단계에서 만든 웹앱의 클라이언트 암호 값
`SIGN_UP_SIGN_IN_POLICY_AUTHORITY`	로그인 및 등록 사용자 흐름 기관(예: `https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>`). `<your-tenant-name>`을 테넌트 이름으로 바꾸고 `<sign-in-sign-up-user-flow-name>`을 로그인 및 가입 사용자 흐름의 이름(예: `B2C_1_susi`)으로 바꿉니다. 테넌트 이름 가져오기 방법에 대해 알아보세요.
`RESET_PASSWORD_POLICY_AUTHORITY`	암호 재설정 사용자 흐름 기관(예: `https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<reset-password-user-flow-name>`). `<your-tenant-name>`를 테넌트 이름으로 바꾸고 `<reset-password-user-flow-name>`를 재설정 암호 사용자 흐름의 이름(예: `B2C_1_reset_password_node_app`)으로 바꿉니다.
`EDIT_PROFILE_POLICY_AUTHORITY`	프로필 편집 사용자 흐름 기관(예: `https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<profile-edit-user-flow-name>`). `<your-tenant-name>`를 테넌트 이름으로 바꾸고 `<reset-password-user-flow-name>`를 재설정 암호 사용자 흐름의 이름(예: `B2C_1_edit_profile_node_app`)으로 바꿉니다.
`AUTHORITY_DOMAIN`	Azure AD B2C 인증 기관 도메인(예: `https://<your-tenant-name>.b2clogin.com`). `<your-tenant-name>`을 테넌트 이름으로 바꿉니다.
`APP_REDIRECT_URI`	Azure AD B2C가 인증 응답(토큰)을 반환하는 애플리케이션 리디렉션 URI. Azure Portal에 앱을 등록할 때 설정한 리디렉션 URI와 일치하며 공개적으로 액세스할 수 있어야 합니다. 이 값은 있는 그대로 둡니다.
`LOGOUT_ENDPOINT`	Azure AD B2C 로그아웃 엔드포인트(예: `https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000`) `<your-tenant-name>`을 테넌트 이름으로 바꾸고 `<sign-in-sign-up-user-flow-name>`을 로그인 및 가입 사용자 흐름의 이름(예: `B2C_1_susi`)으로 바꿉니다.

최종 구성 파일은 다음 샘플과 같아야 합니다.

#HTTP port
SERVER_PORT=3000
#web apps client ID
APP_CLIENT_ID=<You app client ID here>
#session secret
SESSION_SECRET=sessionSecretHere
#web app client secret
APP_CLIENT_SECRET=<Your app client secret here>
#B2C sign up and sign in user flow/policy authority
SIGN_UP_SIGN_IN_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>
#B2C password reset user flow/policy authority
RESET_PASSWORD_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<reset-password-user-flow-name>
#B2C edit profile user flow/policy authority
EDIT_PROFILE_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<profile-edit-user-flow-name>
#B2C authority domain
AUTHORITY_DOMAIN=https://<your-tenant-name>.b2clogin.com
#client redirect url
APP_REDIRECT_URI=http://localhost:3000/redirect
#Logout endpoint 
LOGOUT_ENDPOINT=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000

샘플 웹앱 실행

이제 샘플 앱을 테스트할 수 있습니다. 노드 서버를 시작하고 http://localhost:3000에서 브라우저를 통해 액세스해야 합니다.

터미널에서 다음 코드를 실행하여 Node.js 웹 서버를 시작합니다.
```
node index.js
```
브라우저에서 http://localhost:3000으로 이동합니다. 로그인 단추가 있는 페이지가 표시되어야 합니다.

로그인 단추가 있는 페이지 로드가 완료되면 로그인을 선택합니다. 로그인하라는 메시지가 나타납니다.
이메일 주소 및 암호와 같은 로그인 자격 증명을 입력합니다. 계정이 없으면 지금 등록을 선택하여 계정을 만드세요. 성공적으로 로그인하거나 등록하면 로그인 상태를 보여 주는 다음 페이지가 표시되어야 합니다.

프로필 편집 테스트

로그인한 후 프로필 편집을 선택합니다.
필요에 따라 새 변경사항을 입력한 다음 계속을 선택합니다. 지정된 이름과 같은 새 변경 내용이 있는 로그인 상태의 페이지가 표시되어야 합니다.

암호 재설정 테스트

로그인한 후 암호 다시 설정을 선택합니다.
표시되는 다음 대화 상자에서 취소를 선택하여 작업을 취소할 수 있습니다. 또는 이메일 주소를 입력한 다음 확인 코드 보내기를 선택합니다. 이메일 계정으로 확인 코드를 받게 됩니다. 이메일의 확인 코드를 복사하여 암호 재설정 대화 상자에 입력한 다음, 코드 확인을 선택합니다.
계속을 선택합니다.
새 암호를 입력하고 확인한 다음 계속을 선택합니다. 로그인 상태를 보여 주는 페이지가 표시되어야 합니다.

로그아웃 테스트

로그인한 후 로그아웃을 선택합니다. 로그인 단추가 있는 페이지가 표시되어야 합니다.

다음 단계

웹앱에 대한 Azure AD B2C 인증 환경 사용자 지정 및 개선 방법을 알아봅니다.
Azure AD B2C를 사용하여 사용자 고유의 노드 웹 애플리케이션에서 인증을 사용하도록 설정하는 방법을 알아봅니다.