استخدام Claude Code و Logto لبناء تدفقات تسجيل دخول مخصصة بسرعة
تعلّم كيفية استخدام Claude Code لبناء تطبيق متكامل مع مصادقة Logto: من إعداد تسجيل الدخول إلى لوحات دخول مخصصة وتسجيل الدخول عبر الشبكات الاجتماعية.
تعلّم كيفية استخدام Claude Code لبناء تطبيق متكامل مع مصادقة Logto: من إعداد تسجيل الدخول إلى لوحات دخول مخصصة وتسجيل الدخول عبر الشبكات الاجتماعية.
Claude Code هو مساعد برمجي مدعوم بالذكاء الاصطناعي تم تطويره بواسطة Anthropic، صُمم لمساعدة المطورين في كتابة، وتصحيح، وفهم الشيفرة البرمجية بكفاءة أكبر. على عكس روبوتات الدردشة العامة، يركّز على سير عمل البرمجة ويتكامل بعمق مع بيئات التطوير. يمكن للمطورين استخدامه لتوليد مقاطع كود، شرح وظائف معقدة، إصلاح الأخطاء، أو تسريع النماذج الأولية دون الحاجة لمغادرة الأدوات أو فقدان التركيز.
يستند Claude Code إلى نماذج Claude من Anthropic، والتي تم تدريبها مع التركيز القوي على الأمان والموثوقية والمساعدة الحقيقية. هذا يعني أن Claude Code لا يهتم فقط بالسرعة، بل يشدد على تقديم شيفرة برمجية موثوقة وقابلة للصيانة في المشاريع الحقيقية.
يوجد بالفعل مساعدين برمجيين ومدعومين بالذكاء الاصطناعي في السوق، لكن Claude Code يتميز عنهم بعدة طرق رئيسية:
باختصار، بينما تركز الأدوات الأخرى على إكمال الكود، يسعى Claude Code ليكون شريكًا في البرمجة يوازن بين التوليد والفهم.
تم تصميم Claude Code لفئة واسعة من المستخدمين:
ببساطة، إذا كنت تكتب أو تقرأ أو تدير الكود بشكل منتظم، يمكن لـ Claude Code جعل عملية تطويرك أسرع وأكثر وضوحًا وأكثر اعتمادية.
اليوم سأرشدك في كيفية استخدام Claude Code لإضافة تسجيل دخول مخصص إلى تطبيقك، سواء كنت مطورًا محترفًا أو تبرمج للتسلية.
في هذا المثال، استخدمت Claude Code لبناء تطبيق لإدارة المستندات.
أولاً، توجهت إلى وحدة تحكم Logto السحابية لإنشاء تطبيق صفحة واحدة. ستجد خيارات تكوين متعددة ونقاط نهاية، سنستخدمها لاحقًا أثناء الدمج.

تولى Claude Code باقي المهمة: قام بتثبيت Logto React SDK الأحدث، أعد مكونات المصادقة، وربط كل شيء معًا.

وفقًا للتعليمات، كان يجب أن أزود النظام بمعلومتين أساسيتين:
قمت بنسخ نقطة النهاية ومعرّف التطبيق وأضفتهما إلى مشروعي، ووجهت عناوين URI لإعادة التوجيه وعناوين إعادة التوجيه بعد تسجيل الخروج.

يمكنك تمرير هاتين المعلومتين مباشرة إلى Claude Code وسيتولى إعداد باقي التكوين.
الآن دعنا نجرّب ذلك: اضغط "تسجيل الدخول" وستتم إعادة توجيهك إلى صفحة تسجيل الدخول المستضافة لدى Logto.

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

سيولد Claude Code:
استخدم حساب الاختبار الخاص بك للتحقق من أن عملية تسجيل الدخول تم التقاطها من قبل منصة Logto CIAM.

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