15 분 안에 사용자 인증이있는 React 앱 구축-JS 튜토리얼-php.cn

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

Joseph Gordon-Levitt

풀어 주다： 2025-02-16 11:54:10

원래의

817명이 탐색했습니다.

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

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

Build a React App with User Authentication in 15 Minutes

종자 프로젝트 복제 : 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를 <head>.

로 설정하십시오

<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"/>

로그인 후 복사

Build a React App with User Authentication in 15 Minutes 위젯 통합 :

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

위젯 렌더링 :
사용을 사용하여 위젯을 지정된 DIV 내에 렌더링합니다. 로그인 상태를 확인하고 로그인 위젯을 표시하고 로그 아웃을 처리하고 로그 아웃을 처리하는 메소드를 구현하고 (). 완전한 구성 요소 (오류 처리 및 로그인/로그 아웃 기능 포함)는 원본 기사에 제공됩니다.
로그인 링크 추가 링크 : 탐색 표시 줄에 로그인 링크 추가 (예 : ). ./src/components/common/Navigation.js 테스트 :
run
다양한 인증 시나리오 (소셜 로그인, 비밀번호 재설정 등)에 대한 완전한 기능 코드 및 자세한 내용은 원본 기사 및 관련 GitHub 리포지토리에서 확인할 수 있습니다. 및 와 같은 자리 표시자를 실제 OKTA 구성 값으로 바꾸는 것을 잊지 마십시오. npm install

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