샘플 Node.js 웹앱에서 사용자 로그인 및 프로필 편집
이 가이드에서는 샘플 Node.js 웹앱을 사용하여 웹앱에서 로그인을 추가하고 프로필을 편집하는 방법을 보여줍니다. 샘플 웹앱은 MSAL 노드(노드용 Microsoft 인증 라이브러리) 및 Microsoft Graph API를 사용하여 로그인을 완료하고 프로필 작업을 편집합니다.
필수 조건
- 샘플 Node.js 웹앱 문서에서 사용자 로그인의 단계를 완료합니다. 이 문서에서는 샘플 Node.js 웹앱을 사용하여 사용자를 로그인하는 방법을 보여 줍니다.
EditProfileService 앱 등록 및 구성
이 단계에서는 MFA를 요구하여 프로필 편집 작업을 보호하는 메커니즘을 제공하는 EditProfileService 앱(API 앱) 앱을 등록합니다.
EditProfileService 앱 등록
최소한 애플리케이션 개발자 자격으로 Microsoft Entra 관리 센터에 로그인합니다.
여러 테넌트에 액세스할 수 있는 경우 상단 메뉴의 설정 아이콘
을 사용하여 디렉터리 + 구독 메뉴에서 외부 테넌트로 전환합니다.ID>애플리케이션>앱 등록으로 이동합니다.
+ 새 등록을 선택합니다.
표시되는 애플리케이션 등록 페이지에서 애플리케이션의 등록 정보를 입력합니다.
이름 섹션에서 의미 있는 애플리케이션 이름(예: edit-profile-service)을 입력합니다.
지원되는 계정 유형에서 이 조직 디렉터리의 계정만을 선택합니다.
등록을 선택하여 애플리케이션을 만듭니다.
등록이 완료되면 애플리케이션의 개요 창이 표시됩니다. 애플리케이션 소스 코드에서 사용할 애플리케이션(클라이언트) ID 를 기록합니다.
EditProfileService 앱 API 범위 구성
EditProfileService 앱은 클라이언트가 API 호출을 위해 획득해야 하는 권한을 노출해야 합니다.
API는 클라이언트 앱이 사용자에 대한 액세스 토큰을 성공적으로 가져오려면 위임된 권한이라고도 하는 최소 하나의 범위를 게시해야 합니다. 범위를 게시하려면 다음 단계를 수행합니다.
앱 등록 페이지에서 만든 API 애플리케이션(예: edit-profile-service)을 선택하여 개요 페이지를 엽니다.
관리에서 API 표시를 선택합니다.
페이지 위쪽의 애플리케이션 ID URI 옆에 있는 추가 링크를 선택하여 이 앱에 고유한 URI를 생성합니다.
api://{clientId}와 같은 제안된 애플리케이션 ID URI를 수락하고 저장을 선택합니다. 웹 애플리케이션은 웹 API에 대한 액세스 토큰을 요청할 때 API에 대해 정의된 각 범위의 접두사로 이 URI를 추가합니다.이 API에서 정의한 범위에서 범위 추가를 선택합니다.
다음 값을 입력하여 API에 대한 읽기 권한을 정의하는 다음 값을 입력한 다음, 범위 추가를 선택하여 변경 내용을 저장합니다.
속성 값 범위 이름 EditProfileService.ReadWrite 동의할 수 있는 사람 관리자 전용 관리자 동의 표시 이름 클라이언트는 프로필 편집 서비스를 통해 프로필을 편집합니다. 관리자 동의 설명 클라이언트 웹앱이 프로필 편집 서비스를 호출하여 프로필을 편집할 수 있도록 하는 범위입니다. State(상태) Enabled 관리에서 매니페스트를 선택하여 API 매니페스트 편집기를 엽니다.
accessTokenAcceptedVersion속성을2로 설정합니다.저장을 선택합니다.
앱 클라이언트 암호 추가
등록된 애플리케이션에 대한 클라이언트 암호를 만듭니다. 애플리케이션은 토큰을 요청할 때 클라이언트 암호를 사용하여 ID를 증명합니다.
- 앱 등록 페이지에서 만든 애플리케이션(예: edit-profile-service)을 선택하여 개요 페이지를 엽니다.
- 관리에서 인증서 및 비밀을 선택합니다.
- 새 클라이언트 비밀을 선택합니다.
- 설명 상자에 클라이언트 암호에 대한 설명(예: edit-profile-service 클라이언트 암호)을 입력합니다.
- 만료에서 조직의 보안 규칙에 따라 비밀이 유효한 기간을 선택한 다음 추가를 선택합니다.
- 비밀의 값을 기록합니다. 이후 단계에서 구성에 이 값을 사용합니다. 인증서 및 비밀 페이지에서 다른 페이지로 이동한 후에는 비밀 값이 다시 표시되지 않으며 어떠한 방법으로도 검색할 수 없습니다. 따라서 반드시 기록해 둡니다.
EditProfileService 앱에 User.ReadWrite 권한 부여
User.ReadWrite 는 사용자가 프로필을 업데이트할 수 있도록 하는 Microsoft Graph API 권한입니다. EditProfileService 앱에 User.ReadWrite 권한을 부여하려면 다음 단계를 사용합니다.
앱 등록 페이지에서 만든 애플리케이션(예: edit-profile-service)을 선택하여 개요 페이지를 엽니다.
관리 아래에서 API 권한을 선택합니다.
Microsoft API 탭을 선택한 다음 일반적으로 사용되는 Microsoft API에서 Microsoft Graph를 선택합니다.
위임된 권한을 선택한 다음 권한 목록에서 User.ReadWrite를 검색하여 선택합니다.
사용 권한 추가 단추를 선택합니다.
관리자 동의 부여
User.ReadWrite 권한을 올바르게 할당했습니다. 그러나 테넌트는 외부 테넌트이므로 고객 사용자 자신은 이러한 권한에 동의할 수 없습니다. 테넌트 관리자는 테넌트에 있는 모든 사용자를 대신하여 이 권한에 동의해야 합니다.
<테넌트 이름>에 대한 관리자 동의 부여, 예를 차례로 선택합니다.
새로 고침을 선택한 다음, 두 범위 모두에서 <테넌트 이름>에 대해 부여됨이 상태 아래에 표시되는지 확인합니다.
클라이언트 웹앱에 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 권한이 올바르게 할당되었습니다. 그러나 테넌트는 외부 테넌트이므로 고객 사용자 자신은 이러한 권한에 동의할 수 없습니다. 테넌트 관리자는 테넌트에 있는 모든 사용자를 대신하여 이 권한에 동의해야 합니다.
<테넌트 이름>에 대한 관리자 동의 부여, 예를 차례로 선택합니다.
새로 고침을 선택한 다음 두 범위에 대해 <테넌트 이름>에 부여됨이 상태 아래에 표시되는지 확인합니다.
CA 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 앱이라는 두 개의 앱이 포함되어 있습니다. 외부 테넌트 설정을 사용하려면 이러한 앱을 업데이트해야 합니다. 이렇게 하려면 다음 단계를 수행합니다.
코드 편집기에서 파일을 연
1-Authentication\7-edit-profile-with-mfa-express\App\authConfig.js다음 자리 표시자를 찾습니다.graph_end_point를 Microsoft Graph API 엔드포인트인https://graph.microsoft.com/으로 바꿉니다.Add_your_protected_scope_here및 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이전에 복사한 EditProfileService 앱 비밀 값으로 바꿉니다.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 챌린지를 완료하라는 메시지를 표시합니다.
프로필 세부 정보를 변경한 다음 저장 단추를 선택합니다.