بناء مصادقة Nuxt باستخدام Logto
تعلم كيفية إنشاء تدفق مصادقة المستخدم مع Nuxt بدمج Logto SDK.
Founder
ابدأ الآن
مقدمة
- Logto هو بديل مفتوح المصدر لـ Auth0 لبناء بنى تحتية للهوية. يدعم طرق تسجيل الدخول المختلفة، بما في ذلك اسم المستخدم، البريد الإلكتروني، رقم الهاتف، وتسجيل الدخول الاجتماعي الشائع مثل Google و GitHub.
- Nuxt إطار عمل مفتوح المصدر يجعل تطوير الويب بديهيًا وقويًا.
في هذا الدليل، سنوضح لك كيفية بناء تدفق مصادقة المستخدم باستخدام Nuxt عبر دمج Logto SDK. يستخدم الدليل لغة البرمجة TypeScript.
المتطلبات الأساسية
قبل أن تبدأ، تأكد من توفر ما يلي:
- حساب Logto. إذا لم يكن لديك واحد، يمكنك التسجيل مجانًا.
- بيئة تطوير A Nuxt ومشروع.
إنشاء تطبيق Logto
لبدء العمل، قم بإنشاء تطبيق Logto من نوع "تطبيق ويب تقليدي". اتبع هذه الخطوات لإنشاء تطبيق Logto:
- سجل الدخول إلى لوحة تحكم Logto.
- في شريط التنقل الأيسر، انقر على التطبيقات.
- انقر على إنشاء تطبيق.
- في الصفحة المفتوحة، ابحث عن قسم "تطبي ق ويب تقليدي" وحدد بطاقة "Nuxt".
- انقر على ابدأ البناء، وأدخل اسم تطبيقك.
- انقر على إنشاء.
بعد ذلك، يجب أن ترى دليلاً تفاعليًا يرشدك خلال عملية دمج Logto SDK مع تطبيق Nuxt الخاص بك. يمكن أن يكون المحتوى التالي مرجعًا للاستخدام في المستقبل.
دمج Logto SDK
التثبيت
قم بتثبيت Logto SDK عبر مدير الحزم المفضل لديك:
تسجيل وحدة Logto
في ملف تكوين Nuxt (nuxt.config.ts)، أضف وحدة Logto:
الإعداد الأدنى للوحدة كالتالي:
نظراً لأن هذه المعلومات حساسة، يُوصى باستخدام متغيرات البيئة:
راجع إعدادات الوقت الفعلي لمزيد من المعلومات.
تنفيذ تسجيل الدخول وتسجيل الخروج
تكوين عناوين URI لإعادة التوجيه
انتقل إلى صفحة تفاصيل التطبيق في لوحة تحكم Logto. أضف عنوان إعادة توجيه URI http://localhost:3000/callback.
عنوان إعادة التوجيه URI هو مفهوم في OAuth 2.0 يشير إلى الموقع الذي يجب إعادة التوجيه إليه بعد المصادقة.
بالمثل، أضف http://localhost:3000/ إلى قسم "عنوان إعادة التوجيه بعد تسجيل الخروج".
عنوان إعادة التوجيه بعد تسجيل الخروج هو مفهوم في OAuth 2.0 يشير إلى الموقع الذي يجب إعادة التوجيه إليه بعد تسجيل الخروج.
ثم انقر على "حفظ" لحفظ التغييرات.
عند تسجيل وحدة @logto/nuxt، ستقوم بالخطوات التالية:
- إضافة ثلاث مسارات لتسجيل الدخول (
/sign-in)، وتسجيل الخروج (/sign-out)، وعودة الاتصال (/callback). - استيراد مقاطع الاستخدام:
useLogtoClientوuseLogtoUser.
يمكن تكوين هذه المسارات عبر logto.pathnames في خيارات الوحدة، على سبيل المثال:
اطلع على ملف تعريف النوع في حزمة @logto/nuxt لمزيد من المعلومات.
نظرًا لأن صفحات Nuxt سيتم ترطيبها وتصبح تطبيق صفحة واحدة (SPA) بعد التحميل الأولي، نحتاج إلى إعادة توجيه المستخدم إلى مسار تسجيل الدخول أو تسجيل الخروج عند الحاجة.
عرض معلومات المستخدم
لعرض معلومات المستخدم، يمكنك استخدام المقاطع القابلة للاستخدام useLogtoUser()، وهو متاح على جانبي الخادم والعميل:
نقطة التحقق: تشغيل التطبيق
الآن يمكنك تشغيل التطبيق ومحاولة تسجيل الدخول/الخروج باستخدام Logto:
- افتح التطبيق في متصفحك، يجب أن ترى زر "تسجيل الدخول".
- انقر على زر "تسجيل الدخول"، ويجب أن يتم إعادة توجيهك إلى صفحة تسجيل الدخول في Logto.
- بعد تسجيل الدخول، يجب أن يتم إعادة توجيهك مرة أخرى إلى التطبيق، ويجب أن ترى بيانات المستخدم وزر "تسجيل الخروج".
- انقر على زر "تسجيل الخروج"، ويجب أن يتم إعادة توجيهك إلى صفحة تسجيل الخروج في Logto، ثم يتم إعادة توجيهك مرة أخرى إلى التطبيق بحالة غير مسجلة الدخول.
إذا واجهت أي مشاكل أثناء عملية الدمج، لا تتردد في الانضمام إلى خادم Discord الخاص بنا للدردشة مع المجتمع وفريق Logto!