빠른 시작 - 샘플 Node.js 웹앱에서 프로필 편집

2025-04-22

적용: 흰색 원 (회색 X 기호) 워크포스 테넌트는 녹색 원 (흰색 확인 표시 기호)을 외부 테넌트 (자세히 알아보기)

이 빠른 시작에서는 샘플 Node.js 웹앱을 사용하여 웹앱에서 로그인을 추가하고 프로필을 편집하는 방법을 알아봅니다. 샘플 웹앱은 MSAL 노드(노드용 Microsoft 인증 라이브러리) 및 Microsoft Graph API를 사용하여 로그인을 완료하고 프로필 작업을 편집합니다. 프로필 편집 작업을 수행하려면 사용자가 MFA(다단계 인증)를 완료해야 합니다.

필수 구성 요소

빠른 시작: 샘플 웹앱 문서에서 사용자 로그인의 단계 및 필수 구성 요소를 완료합니다. 이 빠른 시작에서는 샘플 Node.js 웹앱을 사용하여 사용자를 로그인하는 방법을 보여줍니다.
Microsoft Entra 관리 센터에서 웹 API를 위한 새 앱을 등록하십시오. 이 앱의 이름은 edit-profile-service이며, 이 조직 디렉터리의 계정에 대해서만 사용하도록 구성되어 있습니다. 애플리케이션 등록에서 자세한 내용을 참조하세요. 다음 값을 애플리케이션 개요 페이지에서 기록하여 나중에 사용하십시오.
- 애플리케이션(클라이언트) ID
- 디렉터리(테넌트) ID
앱 등록에 클라이언트 비밀을 추가합니다. 프로덕션 앱에서는 클라이언트 비밀을 사용하지 마세요. 대신 인증서 또는 페더레이션된 자격 증명을 사용합니다. 자세한 내용은 애플리케이션에 자격 증명 추가를 참조하세요.

API 범위 및 역할 구성

웹 API를 등록하면 클라이언트 애플리케이션이 웹 API에 액세스하도록 요청할 수 있는 권한을 정의하도록 API 범위를 구성해야 합니다. 또한 앱 역할을 설정하여 사용자 또는 애플리케이션에 사용할 수 있는 역할을 지정하고 웹 API를 호출할 수 있도록 웹앱에 필요한 API 권한을 부여해야 합니다.

EditProfileService 앱 API 범위 구성

EditProfileService 앱은 클라이언트 앱이 웹 API를 호출하기 위해 획득하는 권한을 노출해야 합니다.

클라이언트 앱이 사용자에 대한 액세스 토큰을 성공적으로 가져오려면 API가 위임된 권한라고도 하는 하나 이상의 범위를 게시해야 합니다. 범위를 게시하려면 다음 단계를 수행합니다.

앱 등록 페이지에서 생성한 API 애플리케이션(예: edit-profile-service)을 선택하여 개요 페이지를 엽니다.
관리아래에서 API 노출을선택합니다.
페이지 위쪽의 애플리케이션 ID URI옆에 있는 추가 링크를 선택하여 이 앱에 고유한 URI를 생성합니다.
api://{clientId}같은 제안된 애플리케이션 ID URI를 수락하고 저장선택합니다. 웹 애플리케이션이 웹 API에 대한 액세스 토큰을 요청하면 API에 대해 정의하는 각 범위에 대한 접두사로 URI를 추가합니다.
이 API에서 정의된 범위 아래에서 범위 추가를 선택합니다.

API에 대한 읽기 액세스를 정의하는 다음 값을 입력한 다음, 범위 추가 선택하여 변경 내용을 저장합니다.

재산	값
범위 이름	EditProfileService.ReadWrite
동의할 수 있는 사람	관리자만
관리자 동의 표시 이름	클라이언트는 프로필 서비스 편집을 통해 프로필을 편집합니다.
관리자 동의 설명	클라이언트 웹앱이 프로필 편집 서비스호출하여 프로필을 편집할 수 있도록 하는 범위입니다.
국가	활성화됨

EditProfileService 앱에 User.ReadWrite 권한 부여

User.ReadWrite 사용자가 프로필을 업데이트할 수 있는 Microsoft Graph API 권한입니다. User.ReadWrite 권한을 EditProfileService 앱에 부여하려면 다음 단계를 사용합니다.

앱 등록 페이지에서 만든 애플리케이션(예: edit-profile-service)을 선택하여 개요 페이지를 엽니다.
관리에서 API 권한을 선택합니다.
Microsoft API 탭을 선택한 후, 일반적으로 사용되는 Microsoft API에서 Microsoft Graph를 선택합니다.
위임된 권한 선택한 다음, 사용 권한 목록에서 User.ReadWrite 검색하여 선택합니다.
권한 추가 단추를 선택합니다.
User.ReadWrite 권한을 EditProfileService 앱에 올바르게 할당했습니다. 그러나 테넌트는 외부 테넌트이므로 고객 사용자 자체는 이러한 권한에 동의할 수 없습니다. 테넌트 관리자는 테넌트에 있는 모든 사용자를 대신하여 이 권한에 동의해야 합니다.
1. 테넌트 이름<>대한 관리자 동의 부여선택한 다음, 예선택합니다.
2. 새로 고침을 선택한 후, 두 범위의 상태 아래에 테넌트 이름에 대해 부여된이 표시되는지 확인합니다.

클라이언트 웹앱에 API 권한 부여

이 섹션에서는 이전에 등록한 클라이언트 웹앱에 API 권한을 부여합니다(필수 구성 요소).

클라이언트 웹앱에 EditProfileService.ReadWrite 권한을 부여합니다. 이 권한은 EditProfileService 앱에서 노출되며 MFA를 사용하여 업데이트 프로필 작업을 보호합니다. EditProfileService.ReadWrite 권한을 클라이언트 웹앱에 부여하려면 다음 단계를 사용합니다.

앱 등록 페이지에서 만든 API 애플리케이션(예: ciam-client-app)을 선택하여 개요 페이지를 엽니다.
관리에서 API 권한을 선택합니다.
구성된 권한아래에서 사용 권한 추가를 선택합니다.
탭에서, 우리 조직에서 사용하는 API를 선택하십시오.
API 목록에서 edit-profile-service 같은 API를 선택합니다.
위임된 권한 옵션을 선택합니다.
사용 권한 목록에서 EditProfileService.ReadWrite선택합니다.
권한 추가 단추를 선택합니다.
구성된 권한 목록에서 EditProfileService.ReadWrite 권한을 선택한 다음 나중에 사용할 수 있도록 사용 권한의 전체 URI를 복사합니다. 전체 권한 URI는 api://{clientId}/{EditProfileService.ReadWrite}비슷합니다.
*EditProfileService.ReadWrite 권한을 클라이언트 웹앱에 올바르게 할당했습니다. 그러나 테넌트는 외부 테넌트이므로 고객 사용자 자체는 이러한 권한에 동의할 수 없습니다. 테넌트 관리자는 테넌트에 있는 모든 사용자를 대신하여 이 권한에 동의해야 합니다.
1. 테넌트 이름<>대한 관리자 동의 부여선택한 다음, 예선택합니다.
2. 새로 고침을 선택한 후, 두 범위의 상태 아래에 테넌트 이름에 대해 부여된이 표시되는지 확인합니다.

조건부 액세스 MFA 정책 만들기

이전에 등록한 EditProfileService 앱은 MFA로 보호하는 리소스입니다.

MFA CA(조건부 액세스) 정책을 만들려면 앱다단계 인증 추가의 단계를 사용합니다. 정책을 만들 때 다음 설정을 사용합니다.

이름에는 MFA 정책을 사용합니다.
대상 리소스의 경우 이전에 등록한 EditProfileService 앱(예: edit-profile-service )을 선택합니다.

샘플 웹앱 복제 또는 다운로드

필수 구성 요소에서 샘플 앱을 이미 복제했지만 아직 복제하지 않은 경우 GitHub에서 복제하거나 .zip 파일로 다운로드할 수 있습니다.

다음 명령을 실행하여 .zip 파일 다운로드하거나 GitHub에서 샘플 웹앱을 복제합니다.

git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git

샘플 웹앱 구성

이 코드 샘플에는 클라이언트 웹앱과 API 앱(EditProfileService 앱)의 두 가지 앱이 포함되어 있습니다. 외부 테넌트 설정을 사용하려면 이러한 앱을 업데이트해야 합니다. 이렇게 하려면 다음 단계를 사용합니다.

코드 편집기에서 1-Authentication\7-edit-profile-with-mfa-express\App\authConfig.js 파일을 연 다음, 플레이스홀더를 찾습니다.
- Enter_the_Application_Id_Here 이전에 등록한 클라이언트 웹앱의 애플리케이션(클라이언트) ID로 바꿉니다.
- Enter_the_Tenant_Subdomain_Here를 디렉터리(테넌트) 하위 도메인으로 바꿉니다. 예를 들어 테넌트 주 도메인이 contoso.onmicrosoft.com경우 contoso사용합니다. 테넌트 이름이 없는 경우 테넌트 세부 정보를읽는 방법을 알아봅니다.
- Enter_the_Client_Secret_Here 이전에 복사한 클라이언트 웹앱의 앱 비밀 값으로 바꿉니다.
- graph_end_point을 Microsoft Graph API 엔드포인트인 https://graph.microsoft.com/로 대체합니다.
- Add_your_protected_scope_here을 API 앱(EditProfileService 앱)의 범위로 바꿉니다. 값은 api://{clientId}/EditProfileService.ReadWrite비슷합니다. {clientId} 는 이전에 등록한 EditProfileService 의 애플리케이션(클라이언트) ID 값입니다.
코드 편집기에서 1-Authentication\7-edit-profile-with-mfa-express\Api\authConfig.js 파일을 연 다음, 플레이스홀더를 찾습니다.
- Enter_the_Tenant_Subdomain_Here 디렉터리(테넌트) 하위 도메인으로 대체합니다. 예를 들어 테넌트 주 도메인이 contoso.onmicrosoft.com경우 contoso사용합니다. 테넌트 이름이 없는 경우 테넌트 세부 정보를읽는 방법을 알아봅니다.
- Enter_the_Tenant_ID_Here 테넌트 ID로 대체합니다. 테넌트 ID가 없는 경우 테넌트 세부 정보를 읽는 방법을알아봅니다.
- Enter_the_Edit_Profile_Service_Application_Id_Here 이 값을 EditProfileService 애플리케이션의 애플리케이션(클라이언트) ID 값으로 바꿉니다.
- Enter_the_Client_Secret_Here 을 필수 구성 요소의 일부로 만든 클라이언트 비밀 값으로 바꿉니다.
- graph_end_point을 Microsoft Graph API 엔드포인트인 https://graph.microsoft.com/로 대체합니다.

프로젝트 종속성 설치 및 앱 실행

앱을 테스트하려면 클라이언트 앱과 서비스/API 앱 모두에 대한 프로젝트 종속성을 설치한 다음 실행합니다.

클라이언트 앱을 실행하려면 터미널 창을 열고 다음 명령을 실행합니다.
```
cd 1-Authentication\7-edit-profile-with-mfa-express\App
npm install
npm start
```
서비스/API 편집 앱을 실행하려면 디렉터리를 편집 서비스/API 앱으로 변경하고 1-Authentication\7-edit-profile-with-mfa-express\Api 다음 명령을 실행합니다.
```
npm install
npm start
```
브라우저를 연 다음, http://localhost:3000.으로 이동하세요. SSL 인증서 오류가 발생하는 경우 .env 파일을 만든 다음, 다음 구성을 추가합니다.
```
# Use this variable only in the development environment. 
# Remove the variable when you move the app to the production environment.
NODE_TLS_REJECT_UNAUTHORIZED='0'
```
로그인 단추를 선택한 다음 로그인합니다.
로그인 페이지에서 전자 메일 주소입력하고, 다음선택하고, 암호입력한 다음, 로그인선택합니다. 계정이 없는 경우, 계정이 없나요? 하나를 만드세요 링크를 선택하여 등록을 시작하세요.
프로필을 업데이트하려면 프로필 편집 링크를 선택합니다. 다음 스크린샷과 유사한 페이지가 표시됩니다.
프로필을 편집하려면 프로필 편집 단추를 선택합니다. 아직 수행하지 않은 경우 앱은 MFA 챌린지를 완료하라는 메시지를 표시합니다.
프로필 세부 정보를 변경한 다음 저장 버튼을 선택합니다.

고유한 Node.js 웹앱에 편집 프로필을 추가하는 방법을 알아보십시오.