Auth0 يبسط عملية إنشاء هوية المستخدم في تطبيق الويب الخاص بك. يوفر ميزات مصادقة وتفويض آمنة وقابلة للتخصيص من خلال واجهة برمجة التطبيقات الخاصة به. استخدمه ، ولن تقلق بشأن بناء نظام المصادقة الخاص بك من البداية.

يجعل الدمج مع Auth0 من السهل تضمين مصادقة موثوقة في تطبيق React الخاص بك ويضمن الوصول الآمن إلى تطبيقك.

توضح الخطوات التالية ما هو ضروري لدمج Auth0 في تطبيق React.

ما هو Auth0؟

Auth0 هي خدمة ويب توفر واجهة برمجة تطبيقات آمنة للتعامل معها مصادقة المستخدم والترخيص في تطبيقاتك.

يوفر نظام مصادقة قابل للتخصيص يمكنك دمجه بسهولة في تطبيق React الخاص بك. بمجرد توصيل Auth0 بتطبيقك ، فإنه يتعامل مع باقي عبء عمل المصادقة.

كيف يعمل Auth0؟

Auth0 يوفر ميزة تسجيل الدخول العام التي تنفذ تدفق المصادقة. في كل مرة يريد فيها المستخدم تسجيل الدخول ، تعيد واجهة برمجة التطبيقات توجيهه إلى صفحة تسجيل دخول Auth0 ، وتتم مصادقته ، ثم يتم إرسال بيانات حمولة المصادقة الناجحة إلى تطبيقك.

يمكنك تخصيص سير عمل المصادقة لتطبيقك من خلال تحديد طرق تسجيل دخول مختلفة. يوفر تسجيل الدخول العام اسم مستخدم وكلمة مرور كمصادقة أساسية ، ولكن يمكنك ذلك أضف أيضًا خيارات أخرى مثل تسجيل الدخول الاجتماعي ، عبر مزود مثل Google ، وعوامل متعددة المصادقة.

ميزة استخدام هذا النوع من المصادقة هي أنك لست بحاجة إلى أن تكون على دراية بالهوية بروتوكولات مثل OAuth 2.0 أو OpenID Connect ، والتي تُستخدم بشكل شائع لإنشاء مصادقة آمنة الأنظمة.

أنشئ مشروعًا جديدًا على Auth0 Developer Console

للبدء ، ستحتاج أولاً إلى التسجيل للحصول على Auth0 حساب. بعد التسجيل ، انتقل إلى لوحة التحكم الخاصة بك وانقر فوق إنشاء التطبيق لتكوين إعدادات مشروع المصادقة.

Auth0 يوفر تكوينات مصادقة مختلفة حسب نوع التطبيق الذي تقوم ببنائه. بالنسبة لهذا البرنامج التعليمي ، قم بملء اسم التطبيق الخاص بك ، وحدد تطبيقات الويب ذات الصفحة الواحدة، ثم انقر فوق يحفظ.

بعد ذلك ، حدد تتفاعل من قائمة التقنيات التي يدعمها Auth0.

تكوين URIs للتطبيق

بعد إنشاء التطبيق الخاص بك وتكوين الإعدادات المطلوبة ، في لوحة معلومات التطبيق الخاص بك ، انقر فوق إعدادات علامة التبويب لإعداد خصائص URI المطلوبة.

قم بتعيين الخصائص التالية:

• عناوين URL لمعاودة الاتصال المسموح بها. عنوان URL الذي سيتصل به خادم Auth0 بعد مصادقة المستخدم.
• عناوين URL المسموح بها لتسجيل الخروج. عنوان URL الذي ستقوم Auth0 بإعادة توجيه المستخدم إليه عند تسجيل الخروج.
• أصول الويب المسموح بها. عنوان URL المسموح به الذي يمكن أن يأتي منه طلب التفويض.

للتنمية المحلية ، يمكنك استخدام http://localhost: 3000 URL. ومع ذلك ، بمجرد دفع الكود الخاص بك إلى الإنتاج ، سيتعين عليك تقديم عناوين URL الخاصة بنطاقك.

بمجرد الانتهاء من ملء عناوين URL ، امض قدمًا وانقر حفظ التغييرات في الجزء السفلي من صفحة الإعدادات.

قم بتعيين موفري تسجيل الدخول الاجتماعي المفضلين لديك

في لوحة معلومات التطبيق Auth0 في جزء القائمة اليسرى ، انقر فوق المصادقة، ثم حدد الاجتماعية. بعد ذلك ، انقر فوق إنشاء اتصال في صفحة إعدادات الاتصالات الاجتماعية.

أخيرًا ، حدد وأضف موفر تسجيل الدخول الاجتماعي المفضل لديك.

تكوين Auth0 في تطبيق React الخاص بك

ادمج خدمة مصادقة Auth0 في تطبيق React الخاص بك عن طريق بناء مكونات تسجيل الدخول والنجاح.

1. قم بإنشاء تطبيق React وقم بإعداد ملف ENV

أنشئ تطبيق React، ثم افتح مجلد المشروع في محرر التعليمات البرمجية الخاص بك. بعد ذلك ، في الدليل الجذر لمجلد المشروع الخاص بك ، قم بإنشاء ملف ENV للاحتفاظ بمتغيرات البيئة الخاصة بك: اسم المجال ومعرف العميل. قم بتسجيل الدخول إلى حساب Auth0 الخاص بك ، في لوحة معلومات التطبيق ، انسخ اسم المجال ومعرف العميل واحفظهما في ملف ENV الخاص بك على النحو التالي:

REACT_APP_AUTH0_DOMAIN = اسم المجال الخاص بك 
REACT_APP_AUTH0_CLIENT_ID = معرف العميل الخاص بك

2. قم بتثبيت الحزم المطلوبة

قم بتشغيل هذا الأمر على الجهاز الخاص بك لتثبيت التبعيات المطلوبة:

npm install @ auth0 / auth0-response

3. التفاف مكون التطبيق الخاص بك مع موفر Auth0

يستخدم مزود Auth0 سياق React. يتيح لك هذا الوصول إلى جميع خصائصه من داخل مكون التطبيق. يأخذ موفر Auth0 ثلاثة معلمات: مجال العميل ومعرف العميل ومعرف URI لإعادة التوجيه.

افتح ملف index.js ، واحذف رمز React للقالب ، وأضف الكود أدناه:

يستورد تتفاعل من'تتفاعل';
يستورد رد فعل من"رد فعل دوم / العميل";
يستورد برنامج من'./برنامج';
يستورد{Auth0Provider} من"@ auth0 / auth0-react";
مقدار ثابت الجذر = ReactDOM.createRoot (وثيقة.getElementById ('جذر'));
root.render (
 المجال = {process.env. REACT_APP_AUTH0_DOMAIN}
 معرف العميل = {process.env. REACT_APP_AUTH0_CLIENT_ID}
 redirectUri = {نافذة او شباك.location.origin}
 >

 </ Auth0Provider> ، document.getElementById ('root')
);

4. قم بإنشاء مكون صفحة تسجيل الدخول

أنشئ مجلدًا جديدًا في دليل / src لتطبيق React الخاص بك ، وقم بتسميته بصفحات. داخل هذا المجلد ، قم بإنشاء ملفين: Login.js و Success.js.

افتح ملف login.js وأضف الكود أدناه. سيعرض مكون صفحة تسجيل الدخول زر تسجيل الدخول.

يستورد تتفاعل من'تتفاعل'
يستورد {useAuth0} من"@ auth0 / auth0-react";
مقدار ثابت تسجيل الدخول = () => {
مقدار ثابت {loginWithRedirect، isAuthenticated} = useAuth0 () ،
يعود (موثق || (
 loginWithRedirect ()}> تسجيل الدخول </button>
 ))
}
يصدّرتقصير تسجيل الدخول

بشكل افتراضي ، يوفر Auth0 بريدًا إلكترونيًا وكلمة مرور كطريقة مصادقة. بالإضافة إلى ذلك ، بناءً على موفري تسجيل الدخول الاجتماعي الذين حددتهم ، ستعرض Auth0 خيار تسجيل الدخول الخاص بالموفر أيضًا.

5. إنشاء مكون صفحة النجاح

سيعرض هذا المكوِّن ميزتين رئيسيتين: الملف الشخصي لمستخدم مصادق عليه وزر تسجيل الخروج.

في ملف Success.js ، أضف الكود أدناه:

يستورد تتفاعل من'تتفاعل'
يستورد {useAuth0} من"@ auth0 / auth0-react"
مقدار ثابت النجاح = () => {
مقدار ثابت {user، logout، isAuthenticated} = useAuth0 ()؛ 
يعود (موثق && ( 



ملف تعريف المستخدم </h1> 

{user.name} </h2> 



{user.email} </p> 
 تسجيل الخروج ()}> تسجيل الخروج </button> 
 </div>
 ))
}
يصدّرتقصير نجاح

بمجرد تسجيل الدخول والحصول على المصادقة بواسطة Auth0 ، يعيد Auth0 توجيهك مرة أخرى إلى تطبيقك ويرسل بيانات الحمولة إلى تطبيقك الذي يحتوي على تفاصيل المستخدم. يمكنك استخدام هذه البيانات داخل تطبيقك لإنشاء ملفات تعريف مستخدم مخصصة وإدارة جلسات المستخدم. تتيح لك خاصية المستخدم من خطاف UseAuth الوصول إلى بيانات مستخدم محددة.

يوفر الخطاف UseAuth0 أيضًا خاصية تسمى isAuthenticated ، والتي تتيح لك عرض المكونات بشروط. إذا تمت مصادقة المستخدم ، فإن الكود سيعرض تفاصيل ملفه الشخصي ويعرض مكون زر تسجيل الخروج.

على العكس من ذلك ، إذا لم تكن كذلك ، فسوف تعرض مكون زر تسجيل الدخول. هذا يعني أنك لست بحاجة إلى تحديد المسارات بناءً على حالة مصادقة المستخدم لأن هذه الخاصية تدير هذه العملية تلقائيًا. تحدد Auth0 كلاً من منطق تسجيل الدخول والخروج ، مما يسهل عليك تنفيذ وظيفة المصادقة.

هل تستحق خدمة المصادقة Auth0 المحاولة؟

Auth0 يوفر حلولًا جاهزة للتعامل مع متطلبات مصادقة التطبيق الخاص بك. بالإضافة إلى ذلك ، تقدم خدمة Auth0 دعمًا لأنظمة الويب والجوّال ومنصات التطوير الأصلية مما يتيح لك دمج نظام المصادقة بسهولة مع مجموعة التكنولوجيا التي تفضلها.