ازاي تطبق المصادقة الثنائية Two-Factor Authentication (2FA) مع انيرشيا Inertia.js بسهولة؟

يا هلا بيك يا صديقي المبرمج! أكيد في يوم من الأيام، وأنت شغال على مشروع ويب جديد، جالك العملاء أو الـ Product Manager وقالوا الجملة الشهيرة: "يا جماعة، محمين السيرفر بتاعنا كويس، بس لازم نزود أمان حسابات المستخدمين ونضيف المصادقة الثنائية Two-Factor Authentication (2FA)". وهنا بيجي وجع الدماغ الحقيقي؛ خصوصاً لو أنت مستخدم تكنولوجيا تطبيقات الصفحة الواحدة Single Page Applications زي انيرشيا Inertia.js مع لارا فويست Laravel، وحاسس إن الموضوع هيكون معقد في ربط الـ Backend بالـ Frontend.

في المقال ده، هناخد رحلة خطوة بخطوة عشان نفهم ونتعلم ازاي نعمل إعداد واجهات المصادقة الثنائية وتأمين حسابات المستخدمين في تطبيقات الصفحة الواحدة بكل سلاسة وبدون تعقيد، وبأفضل ممارسات الـ Web Development وتطوير الـ Full-stack.

ليه أصلاً محتاجين (2FA) في تطبيقنا؟

زمان، كان الباسورد (Password) لوحده كفاية. لكن دلوقتي مع كتر عمليات الاختراق وتسريب بيانات المستخدمين، الباسورد لم يعد آمن بالمرة. المصادقة الثنائية أو الـ Two-Factor Authentication (2FA) بتضيف طبقة أمان تانية حامية؛ يعني حتى لو الباسورد اتسرق، الهاكر مش هيقدر يدخل غير لما يدخل الكود المتغير اللي بيظهر على تطبيق الموبايل زي Google Authenticator أو Authy.

في بيئة لارا فويست، الموضوع بقى أسهل بكتير خصوصاً لو استخدمنا حزمة قوية زي Laravel Fortify، اللي بتوفر لنا كل الـ Logics الخاصة بالـ Backend من غير ما تبنيها من الصفر، ودورنا مع Inertia.js هيكون بناء واجهات مستخدم User Interfaces تفاعلية وسريعة.

خطوة 1: تثبيت واعداد الـ Backend مع Laravel Fortify

أول خطوة هنعملها هي تجهيز الظهر أو الـ Backend. لو أنت شغال لارافيل، فأحسن وأسرع طريقة هي استخدام Laravel Fortify عشان نتفادى كتابة أكواد الـ Authentication المعقدة يدوياً.

افتح الترمنال (Terminal) واكتب الأمر ده عشان تثبت فورتيفاي:

composer require laravel/fortify
php artisan fortify:install
php artisan migrate

بعد كده، هنروح على ملف التكوين config/fortify.php ونفعل ميزة المصادقة الثنائية عن طريق إضافة الـ Feature دي في الـ Features array:

Features::twoFactorAuthentication([
    'confirm' => true,
    'confirmPassword' => true,
]),

الخطوة دي بتقول للارافيل إننا جاهزين نستقبل طلبات تفعيل الـ 2FA، وهتنشئ الأعمدة المطلوبة في جدول الـ Users زي two_factor_secret و two_factor_recovery_codes.

خطوة 2: ربط الـ Inertia Frontend مع مسارات الـ 2FA

دلوقتي جه الدور على الواجهة الأمامية (Frontend) باستخدام Inertia.js (سواء كنت شغال Vue.js أو React). احنا محتاجين نعمل صفحة إعدادات (Profile/Settings) يقدر المستخدم من خلالها يدوس على زرار "تفعيل المصادقة الثنائية Enable 2FA".

لما المستخدم بيدوس على الزرار، بنبعث طلب POST لـ مسار الفورتيفاي الخاص بالـ 2FA:

import { useForm } from '@inertiajs/vue3';

const form = useForm({});

const enableTwoFactor = () => {
    form.post('/user/two-factor-authentication', {
        preserveScroll: true,
        onSuccess: () => {
            // هنا ممكن نجيب الـ QR Code عشان نعرضه للمستخدم
        },
    });
};

بعد ما الطلب يتم بنجاح، الـ Backend بينشئ لنا QR Code مفروض المستخدم يمسحه بتطبيق الموبايل بتاع الـ Authenticator.

خطوة 3: عرض الـ QR Code وتأكيد الكود

عشان نعرض الـ QR Code للمستخدم في واجهة انيرشيا، بنحتاج نقرأ الـ SVG الخاص بالـ QR من خلال الـ Props اللي جاية من الـ Backend عبر تحكم الـ Profile Controller.

في الـ Vue component، نقدر نعرض الـ QR Code بالشكل ده:

<div v-if="props.auth.user.two_factor_secret">
    <div v-html="qrCodeSvg"></div>
    
    <form @submit.prevent="confirmTwoFactor">
        <input type="text" v-model="confirmationForm.code" placeholder="أدخل الكود من التطبيق" />
        <button type="submit">تأكيد التفعيل</button>
    </form>
</div>

ومسار التأكيد (Confirmation) بيكون بـ إرسال طلب POST لـ /user/confirmed-two-factor-authentication ومعاه الكود اللي كتبه المستخدم عشان نتاكد إن التطبيق شغال تمام وبيربط صح.

خطوة 4: التعامل مع شاشة تسجيل الدخول Login Challenge

لما المستخدم يجي يسجل دخوله بعد كده، ولأن حسابه مفعل عليه الـ 2FA، لارافيل هتحوله تلقائياً على صفحة التحدي Two-Factor Challenge.

بما إننا شغالين Inertia، فلازم نعمل صفحة Vue أو React مخصصة للـ Challenge دي، وتستقبل الـ Request لما المستخدم يكتب الـ 6 أرقام:

const challengeForm = useForm({
    code: '',
});

const submitChallenge = () => {
    challengeForm.post('/two-factor-challenge', {
        onError: (errors) => {
            // لو الكود غلط، بنعرض الخطأ للمستخدم
        }
    });
};

بكده، بنكون غطينا الدورة الكاملة للمصادقة الثنائية: التفعيل، قراءة الـ QR Code، التأكيد، وتسجيل الدخول الآمن.

خاتمة ونصيحة من أخ

يا صديقي، موضوع الأمان مش رفاهية في عصرنا الحالي، وتطبيق ميزات زي الـ Two-Factor Authentication (2FA) بيعكس مدى احترافيتك واهتمامك بتجربة المستخدم وصناعته لبيئة آمنة على تطبيقك. في الأول ممكن تحس إن الدنيا متربطة ببعضها بين Inertia و Fortify، بس صدقني بمجرد ما تفهم الـ Flow وتجرب بايدك، هتلاقي الموضوع ممتع جداً وبيضيف قيمة كبيرة لـ سيرة الذاتية وللمشروع بتاعك.

مارس الكود كتير، وماتخافش من الأخطاء، لأنها هي دي الطريق الوحيد للاحتراف في عالم الـ Web Development.