如何在React Native Android Firebase中发送邮箱验证并创建用户

实现思路 #

Firebase 默认流程是先创建用户再发送验证邮件，要实现验证邮箱后再创建账号，需要先通过 sendSignInLinkToEmail 发送验证链接，待用户验证邮箱后，再使用验证通过的邮箱创建正式账号。

具体实现步骤 #

1. 确认 Firebase 集成状态 #

确保已在 React Native 项目中完成 Firebase Auth 集成，Android 端已正确放置 google-services.json 配置文件。

2. 收集用户信息并发送验证链接 #

先获取用户输入的邮箱和密码，将密码临时存储（比如用 AsyncStorage），再调用 Firebase API 发送验证链接：

import AsyncStorage from '@react-native-async-storage/async-storage';
import auth from '@react-native-firebase/auth';

// 发送邮箱验证链接
const sendVerificationEmail = async (email, password) => {
  // 临时存储密码，验证完成后使用
  await AsyncStorage.setItem('temp_user_password', password);

  const actionCodeSettings = {
    // 验证成功后跳转的链接，需在 Firebase 控制台「认证-授权域」中添加
    url: 'https://your-app-domain.com/verify-email',
    // Android 端配置，替换为你的应用包名
    android: {
      packageName: 'com.your-app-package',
      installApp: true,
      minimumVersion: '12'
    },
    // 强制通过 App 处理验证链接
    handleCodeInApp: true
  };

  try {
    await auth().sendSignInLinkToEmail(email, actionCodeSettings);
    // 存储邮箱，后续验证时匹配使用
    await AsyncStorage.setItem('temp_user_email', email);
    alert('验证邮件已发送，请查收');
  } catch (error) {
    console.error('发送验证邮件失败:', error.message);
    alert('发送验证邮件失败：' + error.message);
  }
};

3. 检测验证链接并创建账号 #

在 App 启动时（比如 App.js 的 useEffect 钩子中）检测是否有验证链接，验证通过后创建正式用户：

import { Linking } from 'react-native';

useEffect(() => {
  const handleEmailVerification = async () => {
    const url = await Linking.getInitialURL();
    if (url && auth().isSignInWithEmailLink(url)) {
      try {
        // 获取临时存储的邮箱
        const email = await AsyncStorage.getItem('temp_user_email');
        if (!email) {
          alert('请重新发起邮箱验证');
          return;
        }

        // 验证邮箱链接有效性
        await auth().signInWithEmailLink(email, url);
        // 清除临时存储的邮箱
        await AsyncStorage.removeItem('temp_user_email');

        // 验证通过，创建正式账号
        const password = await AsyncStorage.getItem('temp_user_password');
        if (password) {
          await auth().createUserWithEmailAndPassword(email, password);
          await AsyncStorage.removeItem('temp_user_password');
          alert('账号创建成功！');
          // 跳转至应用首页或其他页面
        }
      } catch (error) {
        console.error('验证或账号创建失败:', error.message);
        alert('操作失败：' + error.message);
      }
    }
  };

  handleEmailVerification();
}, []);

4. Firebase 控制台与 Android 配置 #

• 前往 Firebase 控制台 → 认证 → 登录方法，启用「邮箱/密码」登录方式。
• 在「授权域」中添加 actionCodeSettings 里配置的 url 域名。
• Android 端需在 AndroidManifest.xml 中配置深度链接，确保点击验证链接能打开 App：

  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <!-- 替换为你的深度链接配置 -->
    <data android:scheme="https" android:host="your-app-domain.com" android:pathPrefix="/verify-email" />
  </intent-filter>
  

注意事项 #

• 临时存储的密码建议做加密处理，降低安全风险。
• 需处理用户删除 App、清除存储等异常场景，避免流程中断。
• 提供重新发送验证邮件的入口，方便用户重新操作。

内容的提问来源于stack exchange，提问作者Junaid Anwar