العربية
  • Bolt
  • ذكاء اصطناعي
  • تسجيل الدخول المباشر

استخدام Bolt.New و Logto لبناء تدفقات تسجيل دخول مخصصة بسرعة

تعلّم كيف تستخدم Bolt.new لبناء تطبيق متكامل مع مصادقة Logto. من إعداد تدفقات تسجيل الدخول إلى إنشاء لوحة تسجيل دخول عائمة وتفعيل تسجيلات الدخول الاجتماعية، يغطي هذا الدليل كلاً من التهيئة والتخصيص.

Guamian
Guamian
Product & Design

توقف عن إضاعة أسابيع في مصادقة المستخدم
أطلق تطبيقات آمنة بشكل أسرع مع Logto. قم بدمج مصادقة المستخدم في دقائق وركز على منتجك الأساسي.
ابدأ الآن
Product screenshot

ما هو Bolt.New

Bolt.new هو أداة قائمة على المتصفح لإنشاء وتشغيل تطبيقات الويب المتكاملة فورًا. تم بناؤها على تقنية WebContainer من StackBlitz، وتوفر للمطورين حزمة نظيفة ومجهزة مسبقًا تشمل Next.js (App Router)، و Tailwind CSS، و Supabase، و Prisma، و ShadCN UI. البيئة كاملة تعمل محليًا في المتصفح، بلا تثبيتات، بلا خطوات بناء سحابية، ولا حاجة للتسجيل.

على عكس الأدوات التي تركز على برمجة الذكاء الاصطناعي داخل مشروع موجود بالفعل، يركز Bolt.new على البداية الفعلية لعملية التطوير. يزيل الجهد الزائد لإعداد هيكل المشروع، واعتمادياته، والخوادم المحلية، مما يسمح لك بالانتقال من فكرة إلى نموذج أولي عامل في ثوانٍ.

كيف يختلف Bolt.new عن Cursor أو Lovable؟

بينما أدوات مثل Cursor و Lovable تعمل كـ "مساعدين ذكاء اصطناعي" داخل محرر الشيفرة، يركز Bolt.new على شيء آخر تمامًا: توليد وتشغيل مشروع متكامل فورًا.

  • Cursor يعزز سير العمل في VS Code باستخدام الذكاء الاصطناعي، ويُساعدك في تعديل أو إنشاء الشيفرة في بيئتك الحالية.
  • Bolt.new ينشئ تطبيقًا يعمل من البداية استنادًا إلى طلب أو قالب، ويشغّله مباشرة داخل المتصفح باستخدام WebContainers.

لا توجد اعتمادية على الأدوات المحلية أو أجهزة افتراضية سحابية بعيدة. كل شيء يعمل في المتصفح مع دعم أصلي لـ Node.js وإدارة الحزم وتطوير متكامل. هذا يجعله مناسبًا بشكل خاص للنماذج الأولية السريعة والتجارب المحلية، خاصة في سياقات مشاريع الذكاء الاصطناعي أو SaaS.

لمن صُمم Bolt.new؟

Bolt.new مُصمم للمطورين الذين يبدأون غالبًا من الصفر مثل:

  • المخترقين المستقلين الذين يختبرون أفكارًا
  • مطورو الذكاء الاصطناعي الذين يجرّبون مسارات العمل أو يدمجون النماذج
  • المؤسسون الذي يصممون MVPs
  • المهندسون الذين ينشئون أدوات داخلية أو عروض توضيحية

عادةً ما يكون هؤلاء المستخدمون مرتاحين مع أحدث تقنيات الويب ويفضلون الأدوات السريعة والنظيفة وغير المتحيزة. Bolt.new ليس منشئ مواقع بصري أو منصة تدريبية. يفترض معرفة عملية بـ React و تطوير متكامل، لكنه يزيل عوائق الإعداد.

تاريخ Bolt.new وتطوره

تم إنشاء Bolt.new بواسطة فريق StackBlitz، وهي شركة تأسست عام 2017 على يد إريك سيمونز وألبرت باي. قدمت StackBlitz تقنية WebContainers، وهي بيئة تشغيل WebAssembly أصلية في المتصفح قادرة على تنفيذ بيئات Node.js مباشرة داخل المتصفح. هذا ألغى الحاجة لخوادم سحابية أو تثبيتات محلية عند تطوير تطبيقات JavaScript الحديثة.

في عام 2023، واجهت StackBlitz نقطة تحول؛ فقد بدأ النمو بالبطء، فبحث الفريق عن اتجاه جريء: دمج WebContainers مع الذكاء الاصطناعي لإنتاج تطبيقات جاهزة من أوامر اللغة الطبيعية.

أصبح هذا الاختبار هو Bolt.new، الذي أُطلق علنًا في أكتوبر 2024. خلال أسابيع قليلة، جذب انتباه كبير من المطورين لبساطته وسرعته. جمعت الأداة كل ما بنته StackBlitz عبر السنوات من عزل بيئة التشغيل وسرعة تثبيت الاعتماديات وبية مشاركة، مع واجهة ذكاء اصطناعي تفهم الأهداف الشائعة للتطوير.

مثّل Bolt.new تحولًا في أدوات المطورين: فبدلًا من مجرد كتابة الشيفرة بسرعة، يمكن للمطورين الآن أن يبدؤوا بكود يعمل فعليًا، ومصمم لهدفهم.

دليل: استخدام Logto و Bolt.New لإضافة تجربة تسجيل دخول مخصصة

تسجيل تطبيق في منصة Logto

في هذا المثال، استخدمت Bolt.new لإنشاء تطبيق إدارة محتوى (CMS). تجاوزت مرحلة الطلب وذهبت مباشرًة للهدف: طلبت من الوكيل بناء CMS مع Logto كمزود مصادقة.

وفقا للتعليمات، كان عليّ تزويد معلومتين أساسيتين:

  1. نقطة نهاية Logto
  2. معرف التطبيق (App ID)

لأن التطبيق من صفحة واحدة يعمل بـ React، فلا حاجة للسر الخاص بالتطبيق. اعتنى الوكيل بالباقي: قام بتثبيت آخر إصدار من Logto React SDK، وضبط مكونات المصادقة، وربط كل شيء معًا.

لإتمام الإعداد، ذهبت إلى منصة Logto السحابية، ثم أنشأت تطبيق صفحة واحدة جديد ونسخت نقطة نهاية Logto ومعرّف التطبيق إلى Bolt.new.

بعدها قمت بإعداد عناوين إعادة التوجيه (Redirect URIs) وعناوين إعادة التوجيه بعد تسجيل الخروج.

تفصيل مهم: لأن Bolt.new قائمة على المتصفح وليست IDE محلية، لا يمكنك استخدام http://localhost:3000/ كعنوان إعادة التوجيه. بدلًا من ذلك، تأكد من استخدام عنوان المعاينة الظاهر في علامة تبويب Bolt.new في المتصفح.

bolt_auth_1.png

تخصيص تجربة تسجيل الدخول الجاهزة في Logto

توفر Logto تدفق تسجيل دخول قابل للتخصيص في المنصة. للبدء، انتقل إلى تجربة الدخول > تسجيل الدخول والتسجيل، ثم اختر طرق تسجيل الدخول المفضلة لديك (مثل البريد الإلكتروني، اسم المستخدم، رقم الهاتف أو تسجيل الدخول الاجتماعي).

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

bolt_auth_2.png

bolt_auth_3.png

bolt_auth_4.png

إنشاء لوحة تسجيل دخول عائمة فوق منتجك

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

bolt_auth_5.png

أستخدم ببساطة هذا الطلب:

أريد أن أجعل صفحة تسجيل الدخول تبدو أجمل، مجرد خلفية بسيطة وزرين: أحدهما لـ "تسجيل الدخول" و الآخر لـ "إنشاء حساب". كل زر يجب أن يُعيد التوجيه إلى شاشة مختلفة، يتحكم بها Logto. استخدم تجربة First-screen الموثقة في Logto https://docs.logto.io/end-user-flows/authentication-parameters/first-screen

bolt_auth_6.png

الجميل هنا أنه عند الضغط على تسجيل الدخول تذهب مباشرة لصفحة تسجيل الدخول، وإذا ضغطت على إنشاء حساب، تفتح مباشرة شاشة إنشاء الحساب.

bolt_auth_7.png

bolt_auth_8.png

إضافة تدفقات تسجيل الدخول الاجتماعي

يمكنك أن تزود الوكيل بـ توثيق تسجيل الدخول المباشر في Logto مع طلب مثل "إضافة تدفقات تسجيل الدخول الاجتماعي". هذا يسمح بتجاوز شاشة Logto الافتراضية. مثلاً، عند النقر على زر تسجيل الدخول عبر Google سيتم مباشرة إطلاق تدفق مصادقة Google، معطيًا المستخدمين تجربة تسجيل دخول أسرع وأكثر سلاسة.

bolt_auth_9.png

التحديث القادم لـ Logto سيدعم التكامل الذكي مع المصادقة

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

مع هذا الإعداد ستتمكن من:

  1. إنشاء وإدارة المستخدمين
  2. عرض وتصفية السجلات
  3. إعداد تدفقات تسجيل الدخول والتسجيل
  4. تحديد موارد API والصلاحيات والأدوار
  5. إدارة التطبيقات وإعدادات الوصول
  6. والمزيد

بدمج الأدوات المحلية مع الذكاء الاصطناعي وبنية Logto، لن تكون المصادقة خطوة مؤلمة في التكامل بعد اليوم، بل تصبح جزءًا طبيعيًا من مسار تطويرك.