Share via

Azure Active Directory B2C를 사용하여 자체 React 애플리케이션에서 인증을 사용하도록 설정

  • 아티클

이 문서에서는 고객의 React SPA(단일 페이지 애플리케이션)에 Azure AD B2C(Azure Active Directory B2C) 인증을 추가하는 방법을 보여 줍니다. React 애플리케이션을 React용 MSAL 인증 라이브러리와 통합하는 방법을 알아봅니다.

샘플 React 단일 페이지 애플리케이션에서 인증 구성이라는 제목의 관련 문서와 함께 이 문서를 사용하세요. 샘플 React 앱을 자체 React 앱으로 대체합니다. 이 문서의 단계를 완료하면 애플리케이션이 Azure AD B2C를 통해 로그인을 수락합니다.

필수 조건

샘플 React 단일 페이지 애플리케이션에서 인증 구성 문서의 필수 구성 요소와 통합 단계를 검토하세요.

1단계: React 앱 프로젝트 만들기

기존 React 앱을 사용하거나 새 React 앱을 만들 수 있습니다. 새 프로젝트를 만들려면 명령 셸에서 다음 명령을 실행합니다.

npx create-react-app my-app
cd my-app

2단계: 종속성 설치

MSAL 브라우저 및 MSAL React 라이브러리를 애플리케이션에 설치하려면 명령 셸에서 다음 명령을 실행합니다.

npm i @azure/msal-browser  @azure/msal-react

react-router-dom 버전 5.*를 설치합니다. react-router-dom 패키지에는 웹 애플리케이션에서 React 라우터를 사용하기 위한 바인딩이 포함되어 있습니다. 명령 셸에서 다음 명령을 실행합니다.

npm i react-router-dom@5.3.3

React용 부트스트랩(UI의 경우 선택 사항)을 설치합니다.

npm i bootstrap react-bootstrap

3단계: 인증 구성 요소 추가

샘플 코드는 다음 구성 요소로 구성됩니다. 샘플 React 앱에서 이러한 구성 요소를 사용자 고유 앱에 추가합니다.

  • public/index.html - 묶음 프로세스에서 이 파일을 템플릿으로 사용하여 React 구성 요소를 <div id="root"> 요소에 삽입합니다. 브라우저에서 직접 열면 빈 페이지가 표시됩니다.

  • src/authConfig.js - Azure AD B2C ID 공급자 및 웹 API 서비스에 대한 정보가 포함된 구성 파일입니다. React 앱은 이 정보를 사용하여 Azure AD B2C와 트러스트 관계를 설정하고, 사용자를 로그인 및 로그아웃하고, 토큰을 획득하고, 토큰의 유효성을 검사합니다.

  • src/index.js - 애플리케이션을 가리키는 JavaScript 진입점입니다. 이 JavaScript 파일은 다음을 수행합니다.

    • App을 public/index.html 페이지의 <div id="root"> 요소에 루트 구성 요소로 탑재합니다.
    • authConfig.js 파일에 정의된 구성을 사용하여 MSAL PublicClientApplication 라이브러리를 시작합니다. MSAL React를 다시 렌더링할 때 다시 인스턴스화되지 않도록 하려면 구성 요소 외부에서 인스턴스화해야 합니다.
    • MSAL 라이브러리를 인스턴스화한 후 JavaScript 코드가 msalInstance를 애플리케이션 구성 요소에 속성을 전달합니다. 예: <App instance={msalInstance} />.

  • src/App.jsx - App 및 Pages 구성 요소를 정의합니다.

    • App 구성 요소는 앱의 최상위 구성 요소입니다. MsalProvider 구성 요소 사이의 모든 것을 래핑합니다. MsalProvider 아래의 모든 구성 요소는 컨텍스트 및 MSAL React에서 제공하는 모든 후크 및 구성 요소를 통해 PublicClientApplication 인스턴스에 액세스할 수 있습니다. 앱 구성 요소는 PageLayout 및 해당 Pages 자식 요소를 탑재합니다.

    • Pages 구성 요소는 MSAL 이벤트 콜백을 등록 및 등록 취소합니다. 이벤트는 MSAL 오류를 처리하기 위해 사용됩니다. 또한 앱의 라우팅 논리를 정의합니다.

    Important

    앱 구성 요소 파일 이름이 App.js면 이를 App.jsx로 변경합니다.

  • src/pages/Hello.jsx - OAuth2 전달자 토큰을 사용하여 보호되는 리소스를 호출하는 방법을 보여 줍니다.

    • PublicClientApplication 인스턴스를 반환하는 useMsal 후크를 사용합니다.
    • PublicClientApplication 인스턴스의 경우 REST API를 호출하기 위해 액세스 토큰을 획득합니다.
    • REST API에서 데이터를 가져오기 위해 callApiWithToken 함수를 호출하고 DataDisplay 구성 요소를 사용하여 결과를 렌더링합니다.

  • src/components/NavigationBar.jsx - 로그인, 로그아웃, 프로필 편집 및 REST API 재설정 단추가 있는 앱 위쪽 탐색 모음입니다.

    • AuthenticatedTemplate 및 UnauthenticatedTemplate이 사용되며, 각각 사용자가 인증되었거나 인증되지 않은 경우에만 자식을 렌더링합니다.
    • 리디렉션 및 팝업 창 이벤트를 사용하여 로그인 및 로그아웃을 처리합니다.

  • src/components/PageLayout.jsx

    • 페이지 간 이동 시 사용자에게 일관적인 경험을 제공하는 일반적인 레이아웃입니다. 이 레이아웃에는 앱 헤더, NavigationBar 구성 요소, 바닥글 및 자식 구성 요소와 같은 일반적인 사용자 인터페이스 요소가 포함되어 있습니다.
    • 사용자가 인증된 경우에만 자식을 렌더링하는 AuthenticatedTemplate을 사용합니다.

  • src/components/DataDisplay.jsx - REST API 호출에서 데이터 반환을 렌더링합니다.

  • src/styles/App.css 및 src/styles/index.css - 앱의 CSS 스타일 지정 파일입니다.

  • src/fetch.js - HTTP 요청을 REST API로 가져옵니다.

4단계: React 앱 구성

인증 구성 요소를 추가한 후 Azure AD B2C 설정을 통해 React 앱을 구성합니다. Azure AD B2C ID 공급자 설정은 authConfig.js 파일에 구성 됩니다 .

자세한 내용은 React 앱 구성을 참조하세요.

5단계: React 애플리케이션 실행

  1. Visual Studio Code에서 새 터미널을 열고 다음 명령을 실행합니다.

    npm install && npm update
npm start

    콘솔 창에는 애플리케이션이 호스트되는 포트 번호가 표시됩니다.

    Listening on port 3000...

  2. REST API를 호출하려면 웹 API 실행 방법 안내를 따르세요.

  3. 브라우저에서 http://localhost:3000으로 이동하여 애플리케이션을 확인합니다.

다음 단계