15 분 안에 사용자 인증이있는 React 앱 구축

이 기사에서는 Okta의 로그인 위젯을 사용자 인증을위한 React 응용 프로그램에 통합하는 것을 보여줍니다. JavaScript 도구 인 위젯은 Okta의 인프라를 활용하여 프로세스를 단순화합니다.

튜토리얼은 기본 반응 프로젝트로 시작하여 OKTA 로그인 위젯 (NPM을 사용하여 설치)을 통해 인증을 추가합니다. 구성 요소 생성, Okta에서 OpenID Connect 응용 프로그램 구성 및 위젯을 통합하는 것이 포함됩니다. 프로세스에는 위젯 렌더링, 사용자 로그인 상태 확인 및 탐색 표시 줄에 로그인 링크 추가가 포함됩니다. 최종 구성 요소는 로그인 상태에 따라 로그인, 로그 아웃 및 조건부 렌더링을 관리합니다. 프로젝트 설정 :

종자 프로젝트 복제 : LoginPage git을 사용하여 간단한 반응 종자 프로젝트를 복제하는 것으로 시작하십시오 :

>

LoginPage

위젯 설치 :

NPM을 통해 OKTA 로그인 위젯 설치 :

스타일 추가 : 파일의 섹션 내에 Okta CDN의 위젯의 CSS를 포함시킵니다.

git clone https://github.com/leebrandt/simple-react-seed.git okta-react-widget-sample
cd okta-react-widget-sample

로그인 페이지 구성 요소 만들기 :

구성 요소 생성 : 내에서 파일을 만듭니다. 처음에는 간단한 구성 요소입니다

npm install @okta/okta-signin-widget@2.3.0 --save

라우팅 추가 :

import > 경로를 추가하십시오 :

okta 응용 프로그램 설정 : index.html Okta Developer Console에서 OpenID Connect 애플리케이션을 만듭니다. 리디렉션 URI를 .

로 설정하십시오

<link href="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.3.0/css/okta-sign-in.min.css" type="text/css" rel="stylesheet"/>
<link href="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.3.0/css/okta-theme.css" type="text/css" rel="stylesheet"/>

위젯 통합 :

위젯 초기화 : in , OktaSignin 위젯을 OKTA 조직 URL 및 클라이언트 ID로 초기화합니다.

1. 위젯 렌더링 :

   사용을 사용하여 위젯을 지정된 DIV 내에 렌더링합니다. 로그인 상태를 확인하고 로그인 위젯을 표시하고 로그 아웃을 처리하고 로그 아웃을 처리하는 메소드를 구현하고 (). 완전한 구성 요소 (오류 처리 및 로그인/로그 아웃 기능 포함)는 원본 기사에 제공됩니다.

2. 로그인 링크 추가 링크 : 탐색 표시 줄에 로그인 링크 추가 (예 : ). ./src/components/common/Navigation.js 테스트 :

   run
및 . 응용 프로그램은 이제 OKTA 로그인 위젯을 표시해야합니다

3. 다양한 인증 시나리오 (소셜 로그인, 비밀번호 재설정 등)에 대한 완전한 기능 코드 및 자세한 내용은 원본 기사 및 관련 GitHub 리포지토리에서 확인할 수 있습니다. 및 와 같은 자리 표시자를 실제 OKTA 구성 값으로 바꾸는 것을 잊지 마십시오. npm install

위 내용은 15 분 안에 사용자 인증이있는 React 앱 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!