네이티브 인증을 사용하여 React SPA(단일 페이지 앱)에서 사용자 로그인 - Microsoft identity platform

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

이 빠른 시작에서는 React SPA(단일 페이지 애플리케이션)를 사용하여 네이티브 인증 API사용하여 사용자를 인증하는 방법을 보여 줍니다. 샘플 앱은 이메일 및 암호를 사용하여 사용자 등록, 로그인, 로그아웃 및 암호 재설정을 보여 줍니다.

필수 구성 요소

활성 구독이 있는 Azure 계정. 아직 계정이 없으신 경우에는 무료로 계정을 만드세요.
이 Azure 계정에는 애플리케이션을 관리할 수 있는 권한이 있어야 합니다. 다음 Microsoft Entra 역할에는 필요한 권한이 포함됩니다.
- 애플리케이션 관리자
- 애플리케이션 개발자
외부 테넌트입니다. 만들려면 다음 방법 중에서 선택합니다.
- Microsoft Entra 외부 ID 확장 사용하여 Visual Studio Code에서 직접 외부 테넌트를 설정합니다. (권장)
- Microsoft Entra 관리 센터에서 새 외부 테넌트 만듭니다.
사용자 흐름입니다. 자세한 내용은 외부 테넌트 앱에 대한 셀프 서비스 등록 사용자 흐름 만들기참조하세요. 사용자 흐름에 다음 사용자 특성이 포함되어 있는지 확인합니다.
- 지정된 이름
- 성
새 앱을 Microsoft Entra 관리 센터에 등록하고, 해당 조직 디렉터리의 계정만을 위해 구성합니다. 애플리케이션 등록에서 자세한 내용을 참조하세요. 다음 값을 애플리케이션 개요 페이지에서 기록하여 나중에 사용하십시오.
- 애플리케이션(클라이언트) ID
- 디렉터리(테넌트) ID
사용자 흐름에 애플리케이션 추가
Node.js
Visual Studio Code 또는 다른 코드 편집기.

이 앱이 공용 클라이언트이고 네이티브 인증을 사용할 수 있도록 지정하려면 공용 클라이언트 및 네이티브 인증 흐름을 사용하도록 설정합니다.

앱 등록 페이지에서 공용 클라이언트 및 네이티브 인증 흐름을 사용하도록 설정할 앱 등록을 선택합니다.
관리아래에서 인증선택합니다.
고급 설정에서 공용 클라이언트 흐름을 허용합니다.
1. 다음 모바일 및 데스크톱 흐름을 사용하도록예선택합니다.
2. 네이티브 인증사용하도록 설정하려면 예선택합니다.
저장 단추를 선택합니다.

샘플 애플리케이션을 가져오려면 GitHub에서 복제하거나 .zip 파일로 다운로드할 수 있습니다.

샘플을 복제하려면 명령 프롬프트를 열고 프로젝트를 만들 위치로 이동하고 다음 명령을 입력합니다.

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

샘플을 다운로드한 후, 이름 길이가 260자 미만인 파일 경로로 추출하십시오.

네이티브 인증 API는 CORS(원본 간 리소스 공유) 지원하지 않으므로 SPA 앱과 API 간에 프록시 서버를 설정해야 합니다.

이 코드 샘플에는 네이티브 인증 API URL 엔드포인트에 요청을 전달하는 CORS 프록시 서버가 포함되어 있습니다. CORS 프록시 서버는 포트 3001에서 수신 대기하는 Node.js 서버입니다.

프록시 서버를 구성하려면 proxy.config.js 파일을 열고 자리 표시자를 찾으세요.

tenantSubdomain 디렉터리(테넌트) 하위 도메인으로 바꿉니다. 예를 들어 테넌트 주 도메인이 contoso.onmicrosoft.com경우 contoso사용합니다. 테넌트 하위 도메인이 없는 경우 테넌트 세부 정보를 읽는 방법을알아봅니다.
tenantId 디렉터리(테넌트) ID로 바꿉니다. 테넌트 ID가 없는 경우 테넌트 세부 정보를읽는 방법을 알아봅니다.

이제 샘플 앱을 구성했으며 실행할 준비가 되었습니다.

터미널 창에서 다음 명령을 실행하여 CORS 프록시 서버를 시작합니다.
```
cd API\React\ReactAuthSimple
npm run cors
```
React 앱을 시작하려면 다른 터미널 창을 연 다음 다음 명령을 실행합니다.
```
cd API\React\ReactAuthSimple
npm start
```
웹 브라우저를 열고 http://localhost:3000/으로 이동하세요.
계정에 등록하려면 등록선택한 다음 프롬프트를 따릅니다.
로그인 후, 각각 로그인 및 암호 재설정를 선택하여 로그인과 암호 재설정을 테스트하세요.