useAuth
v2.0.0
useAuth 빠르게 설정하도록 설계되었습니다. Auth0 또는 Netlify Identity 및 적절한 액세스 키가있는 계정이 필요합니다.
$ yarn add react-use-auth
NPM에서 다운로드하고 Package.json 등을 추가합니다. NPM도 사용할 수 있습니다.
useAuth 자체 인증 클라이언트를 설치하지 않습니다. 대신 그들은 동료 의존성으로 표시됩니다.
사용하려는 내용에 따라 auth0-js 또는 netlify-identity-widget 설치하십시오. 더 곧 출시됩니다 :)
$ yarn add auth0-js
또는
$ yarn add netlify-identity-widget
사용하지 않는 클라이언트의 동료 종속성 누락에 대한 경고가 표시됩니다. 괜찮아.
useAuth <AuthConfig> 구성 요소를 사용하여 인증 클라이언트를 구성합니다. 우리는 무대 뒤에서 Xstate를 사용하여 인증 상태를 관리합니다.
모든 페이지에서 AuthConfig 렌더링을 확인하십시오.
Gatsby와 함께 gatsby-browser.js 에 추가하십시오. Nextjs를 사용하면 _app.js 가장 좋습니다. 구성 요소 트리를 감싸지 않아도 되지만 원하는 경우 할 수 있습니다. USEAUTH가 서버 측 렌더링을 중단하지 않도록합니다. ✌️
// gatsby-browser.js
import * as React from "react" ;
import { navigate } from "gatsby" ;
import { AuthConfig } from "react-use-auth" ;
import { Auth0 } from "react-use-auth/auth0" ;
export const wrapRootElement = ( { element } ) => (
< >
< AuthConfig
navigate = { navigate }
authProvider = { Auth0 }
params = { {
domain : "useauth.auth0.com" ,
clientID : "GjWNFNOHqlino7lQNjBwEywalaYtbIzh"
} }
/>
{ element }
</ >
) ; <AuthConfig> 글로벌 Xstate State Machine을 초기화하고 Auth0 클라이언트를 설정하고 모든 부하에서 사용자 세션을 검증합니다. 이제 전체 앱에서 인증에 쉽게 액세스 할 수 있습니다. :)
구성 옵션은 다음과 같습니다.
navigate - 리디렉션에 사용되는 탐색 기능. Gatsby, Nextjs 및 React 라우터로 테스트했습니다. 무엇이든 작동해야합니다.
authProvider - 인증 제공 업체에 대한 USEAuth 인터페이스.
params - 인증 제공 업체의 매개 변수
useAuth 클라이언트 포장지는 스마트 기본값을 제공합니다.
Auth0과 함께 사용중인 각 클라이언트에 대한 사용자 정의 구성에 대한 자세한 내용은 Netlify Identity와 함께 사용하십시오. 이것이 어떻게 작동하는지 알아 보려면 AUTH 제공 업체를 만드십시오.
추신 : 내 Auth0 도메인과 ClientId를 사용하여 useAuth 적합한 지 확인하십시오. 그래서 코드 스 니펫에서 볼 수있는 이유는 무엇입니까?
Auth0 및 대부분의 다른 인증 제공 업체는 OAUTH를 사용합니다. 이를 위해서는 사용자를 로그인 양식으로 리디렉션해야합니다. 로그인 한 후 제공자는 사용자를 앱으로 다시 리디렉션합니다.
Netlify Identity 로이 단계를 건너 뛸 수 있습니다. 인 페이지 팝업을 사용합니다.
React 페이지를 만드는 모든 방법은 작동해야합니다. Gatsby에 사용하는 코드는 다음과 같습니다.
import * as React from "react"
import { useAuth } from "react-use-auth"
const Auth0CallbackPage = ( ) => {
const { handleAuthentication } = useAuth ( )
React . useEffect ( ( ) => {
handleAuthentication ( )
} , [ handleAuthentication ] )
return (
< h1 >
This is the auth callback page,
you should be redirected immediately!
</ h1 >
)
}
export default Auth0CallbackPage 목표는 페이지를로드하고 일부 텍스트를 간략하게 표시하며 useAuth 에서 페이지로드에서 handleAuthentication 메소드를 실행하는 것입니다.
이 방법은 사용자의 정보로 로컬 스토리지에 쿠키를 생성하고 홈페이지로 다시 리디렉션합니다. postLoginRoute Param을 전달하여 다른 페이지로 리디렉션 할 수 있습니다.
Auth0 구성에서 유효한 콜백 URL로 <domain>/auth0_callback 추가하십시오.
REACT 앱에서 인증을 위해 useAuth 사용할 준비가되었습니다. ?
로그인 버튼은 다음과 같습니다.
const Login = ( ) => {
const { isAuthenticated , login , logout } = useAuth ( ) ;
if ( isAuthenticated ( ) ) {
return < Button onClick = { logout } > Logout </ Button > ;
} else {
return < Button onClick = { login } > Login </ Button > ;
}
} ; isAuthenticated 사용자의 쿠키가 여전히 유효한지 확인하는 방법입니다.
login 및 logout 해당 조치를 트리거합니다.
사용자에게 인사 할 수도 있습니다.
// src/pages/index.js
const IndexPage = ( ) => {
const { isAuthenticated , user } = useAuth ( )
return (
< Layout >
< SEO title = "Home" />
< h1 > Hi { isAuthenticated ( ) ? user . name : "people" } </ h1 >
)
} isAuthenticated 확인한 다음 user 객체를 사용하십시오. ✌️
더 자세한 문서는 useauth.dev를 방문하십시오
여기에서 시도해 볼 수 있습니다 https://gatsby-useauth-example.now.sh/
? Smizec Teller [email protected]
기부금, 문제 및 기능 요청을 환영합니다!
문제 페이지를 확인하십시오.
다른 인증 제공 업체를 지원하려고합니다. 제발 도와주세요 :)
이 프로젝트가 도움이된다면 ️를주세요!
Copyright © 2019 Smizec Teller [email protected].
이 프로젝트는 MIT 라이센스가 부여되었습니다.
이 readme은 readme-md-generator에 의해 ❤️으로 생성되었습니다
이 멋진 사람들에게 감사합니다 (이모티콘 키) :
데잔 | 제이슨 밀러 | 그레이엄 이발사 | Mateus Gabi | 호르헤 갈라 트 | Swizec Teller ? | 닉 리치몬드 |
올리 스님 | Henrik Wenz ? | Max Chehab | Joel Bartlett | Siddik Mehdi | 발목 끈 ? | 호르헤 쿠아 드라 |
Øyvind Marthinsen | Fredrik Søgaard | Artem Rudenko | 트래버스 핑커 턴 | 에릭 호지스 | Devin Fitzsimons | Jason Laster ? |
패트릭 아르 미노 |
이 프로젝트는 All-Contritors 사양을 따릅니다. 모든 종류의 공헌을 환영합니다!
