تعلم كيفية إنشاء تدفق مصادقة المستخدم مع Nuxt بدمج Logto SDK.
في هذا الدليل، سنوضح لك كيفية بناء تدفق مصادقة المستخدم باستخدام Nuxt عبر دمج Logto SDK. يستخدم الدليل لغة البرمجة TypeScript.
قبل أن تبدأ، تأكد من توفر ما يلي:
لبدء العمل، قم بإنشاء تطبيق Logto من نوع "تطبيق ويب تقليدي". اتبع هذه الخطوات لإنشاء تطبيق Logto:
بعد ذلك، يجب أن ترى دليلاً تفاعليًا يرشدك خلال عملية دمج Logto SDK مع تطبيق Nuxt الخاص بك. يمكن أن يكون المحتوى التالي مرجعًا للاستخدام في المستقبل.
قم بتثبيت Logto SDK عبر مدير الحزم المفضل لديك:
في ملف تكوين Nuxt (nuxt.config.ts)، أضف وحدة Logto:
الإعداد الأدنى للوحدة كالتالي:
نظراً لأن هذه المعلومات حساسة، يُوصى باستخدام متغيرات البيئة:
راجع إعدادات الوقت الفعلي لمزيد من المعلومات.
انتقل إلى صفحة تفاصيل التطبيق في لوحة تحكم 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:
إذا واجهت أي مشاكل أثناء عملية الدمج، لا تتردد في الانضمام إلى خادم Discord الخاص بنا للدردشة مع المجتمع وفريق Logto!