解决 Chrome Web 扩展程序中的 Firebase 电话身份验证错误

解决方案 1：使用 React for Chrome 扩展设置 Firebase 电话身份验证

该脚本演示了使用 JavaScript 和 React 的模块化前端方法。它包括错误处理、输入验证和扩展优化等最佳实践。

import React, { useState } from 'react';
import { auth } from './firebaseConfig';
import { RecaptchaVerifier, signInWithPhoneNumber } from 'firebase/auth';
const PhoneAuth = () => {
  const [phoneNumber, setPhoneNumber] = useState('');
  const [otp, setOtp] = useState('');
  const [verificationId, setVerificationId] = useState(null);
  const [error, setError] = useState('');
  const [message, setMessage] = useState('');
  const setupRecaptcha = () => {
    if (!window.recaptchaVerifier) {
      window.recaptchaVerifier = new RecaptchaVerifier(auth, 'recaptcha-container', {
        size: 'invisible',
        callback: () => {},
        'expired-callback': () => console.log('reCAPTCHA expired')
      });
    }
  };
  const sendOtp = async () => {
    try {
      setError('');
      setMessage('');
      setupRecaptcha();
      const appVerifier = window.recaptchaVerifier;
      const formattedPhoneNumber = '+' + phoneNumber.replace(/\D/g, '');
      const confirmationResult = await signInWithPhoneNumber(auth, formattedPhoneNumber, appVerifier);
      setVerificationId(confirmationResult.verificationId);
      setMessage('OTP sent successfully');
    } catch (err) {
      setError('Error sending OTP: ' + err.message);
      if (window.recaptchaVerifier) window.recaptchaVerifier.clear();
    }
  };
  return (
    <div style={{ margin: '20px' }}>
      <h2>Phone Authentication</h2>
      <div id="recaptcha-container"></div>
      <input
        type="text"
        placeholder="Enter phone number with country code (e.g., +1234567890)"
        value={phoneNumber}
        onChange={(e) => setPhoneNumber(e.target.value)}
        style={{ marginBottom: '5px' }}
      />
      <button onClick={sendOtp}>Send OTP</button>
      {message && <p style={{ color: 'green' }}>{message}</p>}
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </div>
  );
};
export default PhoneAuth;

解决方案 2：后端 Node.js 脚本与 Firebase Admin SDK 用于安全 OTP 生成

此后端 Node.js 脚本配置 Firebase Admin SDK 以进行 OTP 生成和验证，并针对安全电话身份验证进行了优化。

const admin = require('firebase-admin');
const serviceAccount = require('./path/to/serviceAccountKey.json');
admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  databaseURL: 'https://your-database-name.firebaseio.com'
});
async function sendOtp(phoneNumber) {
  try {
    const sessionInfo = await admin.auth().createSessionCookie(phoneNumber, { expiresIn: 3600000 });
    console.log('OTP sent successfully', sessionInfo);
  } catch (error) {
    console.error('Error sending OTP:', error.message);
  }
}
async function verifyOtp(sessionInfo, otpCode) {
  try {
    const decodedToken = await admin.auth().verifyIdToken(otpCode);
    console.log('OTP verified successfully');
    return decodedToken;
  } catch (error) {
    console.error('Error verifying OTP:', error.message);
    return null;
  }
}
module.exports = { sendOtp, verifyOtp };

解决方案 3：使用 Jest 测试前端电话身份验证逻辑

使用 Jest 对 React 组件和 Firebase 功能进行单元测试，以确保前端稳定性。

import { render, screen, fireEvent } from '@testing-library/react';
import PhoneAuth from './PhoneAuth';
import { auth } from './firebaseConfig';
import { RecaptchaVerifier, signInWithPhoneNumber } from 'firebase/auth';
jest.mock('firebase/auth');
test('sends OTP when button is clicked', async () => {
  render(<PhoneAuth />);
  const phoneInput = screen.getByPlaceholderText(/Enter phone number/);
  const sendOtpButton = screen.getByText(/Send OTP/);
  fireEvent.change(phoneInput, { target: { value: '+1234567890' } });
  fireEvent.click(sendOtpButton);
  expect(signInWithPhoneNumber).toHaveBeenCalledTimes(1);
});

有关 Chrome 扩展程序中 Firebase 电话身份验证的常见问题

1. Firebase 身份验证中的“auth/internal-error”是什么意思？
2. 此错误通常表示配置问题或请求被阻止。确保您已在 Firebase 设置中将必要的域列入白名单，并且 signInWithPhoneNumber 设置正确。
3. 为什么我的 Chrome 扩展程序中的 reCAPTCHA 验证失败？
4. 由于其特定的安全环境，reCAPTCHA 在 Chrome 扩展中可能会失败。使用 RecaptchaVerifier 使用正确的配置，并确保您的扩展程序的域已列入白名单。
5. 如何确保电话号码格式正确？
6. 使用 replace(/\D/g, '') 删除非数字字符，确保电话号码采用带有国家/地区代码的国际格式（例如，+1234567890）。
7. 出现错误后如何重置 reCAPTCHA？
8. 发生错误后必须清除 reCAPTCHA，以避免重复使用旧实例。您可以使用以下方法执行此操作 window.recaptchaVerifier.clear()，然后重新初始化它。
9. 我可以在 Chrome 扩展程序中使用 Firebase Admin SDK 吗？
10. 出于安全原因，不允许在客户端代码中直接使用 Firebase Admin SDK。相反，使用 Admin SDK 创建后端服务来安全地处理敏感任务。
11. 如何在 Chrome 扩展程序中测试 Firebase 身份验证？
12. 测试涉及结合使用 Chrome 扩展调试工具和 Jest 进行单元测试。您可以使用以下方式模拟 Firebase 身份验证 jest.mock 进行高效测试。
13. 是否可以在 Firebase 身份验证中绕过 reCAPTCHA？
14. 不，reCAPTCHA 对于安全性至关重要且无法被绕过。但是，您可以使用 size: 'invisible' 在您的配置中获得无缝的用户体验。
15. 我可以离线使用 Firebase 电话身份验证吗？
16. 电话身份验证需要互联网连接才能通过 Firebase 服务器验证 OTP，因此无法离线使用。考虑离线身份验证的替代方法。
17. 如果 Firebase 阻止我的 OTP 请求，我该怎么办？
18. 检查 Firebase 的安全规则或反滥用设置是否阻止了请求。另外，请确认扩展程序的域已列入白名单，以避免请求被阻止。
19. 如果我的分机的 OTP 多次失败会怎样？
20. 持续的 OTP 失败可能表示速率限制或配置错误。清除 reCAPTCHA，重试，并考虑在不同设备上进行测试以识别问题。

解决 Chrome 扩展程序中的 Firebase 身份验证错误

解决 Chrome 扩展程序中的 Firebase 身份验证错误需要仔细配置，尤其是在 reCAPTCHA 和域设置方面。确保扩展程序的 URL 在 Firebase 中正确列入白名单并确认 reCAPTCHA 按预期运行是关键的第一步。

配置 Firebase 后，可以通过使用精确、用户友好的错误消息解决任何基于代码的错误，从而实现安全、无缝的 OTP 流程。这有助于用户自行纠正问题，最大限度地减少中断并使体验更加可靠。按照这些步骤，您可以在 Chrome 扩展程序中提供强大的电话身份验证。 🔧