إضافة مصادقة Logto إلى تطبيق Next.js الخاص بك باستخدام إجراءات الخادم

إجراءات الخادم تقدم نهجًا جديدًا لإنشاء تطبيقات ويب قوية بدون الحاجة إلى واجهات برمجة التطبيقات REST التقليدية. لقد ناقشنا هذا من قبل في مقالتنا.

اليوم، نحن متحمسون للإعلان عن الدعم الرسمي لإجراءات الخادم في Next.js SDK الخاص بنا، على الرغم من أنه ميزة تجريبية.

للحصول على نظرة سريعة، اطلع على هذا المثال واتبع الدليل كما نشرح كيفية دمج Logto مع إجراءات الخادم في هذا الدليل.

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

للشروع في العمل، تأكد من أن لديك ما يلي:

• مثال Logto يعمل أو وصول إلى حساب Logto Cloud.
• مشروع Next.js مع تمكين ميزة إجراءات الخادم.

تكوين Logto#

إذا كنت تستضيف Logto بنفسك، ارجع إلى توثيق Logto "البدء" لإعداد مثال Logto الخاص بك.

افتح وحدة تحكم Logto بإدخال URL https://cloud.logto.io/ إذا كنت تستخدم Logto Cloud، أو النقطة النهائية التي قمت بإعدادها لاستضافتها بنفسك.

بعد ذلك، انتقل إلى علامات التبويب "التطبيقات" وانقر على "إنشاء تطبيق".

في النافذة التي تظهر، اختر "Next.js (App Router)" وقدم اسمًا للتطبيق، مثل "Next.js App". ثم انقر على "إنشاء تطبيق".

سوف يتم توجيهك إلى صفحة الدروس التعليمية في Logto. انقر على "إنهاء وتم" للانتقال إلى صفحة تفاصيل التطبيق.

في قسم "إعادة توجيه URIs"، أدخل القيمة التالية:

على سبيل المثال، إذا كنت تستضيف Next.js على http://localhost:3000، يجب أن تكون القيمة:

انقر على زر "حفظ التغييرات" في الأسفل. بمجرد النجاح، احتفظ بهذه الصفحة مفتوحة حيث ستكون مفيدة لتكوين Next.js.

إعداد تطبيق Next.js#

تأكد من أن لديك مشروعًا بأحدث إصدار من Next.js. إذا لم يكن لديك واحد بعد، يمكنك اتباع دليل التثبيت الرسمي لإنشاء واحد.

في وقت كتابة هذا الدليل، الميزة تجريبية وتتطلب التفعيل في next.config.js

تعريف مكتبة Logto#

ابدأ بتثبيت الوحدة @logto/next باستخدام npm كما يلي:

يمكنك أيضًا استخدام yarn أو pnpm.

ثم لنقم بإنشاء بعض الوظائف كـ "إجراءات الخادم”، أنشئ الملف الجديد libraries/logto.ts:

في هذا الملف، نقوم بتصدير أربع وظائف لأغراض المصادقة. لاحظ السطر الأول، "use server" يشير إلى أن الكود في الملف يمكن تشغيله فقط على جانب الخادم. نحن نستخدم "next/headers" لإدارة الجلسات القائمة على الكوكيز.

• مرجع لـ "user server": https://react.dev/reference/react/use-server
• مرجع لاستخدام "next/headers" لإدارة الكوكيز: https://nextjs.org/docs/api-reference/next/headers

الوظائف التي صدّرناها أعلاه يمكن استدعاؤها مباشرةً من مكون React جانب العميل. هذا هو الميزة الرئيسية لاستخدام إجراءات الخادم. دعونا ننتقل إلى الفصل التالي لنرى كيف نستخدم هذه الوظائف.

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

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

تسجيل الدخول#

/app/sign-in.tsx:

هنا نستورد وظيفة signIn التي تم تعريفها للتو في الفصل السابق. على الرغم من أن الكود يتم تنفيذه على جانب الخادم، إلا أن هذه الوظيفة يمكن استدعاؤها مباشرة بواسطة المكون <button> عندما ينقر المستخدم على زر تسجيل الدخول. من خلال القيام بذلك، نقضي على الحاجة لكتابة أي REST API لمعالجة عملية تسجيل الدخول. في الواقع، يقوم Next.js بمعالجة تفاصيل موزع طلب "POST" لنا. عند استلام redirectUrl، يمكننا استدعاء router.push لإعادة التوجيه إلى صفحة تسجيل الدخول Logto.

تسجيل الخروج#

/app/sign-out.tsx:

عملية تسجيل الخروج مشابهة لعملية تسجيل الدخول.

إعداد صفحة الاسترجاع#

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

/app/callback/page.tsx

هنا نستخدم مكونًا للعميل مع useEffect، مما يسهل علينا عرض صفحة "تحميل" لتجربة مستخدم أفضل.

عرض سياق المستخدم وصفحة آمنة#

الآن، دعونا نصنع الصفحة الرئيسية الأساسية لعرض فائدة SDK لـ Logto. إذا لزم الأمر، قم بحماية أي مورد من المستخدمين غير المعروفين عن طريق التحقق من قيمة isAuthenticated وإعادة التوجيه إلى صفحة تسجيل الدخول أو عرض رسائل الخطأ.

app/page.tsx

كما يمكنك أن تلاحظ، هذا هو مكون الخادم الذي يلغي الحاجة لـ useEffect وإدارة تغييرات الحالة المعقدة.

الخاتمة#

تقدم إجراءات الخادم طريقة مبسطة وسهلة لتطبيق المصادقة مقارنة بتطبيقات Next.js التقليدية التي تعتمد على واجهات REST APIs.

يمكن العثور على نموذج الكود بالكامل في هذا المستودع: https://github.com/logto-io/js/tree/master/packages/next-server-actions-sample

لماذا لا تجرب Logto Cloud واختبر السهولة في العمل؟