أنشئ مساحة عمل OAuth باستخدام Next.js

​

المشروع النموذجي

• GitHub: examples/oauth-client-nextjs
• مسار المشروع داخل المستودع: examples/oauth-client-nextjs

​

ما الذي يغطيه هذا التطبيق

• تسجيل الدخول باستخدام OAuth 2.1 + PKCE
• تخزين الرموز المرتبط بالجلسة وتحديثها
• وكيل موحد لمسارات التحكم والإنشاء
• اكتشاف النماذج
• مسار دردشة عبر /responses
• اختبار عام لمسارات Gateway الأخرى

​

متى تبدأ بهذا المثال

• يحتاج المستخدمون النهائيون إلى تسجيل الدخول بصلاحيات مفوضة
• تحتاج إلى أكثر من صفحة دردشة بسيطة
• تريد مسار خادم آمنًا واحدًا لعدة نقاط نهاية من Phaseo

• تحتاج فقط إلى واجهة دردشة بسيطة بمفتاح API
• تريد البدء بسكربت أو CLI

​

الملفات الرئيسية

• app/page.tsx
• app/dashboard/page.tsx
• app/dashboard/GatewayWorkbench.tsx
• app/api/gateway/[...surface]/route.ts
• lib/oauth.ts
• lib/session.ts

​

لماذا بُني المثال بهذه الطريقة

​

1. يبقى OAuth منفصلًا عن منطق Gateway

• منطق بدء المصادقة وcallback
• معالجة الجلسة المشفرة
• تحديث الرموز

​

2. يتولى مسار وكيل واحد استدعاءات Gateway

• يتحقق من قائمة سماح نقاط النهاية
• يضيف رمز bearer الحالي
• يحدّث الرموز عند الحاجة
• يمرر أجسام الطلبات والردود

​

3. تعمل لوحة التحكم أيضًا كمساحة عمل داخلية

• يكتشف النماذج
• يختبر /responses
• ويمكنه اختبار نقاط نهاية غير خاصة بالدردشة

​

المتطلبات المسبقة

• • Node.js ومدير حزم مدعوم
• • عميل OAuth مُعدّ بعنوان callback المحلي
• • سر جلسة قوي

​

تشغيل المثال

cd examples/oauth-client-nextjs
npm install
cp .env.example .env.local

cd examples/oauth-client-nextjs
pnpm install
cp .env.example .env.local

cd examples/oauth-client-nextjs
yarn install
cp .env.example .env.local

cd examples/oauth-client-nextjs
bun install
cp .env.example .env.local

• NEXT_PUBLIC_OAUTH_CLIENT_ID
• OAUTH_CLIENT_SECRET
• NEXT_PUBLIC_PHASEO_URL
• NEXT_PUBLIC_REDIRECT_URI
• SESSION_SECRET
• NEXT_PUBLIC_GATEWAY_URL

npm run dev

pnpm dev

yarn dev

bun run dev

​

تحقق من النتيجة

• يعيد تسجيل الدخول المستخدم إلى callback المُعدّ وينشئ جلسة.
• يمكن للوحة التحكم اكتشاف النماذج عبر الوكيل.
• يكتمل طلب واحد إلى Responses API دون كشف رمز الوصول للمتصفح.
• يُرفض أي endpoint غير مدرج في قائمة سماح الوكيل.

​

كيفية تخصيص المثال

• • اختصر قائمة سماح الوكيل لتشمل نقاط النهاية التي يحتاجها منتجك فقط
• • أبقِ مساحة العمل داخلية أثناء إنشاء واجهة أوضح للمستخدمين
• • استبدل الاختبار العام بتدفقات مخصصة للمنتج بعد استقرار التكامل

​

أدلة ذات صلة

• أنشئ تطبيق دردشة ويب باستخدام Next.js
• مطالبات بدء تطبيق صغير
• الأمثلة