Ionic应用中Firebase魔法链接无密码登录的技术疑问

我之前在Ionic项目里折腾Firebase魔法链接的时候，也碰到过和你一样的疑问，刚好把踩过的坑和关键步骤梳理给你：

关于handleCodeInApp: true和重定向URL的疑问 #

答案是不行的，不能随便填URL就生效。你得先在Firebase控制台完成两个关键配置：

1. 进入Authentication > Sign-in method，找到Email/Password（或者专门的“Email link (passwordless sign-in)”选项），开启该登录方式。
2. 在对应的配置页面，把你的重定向URL添加到已获授权的重定向URL列表里。比如开发环境用http://localhost:8100，生产环境用你的应用自定义域名（比如https://yourapp.com/login）。

只有配置了授权的URL，结合handleCodeInApp: true，Firebase才会把登录验证码嵌入到链接里，让你的Ionic应用能直接处理，而不是跳转到网页端完成登录。

Ionic中实现魔法链接的核心步骤 #

1. 发送魔法链接 #

在你的登录页面（比如login.page.ts）里，添加发送链接的代码：

import { getAuth, sendSignInLinkToEmail } from "firebase/auth";
import { AlertController } from '@ionic/angular';

constructor(private alertCtrl: AlertController) {}

async sendMagicLink(email: string) {
  const auth = getAuth();
  const actionCodeSettings = {
    url: "https://yourappdomain.com/login", // 这里填你授权过的重定向URL
    handleCodeInApp: true,
    // 如果是原生应用，需要配置平台信息
    iOS: {
      bundleId: "com.yourapp.ios"
    },
    android: {
      packageName: "com.yourapp.android",
      installApp: true,
      minimumVersion: "12"
    },
    // 用Firebase动态链接唤起原生App的话，填你的动态链接域名
    dynamicLinkDomain: "yourapp.page.link"
  };

  try {
    await sendSignInLinkToEmail(auth, email, actionCodeSettings);
    // 把用户邮箱存在本地存储，后续验证需要用到
    window.localStorage.setItem('emailForSignIn', email);
    const alert = await this.alertCtrl.create({
      header: '链接已发送',
      message: '请查收邮箱并点击链接登录',
      buttons: ['确定']
    });
    await alert.present();
  } catch (error) {
    console.error('发送失败:', error.message);
    const alert = await this.alertCtrl.create({
      header: '出错了',
      message: error.message,
      buttons: ['确定']
    });
    await alert.present();
  }
}

2. 处理点击链接后的登录逻辑 #

用户点击邮件链接后，会打开你的Ionic应用（或网页），这时候需要在应用初始化的地方（比如app.component.ts）或者登录页面的ngOnInit里，检查当前URL是否包含Firebase的登录验证码：

import { getAuth, isSignInWithEmailLink, signInWithEmailLink } from "firebase/auth";
import { Router } from '@angular/router';

constructor(private router: Router) {}

ngOnInit() {
  const auth = getAuth();
  // 检查当前URL是否是Firebase的登录链接
  if (isSignInWithEmailLink(auth, window.location.href)) {
    let email = window.localStorage.getItem('emailForSignIn');
    if (!email) {
      // 如果本地没存邮箱，可能需要弹窗让用户输入
      // 这里可以用Ionic的Alert组件实现
      email = prompt('请输入你收到链接的邮箱：');
      if (!email) return;
    }

    // 完成登录
    signInWithEmailLink(auth, email, window.location.href)
      .then((result) => {
        // 登录成功，清理本地存储的邮箱
        window.localStorage.removeItem('emailForSignIn');
        console.log('登录成功:', result.user);
        // 跳转到应用首页
        this.router.navigate(['/home']);
      })
      .catch((error) => {
        console.error('登录失败:', error.message);
        // 这里可以提示用户登录失败的原因
      });
  }
}

额外注意事项 #

• 如果是用Capacitor打包的原生iOS/Android应用，必须配置Firebase动态链接，否则点击邮件链接可能无法唤起App，而是打开网页。
• 开发环境下，记得把http://localhost:8100添加到Firebase的授权域名列表里，否则会出现“未授权域名”的错误。
• 不要使用未授权的URL，Firebase会直接拒绝处理该链接，这是为了防止钓鱼攻击。

内容的提问来源于stack exchange，提问作者Jordan Benge