사용자 로그인을 위한 사용자 지정 페이지 설정
이 문서에서는 Microsoft Entra B2C(Business-to-Consumer) 테넌트 사용자를 위한 사용자 지정 로그인을 처리하는 Microsoft Dynamics 365 Commerce에서 사용자 지정 페이지를 작성하는 방법을 설명합니다.
Dynamics 365 Commerce에서 작성된 사용자 지정 페이지를 사용하여 사용자 로그인 흐름을 처리하려면 Commerce 환경에서 참조할 Microsoft Entra 정책을 설정해야 합니다. Microsoft Entra B2C 애플리케이션을 사용하여 "가입 및 로그인", "프로필 편집" 및 "암호 재설정" Microsoft Entra B2C 정책을 구성할 수 있습니다. 그런 다음 Microsoft Dynamics LCS(Lifecycle Services)를 사용하여 Commerce 환경에 대해 수행되는 프로비저닝 프로세스 중에 Microsoft Entra B2C 테넌트 및 정책 이름을 참조할 수 있습니다.
사용자 지정 Commerce 페이지는 로그인, 가입, 계정 프로필 편집, 암호 재설정 또는 일반 Microsoft Entra 모듈을 사용하여 빌드할 수 있습니다. 이러한 사용자 지정 페이지에 대해 게시된 페이지 URL은 Azure Portal의 Microsoft Entra B2C 정책 구성에서 참조되어야 합니다.
경고
Microsoft Entra ID B2C는 2021년 8월 1일까지 오래된(레거시) 사용자 흐름을 중단합니다. 따라서 사용자 흐름을 새로운 권장 버전으로 마이그레이션할 계획을 세워야 합니다. 새 버전은 기능 패리티와 새로운 기능을 제공합니다. 자세한 내용은 Microsoft Entra ID B2C의 사용자 흐름을 참조하세요.
Commerce 버전 10.0.15 이상의 모듈 라이브러리는 권장되는 B2C 사용자 흐름과 함께 사용해야 합니다. Microsoft Entra ID B2C에서 제공되는 기본 사용자 정책 페이지도 사용할 수 있으며 회사 브랜딩과 관련된 배경 이미지, 로고 및 배경색 변경을 추가할 수 있습니다. 디자인 기능이 더 제한되어 있지만 기본 사용자 정책 페이지는 전용 사용자 지정 페이지를 만들고 구성하지 않고도 Microsoft Entra B2C 정책 기능을 제공합니다.
B2C 정책 설정
Microsoft Entra B2C 테넌트를 설정하고 이를 Commerce 환경과 연결한 후 Azure Portal의 Microsoft Entra B2C 페이지로 이동한 다음 메뉴의 정책에서 사용자 흐름(정책)을 선택합니다.
이제 "가입 및 로그인", "프로필 편집" 및 "암호 재설정" 사용자 로그인 흐름을 구성할 수 있습니다.
"가입 및 로그인" 정책 구성
"가입 및 로그인" 정책을 구성하려면 다음 단계를 따르세요.
새 사용자 흐름을 선택하고, 가입 및 로그인을 선택하고, 추천 탭을 선택한 후, 만들기를 선택합니다.
정책 이름을 입력합니다(예: B2C_1_SignInSignUp).
ID 공급자 섹션에서 정책에 사용할 ID 공급자를 선택합니다. 최소한, 이메일 가입을 선택해야 합니다.
특성 수집 열에서 이메일 주소, 이름 및 성 확인란을 선택하세요.
반품 클레임 열에서 이메일 주소, 이름, ID 공급자, 성 및 사용자의 개체 ID 확인란을 선택하세요.
확인을 선택하여 해당 정책을 생성합니다.
새 정책 이름을 두 번 클릭한 후 탐색 창에서 속성을 선택합니다.
페이지 레이아웃을 적용하는 JavaScript 활성화(프리뷰) 옵션을 켜기로 설정합니다.
참고
정책 이름은 Commerce 환경에서 완전히 참조됩니다. (B2C_1_ 접두사는 참조에 포함됩니다.) 정책이 생성된 후에는 이름을 바꿀 수 없습니다. Commerce 환경에 대한 기존 정책을 바꾸는 경우 원래 정책을 삭제하고 동일한 이름을 가진 새 정책을 작성할 수 있습니다. 또는 환경이 이미 프로비저닝된 경우 서비스 요청을 통해 새 정책 이름을 제출할 수 있습니다.
사용자 지정 페이지를 구축한 후 설정을 완료하려면 이 정책으로 돌아와야 합니다. 지금은 정책을 닫고 Azure Portal의 사용자 흐름(정책) 페이지로 돌아갑니다.
"프로필 편집" 정책 구성
"프로필 편집" 정책을 구성하려면 다음 단계를 따르세요.
- 새 사용자 흐름을 선택하고, 프로필 편집을 선택하고, 추천 탭을 선택한 후, 만들기를 선택합니다.
- 정책 이름을 입력합니다(예: B2C_1_EditProfile).
- ID 공급자 섹션에서 정책에 사용할 ID 공급자를 선택합니다. 최소한, 로컬 계정 로그인을 선택해야 합니다.
- 특성 수집 열에서 이름 및 성 확인란을 선택하세요.
- 반품 클레임 열에서 이메일 주소, 이름, ID 공급자, 성 및 사용자의 개체 ID 확인란을 선택하세요.
- 확인을 선택하여 해당 정책을 생성합니다.
- 새 정책 이름을 두 번 클릭한 후 탐색 창에서 속성을 선택합니다.
- 페이지 레이아웃을 적용하는 JavaScript 활성화(프리뷰) 옵션을 켜기로 설정합니다.
사용자 지정 페이지를 구축한 후 설정을 완료하려면 이 정책으로 돌아와야 합니다. 지금은 정책을 닫고 Azure Portal의 사용자 흐름(정책) 페이지로 돌아갑니다.
"암호 재설정" 정책 구성
"암호 재설정" 정책을 구성하려면 다음 단계를 따르세요.
- 새 사용자 흐름을 선택한 다음 암호 재설정 옵션을 선택하고 추천 탭을 선택하고 만들기를 클릭하세요.
- 정책 이름을 입력합니다(예: B2C_1_ForgetPassword).
- ID 공급자 섹션에서 이메일 주소를 사용하여 암호 재설정을 선택합니다.
- 반품 클레임 열에서 이메일 주소, 이름, 성 및 사용자의 개체 ID 확인란을 선택하세요.
- 확인을 선택하여 해당 정책을 생성합니다.
- 새 정책 이름을 두 번 클릭한 후 탐색 창에서 속성을 선택합니다.
- 페이지 레이아웃을 적용하는 JavaScript 활성화(프리뷰) 옵션을 켜기로 설정합니다.
사용자 지정 페이지를 구축한 후 설정을 완료하려면 이 정책으로 돌아와야 합니다. 지금은 정책을 닫고 Azure Portal의 사용자 흐름(정책) 페이지로 돌아갑니다.
사용자 지정 페이지 빌드
Microsoft Entra B2C 사용자 정책에 대한 사용자 정의 페이지를 구축하기 위해 전용 Microsoft Entra 모듈이 Commerce에 포함되어 있습니다. 아래에 자세히 설명된 기본 Microsoft Entra B2C 모듈을 사용하여 각 사용자 정책 페이지의 레이아웃에 맞게 페이지를 특별히 구축할 수 있습니다. 또는 Microsoft Entra Generic 모듈을 Microsoft Entra ID B2C의 모든 페이지 레이아웃 및 정책에 사용할 수 있습니다(아래 나열되지 않은 정책 내의 페이지 레이아웃 옵션에도 해당).
- 페이지별 Microsoft Entra 모듈은 Microsoft Entra ID B2C에 의해 렌더링된 데이터 입력 항목에 바인딩됩니다. 이 모듈을 사용하면 페이지의 요소 위치를 보다 효과적으로 제어할 수 있습니다. 그러나 아래에 설명된 기본 설정 이상의 차이를 고려하려면 더 많은 페이지와 모듈 확장을 구축해야 할 수도 있습니다.
- Microsoft Entra Generic 모듈은 Microsoft Entra B2C용 "div" 요소를 생성하여 사용자 정책 페이지 레이아웃의 모든 요소를 렌더링하여 페이지의 B2C 기능에 더 많은 유연성을 제공하지만 위치 지정 및 스타일 지정(CSS를 사용하여 사이트의 모양과 느낌을 일치시킬 수 있음)에 대한 제어는 줄어듭니다.
Microsoft Entra Generic 모듈을 사용하여 단일 페이지를 만들고 모든 사용자 정책 페이지에 사용하거나 로그인, 가입, 프로필 편집, 암호 재설정 및 암호 재설정 확인을 위해 개별 Microsoft Entra 모듈을 사용하여 특정 페이지를 빌드할 수 있습니다. 아래에 나와 있는 페이지 레이아웃에 대해 특정 Microsoft Entra 페이지를 사용하고 이러한 페이지 또는 다른 사용자 정책 페이지 내의 나머지 페이지 레이아웃에 대해 일반 Microsoft Entra 모듈 페이지를 사용하여 두 페이지를 혼합하여 사용할 수도 있습니다.
모듈 라이브러리와 함께 제공되는 Microsoft Entra 모듈에 대해 자세히 알아보려면 ID 관리 페이지 및 모듈에서 자세한 내용을 읽어보세요.
사용자 로그인을 처리하기 위해 특정 ID 모듈이 포함된 사용자 지정 페이지를 구축하려면 다음 단계를 따르세요.
- Commerce 사이트 작성기에서 사이트로 이동합니다.
- 다음 5가지 템플릿과 페이지를 빌드하세요(사이트에 아직 없는 경우).
- 로그인 모듈을 사용하는 로그인 템플릿 및 페이지.
- 가입 모듈을 사용하는 가입 템플릿 및 페이지.
- 암호 재설정 모듈을 사용하는 암호 재설정 템플릿 및 페이지입니다.
- 암호 재설정 확인 모듈을 사용하는 암호 재설정 확인 템플릿 및 페이지입니다.
- 계정 프로필 편집 모듈을 사용하는 프로필 편집 템플릿 및 페이지입니다.
페이지를 빌드할 때 다음 지침을 따르십시오.
- 각 페이지나 모듈에 대해 비즈니스 요구 사항에 가장 적합한 레이아웃과 스타일을 사용하십시오.
- Microsoft Entra B2C 설정에서 사용해야 하는 모든 페이지 및 URL을 게시합니다.
- 페이지 및 URL이 게시된 후 Microsoft Entra B2C 정책 구성에 사용해야 하는 URL을 수집합니다. ?preloadscripts=true 접미사는 사용 시 모든 URL에 추가됩니다.
중요
Microsoft Entra B2C에서 참조하도록 빌드된 페이지는 Microsoft Entra B2C 테넌트의 도메인에서 직접 제공됩니다. 상대 링크가 있는 범용 머리글과 바닥글을 재사용하지 마십시오. 이 페이지는 Microsoft Entra B2C 도메인을 사용하는 경우 모든 링크에는 절대 URL만 사용해야 합니다. Microsoft Entra 관련 사용자 지정 페이지에 대한 절대 URL이 있는 특정 머리글 및 바닥글을 만들고 Retail 서버에 연결해야 하는 Commerce 관련 모듈을 제거하는 것이 좋습니다. 예를 들어 즐겨찾기, 검색 창, 로그인 링크 및 카트 모듈은 Microsoft Entra B2C 사용자 흐름에 사용되는 페이지에 포함되어서는 안 됩니다.
사용자 지정 페이지 정보로 Microsoft Entra B2C 정책 구성
Azure Portal에서 Microsoft Entra B2C 페이지로 돌아온 다음 메뉴의 정책에서 사용자 흐름(정책)을 선택합니다.
사용자 지정 페이지 정보로 "가입 및 로그인" 정책 업데이트
사용자 지정 페이지 정보로 "등록 및 로그인" 정책을 업데이트하려면 다음 단계를 수행합니다.
앞서 구성한 로그인 및 가입 정책의 탐색 창에서 페이지 레이아웃을 선택합니다.
통합 가입 또는 로그인 페이지 레이아웃을 선택하세요.
사용자 지정 페이지 콘텐츠 사용 옵션을 예로 설정합니다.
사용자 지정 페이지 URI 필드에 전체 로그인 URL을 입력합니다. ?preloadscripts=true 접미사를 포함하세요. 예를 들어
www.<my domain>.com/sign-in?preloadscripts=true을 입력합니다.페이지 레이아웃 버전 필드에서 버전 2.1.0 이상을 선택합니다(Commerce 버전 10.0.15 이상에는 모듈 라이브러리 필요).
저장을 선택합니다.
로컬 계정 가입 페이지 레이아웃을 선택합니다.
사용자 지정 페이지 콘텐츠 사용 옵션을 예로 설정합니다.
사용자 지정 페이지 URI 필드에 전체 가입 URL을 입력합니다. ?preloadscripts=true 접미사를 포함하세요. 예를 들어
www.<my domain>.com/sign-up?preloadscripts=true을 입력합니다.페이지 레이아웃 버전 필드에서 버전 2.1.0 이상을 선택합니다(Commerce 버전 10.0.15 이상에는 모듈 라이브러리 필요).
사용자 특성 섹션에서 다음 단계를 따르세요.
- 이름 및 성 특성의 경우 검증 필요 열에서 아니요를 선택합니다.
- 이메일 주소 특성의 경우 검증 필요 열에 선택된 기본값인 예를 그대로 두는 것이 좋습니다. 이 옵션을 사용하면 특정 이메일 주소로 가입하는 사용자가 해당 이메일 주소를 소유하고 있음을 확인할 수 있습니다.
- 이메일 주소, 이름 및 성 특성의 경우 선택 사항 열에서 아니요를 선택합니다.
저장을 선택합니다.
사용자 지정 페이지 정보로 "프로필 편집" 정책 업데이트
사용자 지정 페이지 정보로 "프로필 편집" 정책을 업데이트하려면 다음 단계를 수행합니다.
- 앞서 구성한 프로필 편집 정책의 탐색 창에서 페이지 레이아웃을 선택합니다.
- 프로필 편집 페이지 레이아웃을 선택합니다(화면에 따라 다른 레이아웃 옵션을 지나 아래로 스크롤해야 할 수도 있음).
- 사용자 지정 페이지 콘텐츠 사용 옵션을 예로 설정합니다.
- 사용자 지정 페이지 URI 필드에 전체 프로필 편집 URL을 입력합니다. ?preloadscripts=true 접미사를 포함하세요. 예를 들어
www.<my domain>.com/profile-edit?preloadscripts=true을 입력합니다. - 페이지 레이아웃 버전의 경우, 버전 2.1.0 이상을 선택합니다(Commerce 버전 10.0.15 이상에는 모듈 라이브러리 필요).
- 사용자 특성 섹션에서 다음 단계를 따르세요.
- 이름 및 성 특성의 경우 선택 사항 열에서 아니요를 선택합니다.
- 이름 및 성 특성의 경우 검증 필요 열에서 아니요를 선택합니다.
- 저장을 선택합니다.
사용자 지정 페이지 정보로 "암호 재설정" 정책 업데이트
사용자 지정 페이지 정보로 "암호 재설정" 정책을 업데이트하려면 다음 단계를 수행합니다.
- 앞서 구성한 암호 재설정 정책의 탐색 창에서 페이지 레이아웃을 선택합니다.
- 암호 찾기 페이지 레이아웃을 선택합니다.
- 사용자 지정 페이지 콘텐츠 사용 옵션을 예로 설정합니다.
- 사용자 지정 페이지 URI 필드에 전체 암호 재설정 검증 URL을 입력합니다. ?preloadscripts=true 접미사를 포함하세요. 예를 들어
www.<my domain>.com/password-reset-verification?preloadscripts=true을 입력합니다. - 페이지 레이아웃 버전 필드에서 버전 2.1.0 이상을 선택합니다(Commerce 버전 10.0.15 이상에는 모듈 라이브러리 필요).
- 저장을 선택합니다.
- 암호 변경 페이지 레이아웃을 선택합니다.
- 사용자 지정 페이지 콘텐츠 사용 옵션을 예로 설정합니다.
- 사용자 지정 페이지 URI 필드에 전체 암호 재설정 URL을 입력합니다. ?preloadscripts=true 접미사를 포함하세요. 예를 들어
www.<my domain>.com/password-reset?preloadscripts=true을 입력합니다. - 페이지 레이아웃 버전 필드에서 버전 2.1.0 이상을 선택합니다(Commerce 버전 10.0.15 이상에는 모듈 라이브러리 필요).
- 저장을 선택합니다.
레이블 및 설명에 대한 기본 텍스트 문자열 사용자 지정
모듈 라이브러리에서 로그인 모듈은 레이블 및 설명에 대한 기본 텍스트 문자열로 미리 채워져 있습니다. 작업 중인 모듈의 속성 창에서 문자열을 사용자 지정할 수 있습니다. 페이지의 추가 문자열(예: 암호를 잊으셨나요? 링크 텍스트 또는 계정 만들기 클릭 유도 텍스트)를 사용하려면 Commerce SDK(소프트웨어 개발 키트)를 사용하고 로그인 모듈에 대한 global.json 파일의 값을 업데이트해야 합니다.
예를 들어, 암호 찾기 링크의 기본 텍스트는 암호를 잊으셨나요?입니다. 다음은 로그인 페이지의 기본 텍스트를 보여줍니다.
그러나 모듈 라이브러리 로그인 모듈의 global.json 파일에서는 다음 그림과 같이 텍스트를 암호를 잊으셨나요?로 편집할 수 있습니다.
global.json 파일을 업데이트하고 변경 사항을 게시하면 Commerce와 라이브 로그인 페이지의 로그인 모듈에 새 링크 텍스트가 나타납니다.