다음을 통해 공유

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

중요합니다

2025년 5월 1일부터 새 고객을 위해 Azure AD B2C를 더 이상 구매할 수 없습니다. FAQ에서 자세히 알아보세요.

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

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

  • src/App.jsx - 앱 및 페이지 구성 요소를 정의합니다.

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

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

    중요합니다

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

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

    • PublicClientApplication 인스턴스를 반환하는 useMsal 후크를 사용합니다.
    • PublicClientApplication 인스턴스를 사용하면 REST API를 호출하는 액세스 토큰을 획득합니다.
    • callApiWithToken 함수를 호출하여 REST API에서 데이터를 가져오고 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 - REST API에 HTTP 요청을 페치합니다.

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 보려면

다음 단계

  • Last updated on