如何使用 Inertia.js 和 Vue 3 在 Laravel 中实现 2FA？

Question

我正在开发一个使用 Laravel、Inertia.js 和 Vue 3 的项目，我想为用户登录实现双因素身份验证 (2FA)。我的设置包括一个 MySQL 数据库，其中包含一个用户表，其中包含一列 2fa_enabled 来指示用户是否需要 2FA。

这是我想要实现的工作流程：

1. 用户首次登录时，如果2fa_enabled设置为true，则需要进行2FA。
2. 系统发送验证码到用户的手机号码和邮箱。
3. 用户输入代码，然后进行验证。
4. 如果代码正确，系统会将代码保存在数据库中并将用户重定向到仪表板。
5. 如果代码不正确，用户会看到一条错误消息。

我在实现过程中遇到了一些问题，我不确定如何正确设置验证码生成和处理流程。我尝试使用 Firebase 发送短信代码并处理 ReCaptcha 验证，但遇到了以下问题：

未捕获（承诺中）ReferenceError：Firebase 未定义 验证码验证失败
在我的 Vue 3 组件中处理代码验证

如果您能提供有关如何执行以下操作的指导，我将不胜感激：

• 使用 Firebase 正确生成和处理 2FA 代码。 管理 ReCaptcha 验证。
• 在我的 Vue 3 组件中处理代码验证。

以下是我如何设置 ReCaptcha 验证器和 Firebase 初始化：

import { initializeApp } from 'firebase/app';
import { getAuth, RecaptchaVerifier } from 'firebase/auth';

const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID",
    measurementId: "YOUR_MEASUREMENT_ID"
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

const recaptchaContainer = document.getElementById('recaptcha-container');
const recaptchaVerifier = new RecaptchaVerifier(recaptchaContainer, {
    size: 'invisible',
    callback: (response) => {
        console.log('reCAPTCHA resolved');
    },
    'expired-callback': () => {
        console.log('reCAPTCHA expired');
    }
}, auth);

async function getCode(phoneNumber) {
    try {
        const confirmationResult = await auth.signInWithPhoneNumber(phoneNumber, recaptchaVerifier);
        console.log('Code sent:', confirmationResult);
    } catch (error) {
        console.error('Error during sign-in with phone number:', error);
        console.error('Error code:', error.code);
    }
}

// Example usage
getCode('[phone]');

Answer 1

The error you're encountering likely stems from the fact that Firebase Authentication methods, such as signInWithPhoneNumber(), are asynchronous, and you're attempting to use them before Firebase has finished initializing.

To fix this issue, you should ensure that Firebase has finished initializing before attempting to use any Firebase Authentication methods. You can achieve this by waiting for the Firebase app initialization to complete before calling getCode().

Here's how you can modify your code to ensure Firebase initialization is complete before calling getCode():

    import { initializeApp } from 'firebase/app';
import { getAuth, RecaptchaVerifier } from 'firebase/auth';

const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID",
    measurementId: "YOUR_MEASUREMENT_ID"
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

// Wait for Firebase initialization to complete
app.then(() => {
    const recaptchaContainer = document.getElementById('recaptcha-container');
    const recaptchaVerifier = new RecaptchaVerifier(recaptchaContainer, {
        size: 'invisible',
        callback: (response) => {
            console.log('reCAPTCHA resolved');
        },
        'expired-callback': () => {
            console.log('reCAPTCHA expired');
        }
    }, auth);

    async function getCode(phoneNumber) {
        try {
            const confirmationResult = await auth.signInWithPhoneNumber(phoneNumber, recaptchaVerifier);
            console.log('Code sent:', confirmationResult);
        } catch (error) {
            console.error('Error during sign-in with phone number:', error);
            console.error('Error code:', error.code);
        }
    }

    // Example usage
    getCode('[phone]');
}).catch(error => {
    console.error('Firebase initialization error:', error);
});



By waiting for the app promise to resolve, you ensure that Firebase is fully initialized before attempting to use Firebase Authentication methods. This should resolve the error you're encountering.