분류 Reactjs

useAuth –React 앱에 인증을 추가하는 가장 간단한 방법

컨텐츠 정보

  • 조회 359 (작성일 )

본문

방금 React 앱에 인증을 추가하는 가장 간단한 방법을 만들었습니다. 심각하게 오픈 소스해야 합니다 당신을 위해 모든 것을 처리합니다. 사용자, 로그인 양식, 리디렉션, 구성 요소 간 공유 상태 모두.


https://swizec.com/blog/useauth-the-simplest-way-to-add-authentication-to-your-react-app/swizec/9179 



useAuth 발표 


useAuth는 React 앱에 인증을 추가하는 가장 간단한 방법입니다. 사용자 관리, 쿠키, 구성 요소 간 상태 공유, 로그인 양식, 시작하는 데 필요한 모든 것을 처리합니다.


그 중 많은 부분이 지금 Auth0을 통해 처리되며 다른 공급자를 추가 할 수 있습니다. Auth0은 내가 가진 것보다 더 많은 사용자에게 무료이며 Google이 아니기 때문에 Auth0을 좋아합니다.


https://gatsby-useauth-example.now.sh/에서 시도해 볼 수 있습니다.


https://github.com/Swizec/useAuth 코드를 참조하십시오


https://github.com/Swizec/useAuth/tree/master/examples/useauth-gatsby의 예제 코드


KunEemN.gif 


useAuth를 사용하는 방법 


useAuth는 빠르게 설정할 수 있도록 설계되었습니다. 앱 도메인과 클라이언트 ID를 가진 Auth0 계정이 필요합니다.


1. hook를 설치 


Click through for source 


npm에서 다운로드하고 package.json 등에 추가합니다. npm도 사용할 수 있습니다.


2. AuthProvider 설정 


useAuth는 AuthProvider 구성 요소를 사용하여 Auth0 클라이언트를 구성하고 구성 요소간에 상태를 공유합니다. 장면 뒤의 리듀서와 함께 React 컨텍스트를 사용하고 있지만 구현 세부 사항입니다.


루트 구성 요소 주위에 이것을 추가하는 것이 좋습니다. Gatsby에서는 gatsby-browser.js 및 gatsby-ssr.js에서 수행됩니다. 예. useAuth는 서버 측 렌더링을 중단하지 않도록 구축되었습니다.


그러나 물론 서버 측 "사용자"는 항상 로그 아웃됩니다.

Click through for source 


<AuthProvider>는 컨텍스트를 생성하고 상태 감속기를 설정하며 Auth0 클라이언트를 초기화합니다. 전체 앱에서 인증을 수행하는 데 필요한 모든 것


API에는 몇 가지 구성 옵션이 있습니다.

  1. navigate – 리디렉션에 사용되는 탐색 기능. Gatsby로 테스트했지만 아무 문제가 없습니다.
  2. auth0_domain – Auth0 앱에서
  3. auth0_client_id – Auth0 앱에서
  4. auth0_params – 기본 Auth0 클라이언트 매개 변수를 덮어 쓸 수 있는 객체

추신 : Auth는 서버 측에서 아무것도하지 않지만 컨텍스트가 존재하지 않으면 빌드 중에 useAuth가 오류를 발생시킵니다.


기본 Auth0 매개 변수 


기본적으로 useAuth의 Auth0 클라이언트는 다음 매개 변수를 사용합니다.

Click through for source 


도메인 및 clientID는 props에서 나옵니다.


redirectUri는 현재 도메인에서 auth0_callback 페이지를 사용하도록 설정되어 있습니다. Auth0은 사용자가 로그인 한 후 여기로 리디렉션되므로 쿠키 및 항목을 설정할 수 있습니다. useAuth가 이를 처리합니다.


대상은 api / v2를 사용하도록 설정되어 있습니다. 나는 이것이 필요하다는 것을 알고 있지만 정직하게 내 프로젝트 중 일부를 통해 복사하여 붙여 넣었습니다.


여기에 같은 타입을 입력하십시오. 나는 이것을 오래된 프로젝트에서 붙여 넣기하여 좋은 기본값이라고 생각했습니다.


범위는 소셜 로그인을 위해 openid가 필요하며 인증 후 사용자 프로필을 가져올 수 있습니다. 프로필과 이메일도 마찬가지입니다. auth0_params 재정의를 통해 더 추가 할 수 있습니다.


3. 콜백 페이지를 만듭니다 


Auth0 및 대부분의 다른 인증 공급자는 OAuth를 사용합니다. 이를 위해서는 사용자를 로그인 양식으로 리디렉션해야 합니다. 로그인 후 공급자는 사용자를 앱으로 다시 리디렉션합니다.


React 페이지를 작성하는 모든 방법이 작동해야 합니다. 여기 Gatsby에 사용합니다.

Click through for source 


목표는 페이지를 로드하고 텍스트를 간략하게 표시 한 다음 페이지 로드시 useAuth에서 handleAuthentication 메소드를 실행하는 것입니다.


이 방법을 사용하면 사용자 정보와 함께 로컬 저장소에 쿠키가 생성되고 다시 홈페이지로 리디렉션됩니다. 현재 다른 사후 로그인 페이지로 리디렉션하는 것은 지원되지 않지만 지금 생각한 것이 좋습니다


추신 : Auth0 구성에서 <domain> / auth0_callback을 유효한 콜백 URL로 추가하십시오


4. useAuth를 즐기십시오 

KunEemN.gif 

React 앱에서 인증에 useAuth를 사용할 준비가 되었습니다.


로그인 버튼은 다음과 같습니다.

Click through for source 

isAuthenticated는 사용자의 쿠키가 여전히 유효한지 확인하는 방법입니다. 로그인 및 로그 아웃은 해당 작업을 트리거합니다.


당신은 당신의 사용자에게 인사 할 수 있습니다

Click through for source 

isAuthenticated를 확인한 다음 사용자 개체를 사용하십시오. 그렇게 간단합니다.


https://gatsby-useauth-example.now.sh/에서 시도해 볼 수 있습니다.


https://github.com/Swizec/useAuth 코드를 참조하십시오


https://github.com/Swizec/useAuth/tree/master/examples/useauth-gatsby의 예제 코드