> ## Documentation Index
> Fetch the complete documentation index at: https://phaseo.app/docs/llms.txt
> Use this file to discover all available pages before exploring further.

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

> استخدم مثال OAuth الكامل مع Next.js كدليل لتطبيق Gateway يتطلب تسجيل الدخول ويستخدم وكيلًا موحدًا.

استخدم هذه الصفحة إذا كان منتجك يحتاج إلى تسجيل دخول ووصول إلى Gateway عبر الجلسة وأكثر من مسار دردشة واحد.

**الهدف:** شغّل مساحة العمل المسجّلة وأرسل طلبات Phaseo عبر وكيل واحد محمي على الخادم.

**النتيجة:** تطبيق محلي يتضمن تسجيل الدخول عبر OAuth ورموزًا مرتبطة بالجلسة واكتشاف النماذج والدردشة واختبار نقاط النهاية.

<Prompt description="أنشئ **مساحة عمل Next.js تتطلب تسجيل الدخول** مع OAuth ووكيل Phaseo موحد." icon="shield-user" actions={["copy", "cursor"]}>
  {`أنت بصدد إنشاء تطبيق Next.js يتطلب تسجيل الدخول ويعتمد على Phaseo Gateway.

    أنشئ تطبيقًا بأسلوب مساحة العمل يتضمن:
    - تسجيل الدخول باستخدام OAuth 2.1 + PKCE
    - تخزين الرموز المرتبط بالجلسة
    - مسار وكيل موحد واحد لـ Gateway على الخادم
    - اكتشاف النماذج
    - مسار دردشة واحد يستخدم Responses API
    - اختبار عام واحد لنقاط نهاية Phaseo الإضافية

    المتطلبات:
    - أبقِ بيانات اعتماد Gateway ورموز الوصول على الخادم.
    - استخدم قائمة سماح للوكيل لتعزيز الأمان.
    - ادعم تحديث الرموز.
    - أبقِ مساحة العمل مفهومة وتجنب تعقيدها دون حاجة.
    - أضف README موجزًا يشرح الإعداد ومتغيرات البيئة وخطوات التشغيل.

    التحقق:
    - شغّل التطبيق إن أمكن
    - تحقّق من تدفق تسجيل الدخول بقدر ما تسمح به الإعدادات المحلية
    - تحقّق من مسار طلب واحد على الأقل إلى Gateway عبر الوكيل
    - أبلغ بدقة عما تحققت منه وما لا يزال يعتمد على إعداد OAuth خارجي.`}
</Prompt>

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

* GitHub: [examples/oauth-client-nextjs](https://github.com/phaseoteam/Phaseo/tree/main/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 الحالي
* يحدّث الرموز عند الحاجة
* يمرر أجسام الطلبات والردود

هذا نمط مناسب لاستخدام عدة نقاط نهاية من Phaseo دون نسخ منطق المصادقة في كل مسار.

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

لا تقتصر صفحة مساحة العمل على الدردشة:

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

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

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

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

## تشغيل المثال

<CodeGroup>
  ```bash npm theme={null}
  cd examples/oauth-client-nextjs
  npm install
  cp .env.example .env.local
  ```

  ```bash pnpm theme={null}
  cd examples/oauth-client-nextjs
  pnpm install
  cp .env.example .env.local
  ```

  ```bash yarn theme={null}
  cd examples/oauth-client-nextjs
  yarn install
  cp .env.example .env.local
  ```

  ```bash bun theme={null}
  cd examples/oauth-client-nextjs
  bun install
  cp .env.example .env.local
  ```
</CodeGroup>

عيّن:

* `NEXT_PUBLIC_OAUTH_CLIENT_ID`
* `OAUTH_CLIENT_SECRET`
* `NEXT_PUBLIC_PHASEO_URL`
* `NEXT_PUBLIC_REDIRECT_URI`
* `SESSION_SECRET`
* `NEXT_PUBLIC_GATEWAY_URL`

ثم شغّل:

<CodeGroup>
  ```bash npm theme={null}
  npm run dev
  ```

  ```bash pnpm theme={null}
  pnpm dev
  ```

  ```bash yarn theme={null}
  yarn dev
  ```

  ```bash bun theme={null}
  bun run dev
  ```
</CodeGroup>

افتح `http://localhost:3000`.

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

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

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

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

## أدلة ذات صلة

* [أنشئ تطبيق دردشة ويب باستخدام Next.js](./build-a-nextjs-web-chat-app.mdx)
* [مطالبات بدء تطبيق صغير](./mini-app-starter-prompts.mdx)
* [الأمثلة](../guides/examples.mdx)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.