تعلم كيفية بناء تدفق مصادقة المستخدم مع SvelteKit عن طريق دمج Logto SDK.
في هذا الدليل، سنوضح لك كيفية بناء تدفق مصادقة المستخدم باستخدام SvelteKit عبر دمج Logto SDK. يستخدم الدليل لغة البرمجة TypeScript.
قبل أن تبدأ، تأكد من توفر ما يلي:
لبدء العمل، قم بإنشاء تطبيق Logto من نوع "تطبيق ويب تقليدي". اتبع هذه الخطوات لإنشاء تطبيق Logto:
بعد ذلك، يجب أن ترى دليلاً تفاعليًا يرشدك خلال عملية دمج Logto SDK مع تطبيق SvelteKit الخاص بك. يمكن أن يكون المحتوى التالي مرجعًا للاستخدام في المستقبل.
قم بتثبيت Logto SDK من خلال مدير الحزم المفضل لديك:
في ملف hooks.server.ts الخاص بك، أضف الكود التالي لإدخال Logto hook إلى الخادم الخاص بك:
نظرًا لأن هذه المعلومات حساسة، يُنصح باستخدام متغيرات البيئة:
إذا كان لديك عدة hooks، يمكنك استخدام دالة sequence() المساعدة لربطهم:
الآن يمكنك الوصول إلى عميل Logto في الكائن locals. بالنسبة لـ TypeScript، يمكنك إضافة النوع إلى app.d.ts:
سنناقش كائن user لاحقًا.
انتقل إلى صفحة تفاصيل التطبيق في لوحة تحكم Logto. أضف عنوان إعادة توجيه URI http://localhost:3000/callback.
عنوان إعادة التوجيه URI هو مفهوم في OAuth 2.0 يشير إلى الموقع الذي يجب إعادة التوجيه إليه بعد المصادقة.
بالمثل، أضف http://localhost:3000/ إلى قسم "عنوان إعادة التوجيه بعد تسجيل الخروج".
عنوان إعادة التوجيه بعد تسجيل الخروج هو مفهوم في OAuth 2.0 يشير إلى الموقع الذي يجب إعادة التوجيه إليه بعد تسجيل الخروج.
ثم انقر على "حفظ" لحفظ التغييرات.
عد إلى التطبيق الخاص بك، في الصفحة التي تريد تنفيذ تسجيل الدخول وتسجيل الخروج فيها، قم بتعريف الإجراءات التالية:
ثم استخدم هذه الإجراءات في مكون Svelte الخاص بك:
لعرض معلومات المستخدم، يمكنك إدخال كائن locals.user في التنسيق، مما يجعله متاحًا لجميع الصفحات:
في مكون Svelte الخاص بك:
الآن يمكنك تشغيل التطبيق ومحاولة تسجيل الدخول/الخروج باستخدام Logto:
إذا واجهت أي مشاكل أثناء عملية الدمج، لا تتردد في الانضمام إلى خادم Discord الخاص بنا للدردشة مع المجتمع وفريق Logto!