블레이저 웹 어셈블리에서 AAD B2C 설정 - 2

블레이저 웹 어셈블리에서 AAD B2C 설정 - 2

블레이저 웹 어셈블리에서 AAD B2C 설정 - 1 에서 이어진다.

Balzor Web Assembly 프로젝트 생성

1. Visual Studio를 켜서(Visual Studio 2022 기준) '새 프로젝트 만들기' 화면에서 Blazor WebAssembly앱을 선택 후 '다음'
   
   
   
2. '인증 유형'을 Microsoft ID 플랫폼을 선택한다. 이후 ASP.NET Core 호스팅을 체크한다.(해당 체크를 하면 클라이언트와 통신 인증이 미리 정의된 Server를 담당할 .NET 프로젝트가 생성된다. 만약 별도의 서버(Django 등)를 사용하려면 그것에 맞는 인증방법에 대해 알아봐야 할 것이다.)
   
   
   
3. 필수 구성요소를 확인 후 '다음'을 클릭
   
   
   
4. 우선 이전 문서에서 테넌트를 생성한 ID로 로그인과 선택이 되어있는 것을 확인후 '테넌트'를 선택한다. 이후 테넌트에서 생성된 애플리케이션 리스트가 보일 것인데 이전 문서에서 생성한 애플리케이션을 선택 후 '다음'을 클릭
   
   
   
5. 이후에는 따로 선택할 것 없이 '마침'을 클릭하면 구성요소가 프로젝트에 설치된다.

B2C 애플리케이션 클라이언트 설정

1. Azure 포탈에서 이전 문서에서 생성한 Azure AD B2C 테넌트에 접속한다.
2. '앱 등록' 메뉴를 열고 '새로고침'을 한번 한다. 이후 이전에 만들었던 애플리케이션 외에 똑같은 이름에 '-Client'가 붙어있는 애플리케이션이 생성된 것을 확인 가능하다. 해당 애플리케이션을 클릭한다.
   
   
   
3. '인증' 메뉴로 넘어가면 '플랫폼 구성'의 '단일 페이지 애플리케이션'에 리디렉션 URI가 기재되어 있을 것이다. 이곳에서 각각 중간에 authentication을 추가해 https://localhsot:포트번호/authentication/login-callback형식으로 변경한다.
   
   
   

로그인/회원가입 사용자 흐름 생성

1. Azure AD B2C 테넌트로 돌아와서 '사용자 흐름' 메뉴에 들어와 + 새 사용자 흐름 클릭
   
   
   
2. 사용자 흐름 형식 선택'에서 등록 및 로그인을 선택후 '만들기' 클릭
   
   
   
3. '이름' 항목에 해당 회원가입 흐름의 이름을 입력하고 필자의 경우에는(signupsignin1) ID공급자를 선택한다.
   
   
   
4. '사용자 특성 및 토큰 클레임' 항목에서 '자세히 표시'를 클릭한다. '특성 수집' 항목에서는 회원 가입시 필수로 입력하게될 항목을 선택한다. '클레임 반환'은 사용자 로그인시 반환될 클레임값을 선택한다. 최소한 이메일 주소, 표시 이름 정도는 전부 체크하는 것이 좋다.
   
   
   
5. 전부 체크되었으면 '만들기' 클릭

6. 해당 사용자 흐름이 만들어진 것을 확인한다.
   
   

여기까지는 Azure AAD B2C 웹 어셈블리의 클라이언트에서 회원가입과 로그인이 가능한 작업까지 끝났다. 다음 문서에서는 블레이저 WASM 프로젝트의 웹 세팅을 변경하여 해당 B2C서비스를 사용할 수 있도록 설정한다.