useAuth

useauth

أسرع طريقة لإضافة المصادقة إلى تطبيق React الخاص بك

ابدء

تم تصميم useAuth لتكون سريعًا في الإعداد. ستحتاج إلى حساب مع Auth0 أو NetLify Identity ومفاتيح الوصول المناسبة.

1. تثبيت الخطاف

 $ yarn add react-use-auth

التنزيلات من NPM ، يضيف إلى package.json ، إلخ. يمكنك استخدام NPM أيضًا.

2. قم بتثبيت عميل المصادقة

لا تقوم 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> تهيئة جهاز XState Global ، ويقوم بإعداد عميل Auth0 ، ويؤدي التحقق من صحة جلسات المستخدم في كل حمولة. لديك الآن سهولة الوصول إلى المصادقة في تطبيقك بأكمله :)

خيارات التكوين هي:

1. navigate - وظيفة التنقل الخاصة بك ، تستخدم لإعادة التوجيه. تم اختباره مع Gatsby و NextJs و React Router. أي شيء يجب أن يعمل.

2. authProvider - واجهة Useauth لمزود المصادقة الخاص بك.

3. params - معلمات مزود المصادقة الخاص بك

توفر أغلفة عميل useAuth افتراضات ذكية.

مزيد من التفاصيل حول استخدام التكوين المخصص لكل عميل قيد الاستخدام مع Auth0 ، واستخدام مع هوية NetLify. للتعرف على كيفية عمل هذا ، انتقل إلى إنشاء مزود مصادقة

ملاحظة: لا تتردد في استخدام مجال Auth0 و ClientId لمعرفة ما إذا كان useAuth مناسبًا لك. لهذا السبب هم مرئيون في مقتطف الكود؟

4. إنشاء صفحة رد الاتصال

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

الهدف من ذلك هو تحميل صفحة وإظهار بعض النص بإيجاز ، وتشغيل طريقة handleAuthentication من useAuth على تحميل الصفحة.

ستنشئ هذه الطريقة ملف تعريف ارتباط في التخزين المحلي مع معلومات المستخدم الخاصة بك وإعادة توجيه مرة أخرى إلى الصفحة الرئيسية. يمكنك تمرير postLoginRoute param لإعادة توجيه إلى صفحة مختلفة.

تأكد من إضافة <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].
هذا المشروع مرخص معهد ماساتشوستس للتكنولوجيا.

---

تم إنشاء هذا ReadMe مع ❤ بواسطة readme-md-generator

المساهمين

شكراً لهؤلاء الأشخاص الرائعين (مفتاح الرموز التعبيرية):

ديجان	جيسون ميلر	غراهام باربر	ماتيوس غابي	خورخي جالات	Swizec Teller ؟	نيك ريتشموند
Ollie Monk	هنريك وينز ؟	ماكس تشيهاب	جويل بارتليت	صديقي مهدي	جيس ؟	خورخي كوادرا
Øyvind Marthinsen	فريدريك سوجارد	أرتيم رودنكو	ترافرز بينكرتون	إريك هودجز	ديفين فيتزسيمونز	جيسون لستر ؟
باتريك أرمينيو

يتبع هذا المشروع مواصفات جميع المساهمين. مساهمات من أي نوع ترحيب!