如何在Firebase中配置免密码邮箱登录并实现点击链接自动登录

后端配置校验 #

• 首先确认Firebase控制台「身份验证→设置→授权网域」中已经添加dev.test.com，避免跳转被拦截
• 确认你配置的动态链接域名magic42.page.link已经在Firebase动态链接服务中完成配置，关联了dev.test.com域名
• 纯Web场景下，ActionCodeSettings中的iOS/安卓相关配置可以省略，不影响Web端登录逻辑
• 不推荐直接把邮箱拼接在跳转URL中，避免参数被篡改，更安全的方式是前端在发送登录邮件前把邮箱存在本地存储中，跳转后读取

前端代码调整 #

你当前的signUp方法是邮箱+密码的凭证绑定逻辑，完全不适用于免密码登录场景，需要替换为免密登录专属的校验、登录逻辑：

1. 首先在signup页面初始化时，判断当前访问链接是否为有效的免密登录链接
2. 读取用户邮箱（优先读本地存储，兜底读URL参数你后端传递的邮箱）
3. 调用Firebase内置的signInWithEmailLink方法完成自动登录

完整示例代码如下：

import { Component, OnInit } from '@angular/core';
import firebase from 'firebase/app';
import 'firebase/auth';
import { from } from 'rxjs';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html'
})
export class SignupComponent implements OnInit {
  ngOnInit(): void {
    // 页面加载时自动校验是否为免密登录跳转
    const currentLink = window.location.href;
    if (firebase.auth().isSignInWithEmailLink(currentLink)) {
      // 优先读取本地存储的用户邮箱（用户首次提交邮箱时存储）
      let userEmail = window.localStorage.getItem('emailForSignIn');
      // 本地无存储时读取URL中后端传递的邮箱参数
      if (!userEmail) {
        const queryParams = new URLSearchParams(window.location.search);
        userEmail = queryParams.get('email');
      }
      if (userEmail) {
        this.handleEmailLinkSignIn(userEmail, currentLink).subscribe({
          next: (userCred) => {
            // 登录成功后的自定义逻辑：跳转首页、清除存储的邮箱等
            window.localStorage.removeItem('emailForSignIn');
            console.log('自动登录成功', userCred.user);
          },
          error: (err) => {
            console.error('登录失败，请重试', err);
          }
        })
      }
    }
  }

  // 免密登录核心方法，替换原有密码登录逻辑
  private handleEmailLinkSignIn(email: string, link: string) {
    return from(firebase.auth().signInWithEmailLink(email, link));
  }

  // 可选：用户首次输入邮箱提交时，调用该方法发送登录邮件（如果发件逻辑在后端则不需要这段）
  sendSignInLink(email: string) {
    const actionSettings = {
      url: 'https://dev.test.com/signup/',
      handleCodeInApp: true
    };
    return from(firebase.auth().sendSignInLinkToEmail(email, actionSettings).then(() => {
      // 发送成功后存储邮箱到本地，后续跳转回来使用
      window.localStorage.setItem('emailForSignIn', email);
    }))
  }
}

常见问题排查 #

• 免密登录链接是一次性有效，测试时每次需要重新生成新的链接
• 确认前端Firebase SDK的初始化配置和后端使用的是同一个Firebase项目
• 如果跳转后链接参数丢失，检查动态链接配置是否开启了参数透传

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