useAuth

useauth

วิธีที่เร็วที่สุดในการเพิ่มการรับรองความถูกต้องในแอพ React ของคุณ

เริ่มต้น

useAuth ได้รับการออกแบบให้ตั้งค่าอย่างรวดเร็ว คุณจะต้องมีบัญชีที่มี Auth0 หรือ Netlify Identity และคีย์การเข้าถึงที่เหมาะสม

1. ติดตั้งตะขอ

 $ yarn add react-use-auth

ดาวน์โหลดจาก NPM เพิ่มลงในแพ็คเกจของคุณ json ฯลฯ คุณสามารถใช้ NPM ได้เช่นกัน

2. ติดตั้งไคลเอ็นต์ Auth ของคุณ

useAuth ไม่ได้ติดตั้งไคลเอนต์การตรวจสอบความถูกต้องของตัวเอง แทนที่จะทำเครื่องหมายว่าเป็นการพึ่งพาเพื่อน

ติดตั้ง auth0-js หรือ netlify-identity-widget ขึ้นอยู่กับสิ่งที่คุณต้องการใช้ เพิ่มเติมเร็ว ๆ นี้ :)

 $ yarn add auth0-js

หรือ

 $ yarn add netlify-identity-widget

คุณจะเห็นคำเตือนเกี่ยวกับการพึ่งพาเพียร์ที่ขาดหายไปสำหรับลูกค้าที่คุณไม่ได้ใช้ ไม่เป็นไร

3. กำหนดค่าด้วย AuthConfig

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> เริ่มต้นเครื่อง Global XState State ตั้งค่าไคลเอ็นต์ Auth0 และตรวจสอบความถูกต้องของเซสชันผู้ใช้ในทุกโหลด ตอนนี้คุณสามารถเข้าถึงการรับรองความถูกต้องในแอพทั้งหมดของคุณได้อย่างง่ายดาย :)

ตัวเลือกการกำหนดค่าคือ:

1. navigate - ฟังก์ชั่นการนำทางของคุณใช้สำหรับการเปลี่ยนเส้นทาง ทดสอบกับ Gatsby, NextJs และ REACT เราเตอร์ ทุกสิ่งควรทำงาน

2. authProvider - อินเทอร์เฟซ USEAUTH ไปยังผู้ให้บริการตรวจสอบความถูกต้องของคุณ

3. params - พารามิเตอร์สำหรับผู้ให้บริการรับรองความถูกต้องของคุณ

useAuth Client Wrappers ให้ค่าเริ่มต้นที่ชาญฉลาด

รายละเอียดเพิ่มเติมเกี่ยวกับการใช้การกำหนดค่าที่กำหนดเองสำหรับไคลเอนต์แต่ละตัวที่ใช้กับ Auth0 และใช้กับ NetLify Identity หากต้องการเรียนรู้เกี่ยวกับวิธีการทำงานให้ไปสร้างผู้ให้บริการรับรองความถูกต้อง

PS: อย่าลังเลที่จะใช้โดเมน Auth0 ของฉันและ ClientID เพื่อดูว่า useAuth นั้นเหมาะสมกับคุณหรือไม่ นั่นเป็นเหตุผลที่พวกเขามองเห็นได้ในตัวอย่างรหัส?

4. สร้างหน้าโทรกลับ

Auth0 และผู้ให้บริการตรวจสอบสิทธิ์อื่น ๆ ส่วนใหญ่ใช้ OAuth ที่ต้องเปลี่ยนเส้นทางผู้ใช้ของคุณไปยังแบบฟอร์มการเข้าสู่ระบบ หลังจากเข้าสู่ระบบผู้ให้บริการจะเปลี่ยนเส้นทางผู้ใช้กลับไปที่แอปของคุณ

คุณสามารถข้ามขั้นตอนนี้ด้วยเอกลักษณ์ Netlify มันใช้ป๊อปอัพในหน้า

วิธีการใด ๆ ในการสร้างหน้าปฏิกิริยาควรใช้งานได้นี่คือรหัสที่ฉันใช้สำหรับ 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

เป้าหมายคือการโหลดหน้าเว็บแสดงข้อความสั้น ๆ และเรียกใช้วิธี handleAuthentication จาก useAuth ในการโหลดหน้าเว็บ

วิธีการนั้นจะสร้างคุกกี้ในพื้นที่เก็บข้อมูลในท้องถิ่นพร้อมข้อมูลของผู้ใช้ของคุณและเปลี่ยนเส้นทางกลับไปที่หน้าแรก คุณสามารถผ่าน postLoginRoute parm เพื่อเปลี่ยนเส้นทางไปยังหน้าอื่น

ตรวจสอบให้แน่ใจว่าคุณเพิ่ม <domain>/auth0_callback เป็น URL การโทรกลับที่ถูกต้องในการกำหนดค่า Auth0 ของคุณ

5. สนุกกับ useauth

คุณพร้อมที่จะใช้ useAuth สำหรับการตรวจสอบความถูกต้องในแอพ React ของคุณ -

นี่คือปุ่มเข้าสู่ระบบตัวอย่างเช่น:

 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/

ผู้เขียน

- swizec teller [email protected]

• GitHub: @Swizec
• Twitter: @swizec
• บล็อก: swizec.com/blog

- การบริจาค

ยินดีต้อนรับการมีส่วนร่วมปัญหาและคำขอคุณสมบัติ!
อย่าลังเลที่จะตรวจสอบหน้าปัญหา

ฉันกำลังมองหาที่จะสนับสนุนผู้ให้บริการตรวจสอบสิทธิ์อื่น ๆ กรุณาช่วย :)

แสดงการสนับสนุนของคุณ

ให้️ถ้าโครงการนี้ช่วยคุณได้!

ใบอนุญาต

ลิขสิทธิ์© 2019 Swizec Teller [email protected]
โครงการนี้ได้รับใบอนุญาต MIT

---

readme นี้ถูกสร้างขึ้นด้วย❤โดย readme-md-generator

ผู้มีส่วนร่วม

ขอบคุณไปที่คนที่ยอดเยี่ยมเหล่านี้ (คีย์อีโมจิ):

เดจิน	เจสันมิลเลอร์	Graham Barber	Mateus Gabi	Jorge Galat	Swizec Teller -	นิคริชมอนด์
พระภิกษุ	Henrik Wenz -	Max Chehab	Joel Bartlett	Siddik Mehdi	เจส -	Jorge Cuadra
Øyvind Marthinsen	Fredrik Søgaard	อาร์เทม Rudenko	Travers Pinkerton	Eric Hodges	Devin Fitzsimons	Jason Laster -
Patrick Arminio

โครงการนี้เป็นไปตามข้อกำหนดทั้งหมดของผู้เข้าร่วม การมีส่วนร่วมทุกชนิดยินดีต้อนรับ!