العربية
  • svelte
  • sveltekit
  • node
  • tutorial
  • auth
  • authentication
  • oauth
  • oidc
  • identity

بناء مصادقة SvelteKit مع Logto

تعلم كيفية بناء تدفق مصادقة المستخدم مع SvelteKit عن طريق دمج Logto SDK.

Gao
Gao
Founder

البدء

مقدمة

  • Logto هو بديل مفتوح المصدر لـ Auth0 لبناء بنى تحتية للهوية. يدعم طرق تسجيل الدخول المختلفة، بما في ذلك اسم المستخدم، البريد الإلكتروني، رقم الهاتف، وتسجيل الدخول الاجتماعي الشائع مثل Google و GitHub.
  • SvelteKit هو إطار عمل لتطوير التطبيقات الويب القوية والسريعة باستخدام Svelte بسرعة.

في هذا الدليل، سنوضح لك كيفية بناء تدفق مصادقة المستخدم باستخدام SvelteKit عبر دمج Logto SDK. يستخدم الدليل لغة البرمجة TypeScript.

المتطلبات الأساسية

قبل أن تبدأ، تأكد من توفر ما يلي:

  • حساب Logto. إذا لم يكن لديك واحد، يمكنك التسجيل مجانًا.
  • بيئة تطوير A SvelteKit ومشروع.

إنشاء تطبيق Logto

لبدء العمل، قم بإنشاء تطبيق Logto من نوع "تطبيق ويب تقليدي". اتبع هذه الخطوات لإنشاء تطبيق Logto:

  1. سجل الدخول إلى لوحة تحكم Logto.
  2. في شريط التنقل الأيسر، انقر على التطبيقات.
  3. انقر على إنشاء تطبيق.
  4. في الصفحة المفتوحة، ابحث عن قسم "تطبيق ويب تقليدي" وحدد بطاقة "SvelteKit".
  5. انقر على ابدأ البناء، وأدخل اسم تطبيقك.
  6. انقر على إنشاء.

بعد ذلك، يجب أن ترى دليلاً تفاعليًا يرشدك خلال عملية دمج Logto SDK مع تطبيق SvelteKit الخاص بك. يمكن أن يكون المحتوى التالي مرجعًا للاستخدام في المستقبل.

جرب الدليل التفاعلي لـ Logto Cloud

التكامل مع Logto SDK

التثبيت

قم بتثبيت Logto SDK من خلال مدير الحزم المفضل لديك:

إضافة Logto hook

في ملف hooks.server.ts الخاص بك، أضف الكود التالي لإدخال Logto hook إلى الخادم الخاص بك:

نظرًا لأن هذه المعلومات حساسة، يُنصح باستخدام متغيرات البيئة:

إذا كان لديك عدة hooks، يمكنك استخدام دالة sequence() المساعدة لربطهم:

الآن يمكنك الوصول إلى عميل Logto في الكائن locals. بالنسبة لـ TypeScript، يمكنك إضافة النوع إلى app.d.ts:

سنناقش كائن user لاحقًا.

تنفيذ تسجيل الدخول وتسجيل الخروج

تكوين عناوين URI لإعادة التوجيه

انتقل إلى صفحة تفاصيل التطبيق في لوحة تحكم Logto. أضف عنوان إعادة توجيه URI http://localhost:3000/callback.

عنوان إعادة التوجيه URI هو مفهوم في OAuth 2.0 يشير إلى الموقع الذي يجب إعادة التوجيه إليه بعد المصادقة.

بالمثل، أضف http://localhost:3000/ إلى قسم "عنوان إعادة التوجيه بعد تسجيل الخروج".

عنوان إعادة التوجيه بعد تسجيل الخروج هو مفهوم في OAuth 2.0 يشير إلى الموقع الذي يجب إعادة التوجيه إليه بعد تسجيل الخروج.

ثم انقر على "حفظ" لحفظ التغييرات.

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

ثم استخدم هذه الإجراءات في مكون Svelte الخاص بك:

عرض معلومات المستخدم

لعرض معلومات المستخدم، يمكنك إدخال كائن locals.user في التنسيق، مما يجعله متاحًا لجميع الصفحات:

في مكون Svelte الخاص بك:

نقطة تفتيش: تشغيل التطبيق

الآن يمكنك تشغيل التطبيق ومحاولة تسجيل الدخول/الخروج باستخدام Logto:

  1. افتح التطبيق في متصفحك، يجب أن ترى زر "تسجيل الدخول".
  2. انقر على زر "تسجيل الدخول"، ويجب أن يتم إعادة توجيهك إلى صفحة تسجيل الدخول في Logto.
  3. بعد تسجيل الدخول، يجب أن يتم إعادة توجيهك مرة أخرى إلى التطبيق، ويجب أن ترى بيانات المستخدم وزر "تسجيل الخروج".
  4. انقر على زر "تسجيل الخروج"، ويجب أن يتم إعادة توجيهك إلى صفحة تسجيل الخروج في Logto، ثم يتم إعادة توجيهك مرة أخرى إلى التطبيق بحالة غير مسجلة الدخول.

إذا واجهت أي مشاكل أثناء عملية الدمج، لا تتردد في الانضمام إلى خادم Discord الخاص بنا للدردشة مع المجتمع وفريق Logto!

قراءات إضافية

جرب Logto اليوم