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

قد يكون بناء نظام مصادقة مخصص مهمة شاقة. يتطلب فهماً عميقاً لبروتوكولات المصادقة ، وعمليات مصادقة المستخدم والترخيص. ومع ذلك ، من خلال دمج أداة مثل Supabase ، يمكنك التركيز أكثر على بناء المنطق الأساسي لتطبيقك.

Supabase هو بديل Firebase مفتوح المصدر يوفر منصة تطوير قائمة على السحابة. يقدم مجموعة من خدمات الواجهة الخلفية مثل قاعدة بيانات Postgres الكاملة وخدمة المصادقة والوظائف التي لا تحتاج إلى خادم.

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

أنشئ مشروعًا جديدًا على وحدة تحكم مطوري Supabase

لإنشاء مشروع جديد على Supabase Developer Console ، اتبع الخطوات التالية:

  1. قم بالتسجيل في أ Supabase حساب المطور. انتقل إلى لوحة القيادة وأنشئ مشروعًا جديدًا.
  2. املأ اسم المشروع وكلمة المرور (هذا اختياري لهذا البرنامج التعليمي ولكن يوصى به عند إعداد قاعدة بيانات) ، حدد المنطقة ، ثم انقر في النهاية إنشاء مشروع جديد.
  3. ضمن إعدادات API ، انسخ المشروع URL و ال حالا العامة مفتاح.
instagram viewer

قم بإعداد موفر المصادقة

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

سيوضح هذا البرنامج التعليمي كيفية إعداد Google Provider. للقيام بذلك، اتبع الخطوات التالية:

  1. في الجزء الأيمن ، حدد ملف المصادقة فاتورة غير مدفوعة.
  2. في صفحة إعدادات المصادقة ، حدد ملف الموفرون ، وأخيرًا ، حدد ملف مزود جوجل من قائمة مقدمي الخدمة. لاحظ أن موفر البريد الإلكتروني قد تم تكوينه بالفعل بشكل افتراضي. لست بحاجة إلى إجراء أي تكوينات.
  3. قم بتمكين ملف مزود زر التبديل.
  4. يتطلب موفر Google مدخلين: ClientID و ClientSecret. ستحصل على هاتين القيمتين بعد إنشاء تطبيق على Google Developer Console. في الوقت الحالي ، انسخ ملف إعادة توجيه URL. ستستخدمه لإعداد تطبيق على Google Developer Console للحصول على ClientID و ClientSecret.

قم بإعداد مشروعك على Google Developer Console (GDC)

للمصادقة مع Google ، ستحتاج إلى تسجيل تطبيقك على Google Developer Console (GDC) والحصول على ClientID و ClientSecret. اتبع هذه الخطوات لإعداد مشروع على GDC:

  1. اذهب إلى وحدة تحكم مطوري Google وقم بتسجيل الدخول باستخدام حساب Google الخاص بك للوصول إلى وحدة التحكم.
  2. بمجرد تسجيل الدخول ، انتقل إلى واجهات برمجة التطبيقات والخدمات علامة التبويب ، اختر إنشاء بيانات الاعتماد الخيار ، ثم حدد معرّف عميل OAuth.
  3. حدد نوع التطبيق من الخيارات المتوفرة ثم املأ اسم التطبيق الخاص بك.
  4. بعد ذلك ، حدد عنوان URL للمسار الرئيسي لتطبيقك (http //: المضيف المحلي: 3000) ، وأخيرًا ، حدد عنوان URL لإعادة توجيه الاتصال. الصق عنوان URL لإعادة التوجيه الذي نسخته من صفحة إعدادات Supabase Google Provider. انقر فوق يحفظ لإكمال العملية.
  5. انسخ ال معرف العميل و العميل والعودة إلى لوحة معلومات مشروع Supabase الخاص بك ولصقها في حقول إدخال ClientID و ClientSecret في صفحة إعدادات Google Provider. انقر يحفظ لتمكين المزود.

قم بتكوين Supabase Authentication Service في تطبيق React.js

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

REACT_APP_SUPABASE_URL = عنوان URL الخاص بالمشروع
REACT_APP_SUPABASE_API_KEY = عام مفتاح حالا

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

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

تثبيت npm تضمين التغريدة/auth-ui-react تضمين التغريدة/ supabase-js رد فعل جهاز التوجيه-دوم

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

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

3. مكون صفحة تسجيل الدخول

سيعرض هذا المكون ميزة التسجيل وتسجيل الدخول ، باستخدام واجهة مستخدم مصادقة React.js المقدمة من Supabase. لقد قمت باستيراد واجهة مستخدم المصادقة كعنصر تبعية (@ supabase / auth-UI-reaction) ، مما يجعل تنفيذ وظيفة المصادقة أسهل.

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

يستورد تتفاعل من'تتفاعل';
يستورد {createClient} من"@ supabase / supabase-js";
يستورد {Auth، ThemeSupa} من"@ supabase / auth-ui-response";
يستورد {useNavigate} من"رد فعل جهاز التوجيه دوم";
مقدار ثابت supabase = createClient (
عملية.env.REACT_APP_SUPABASE_URL,
عملية.env.REACT_APP_SUPABASE_API_KEY
); 
وظيفةتسجيل الدخول() {
مقدار ثابت التنقل = useNavigate () ؛ 
 supabase.auth.onAuthStateChange (غير متزامن (حدث) => {
لو (حدث! == "تسجيل الخروج") {
 التنقل('/نجاح');
 }آخر{
 التنقل('/');
 }
 })
يعود (
<شعبةاسم الطبقة="برنامج">
<رأساسم الطبقة="عنوان التطبيق">
 supabaseClient = {supabase}
 المظهر = {{theme: ThemeSupa}}
 موضوع ="مظلم"
 الموفرون = {['جوجل']}
 /> 
رأس>
شعبة>
 );
}
يصدّرتقصير تسجيل الدخول؛

دعنا نقسمها:

  • قم بتهيئة عميل Supabase بمتغيرات البيئة - عنوان URL لمشروعك ومفتاح anon العام في ملف ENV.
  • قم بإعداد مستمع الحدث لتتبع التغييرات في حالة المصادقة باستخدام طريقة supabase.auth.onAuthStateChange () ، أي إذا كان حالة المصادقة ليست "SIGNED_OUT" ثم يتم انتقال المستخدم إلى صفحة "النجاح" ، وإلا ، يتم انتقال المستخدم إلى "/" (الرئيسية / تسجيل الدخول) الصفحة.
  • ستستخدم طريقة التنقل من الخطاف useNavigate لإدارة هذه العملية.
  • أخيرًا ، قم بإرجاع div الذي يحتوي على مكون واجهة مستخدم React Auth من مكتبة Supabase مع مظهر themeSupa (المقدم من Supabase) ، والسمة الداكنة ، وموفر Google الذي تم تعيينه كخصائص.

4. مكون صفحة النجاح

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

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

يستورد تتفاعل من'تتفاعل';
يستورد {createClient} من"@ supabase / supabase-js";
يستورد {useNavigate} من"رد فعل جهاز التوجيه دوم";
يستورد {useEffect، useState} من'تتفاعل';
مقدار ثابت supabase = createClient (
عملية.env.REACT_APP_SUPABASE_URL,
عملية.env.REACT_APP_SUPABASE_API_KEY
); 
وظيفةنجاح() {
مقدار ثابت [user، setUser] = useState ([]) ، 
مقدار ثابت التنقل = useNavigate () ؛ 
 useEffect (() => {
غير متزامنوظيفةgetUserData(){
انتظر supabase.auth.getUser (). ثم ((قيمة) => {
لو(قيمة.بيانات?.مستخدم) {
setUser(قيمة.بيانات.مستخدم)} 
 }) }
 getUserData () ،
 },[]);
مقدار ثابت الصورة الرمزية = user؟ .user_metadata؟ .avatar_url؛ 
مقدار ثابت userName = المستخدم؟ .user_metadata؟ .full_Name؛ 
غير متزامنوظيفةتسجيل الدخول(){
انتظرsupabase.auth.خروج();
 التنقل('/');
 };
يعود (
<شعبةاسم الطبقة="برنامج">
<رأساسم الطبقة="عنوان التطبيق">
<h1>تم تسجيل الدخول بنجاحh1>
<h2>{اسم المستخدم}h2>
<IMGsrc={الصورة الرمزية} />
<زرعند النقر={()=> SignOutUser ()}> تسجيل الخروجزر>
رأس>
شعبة>
 );
}
يصدّرتقصير نجاح؛

دعنا نقسمها:

  • قم بتهيئة عميل Supabase بمتغيرات البيئة - عنوان URL لمشروعك ومفتاح anon العام في ملف ENV.
  • يستخدم خطافات React.jsو useState و useEffect للحصول على بيانات من استجابة API.
  • ينفذ الخطاف useEffect وظيفة غير متزامنة تستدعي طريقة supabase.auth.getUser. تسترد هذه الطريقة معلومات المستخدم المرتبطة بجلسة المستخدم الحالية.
  • تتحقق الوظيفة غير المتزامنة بعد ذلك لمعرفة ما إذا كانت بيانات المستخدم موجودة وتعينها على متغير الحالة إذا كانت موجودة.
  • تستخدم وظيفة SignOutUser طريقة supabase.auth.signOut لتسجيل خروج المستخدم وإعادة توجيهه مرة أخرى إلى صفحة تسجيل الدخول عند النقر على زر تسجيل الخروج.
  • أخيرًا ، قم بإرجاع div مع بعض معلومات المستخدم.

5. تكوين مسارات الصفحة

أخيرًا ، قم بتكوين المسارات لكل من صفحة تسجيل الدخول وصفحات النجاح.

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

يستورد تتفاعل من'تتفاعل';
يستورد {BrowserRouter مثل جهاز التوجيه ، والطرق ، والطريق} من"رد فعل جهاز التوجيه دوم";
يستورد تسجيل الدخول من"./pages/Login";
يستورد نجاح من"./pages/Success";
وظيفةبرنامج() {
يعود (
<جهاز التوجيه>
// تحديد المسارات
"/" العنصر = {} />
"/نجاح" العنصر = {} />
طرق>
جهاز التوجيه>
 );
}
يصدّرتقصير برنامج؛

دعنا نقسمها:

  • حدد المسارين: مسار لصفحة تسجيل الدخول وطريق لصفحة النجاح باستخدام مكونات جهاز التوجيه من مكتبة جهاز التوجيه التفاعلي.
  • قم بتعيين مسارات المسار على "/" و "نجاح" على التوالي ، وقم بتعيين مكونات تسجيل الدخول والنجاح إلى المسارات الخاصة بكل منهما.
  • أخيرًا ، قم بتشغيل هذا الأمر على جهازك الطرفي لتدوير خادم التطوير: 
 npm يبدأ
  • انتقل إلى http //: المضيف المحلي: 3000 على متصفحك لعرض النتيجة. يعرض مكون تسجيل الدخول واجهة مستخدم React-auth-UI الخاصة بـ Supabase مع كل من مزودي البريد الإلكتروني وجوجل.

يمكنك إما المصادقة باستخدام Google أو التسجيل باستخدام بريدك الإلكتروني وكلمة المرور واستخدام بيانات الاعتماد هذه لتسجيل الدخول. تتمثل ميزة استخدام موفري تسجيل الدخول الاجتماعي في Supabase أو مزود البريد الإلكتروني في أنه لا داعي للقلق بشأن منطق التسجيل.

بمجرد قيام المستخدم بالتسجيل مع مزود خدمة اجتماعية أو باستخدام بريد إلكتروني وكلمة مرور ، سيتم تخزين البيانات في قاعدة بيانات مستخدم Auth الخاصة بـ Supabase لمشروعك. عند تسجيل الدخول باستخدام بيانات الاعتماد الخاصة بهم ، ستقوم Supabase بالتحقق من صحة التفاصيل مقابل بيانات الاعتماد المستخدمة للتسجيل.

يجعل Supabase المصادقة في React سهلة

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

من خلال لوحة القيادة البديهية وواجهة برمجة التطبيقات القوية ، تعد Supabase أداة قوية لبناء تطبيقات قابلة للتطوير وآمنة.