Angular中使用Firebase注册认证时如何添加自定义Token

问题核心 #

你当前调用的accounts:signInWithCustomToken接口是用于自定义令牌登录的，完全不匹配邮箱密码注册的场景，这也是导致400错误的直接原因。邮箱密码注册需要使用Firebase专门的accounts:signUp接口，该接口不需要额外的token参数（仅需URL中替换你的Firebase API Key）。

修正auth.service.ts的signup方法 #

将API端点替换为注册专用地址，代码示例如下：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private apiKey = '你的Firebase API Key'; // 替换为实际的API Key

  constructor(private http: HttpClient) { }

  signup(email: string, password: string) {
    return this.http.post(
      `https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=${this.apiKey}`,
      {
        email: email,
        password: password,
        returnSecureToken: true
      }
    );
  }
}

验证onSubmit逻辑 #

你当前auth.component.ts中的onSubmit方法逻辑无需改动，调用修正后的signup方法即可。提交表单后，Firebase会自动处理用户注册，并返回包含idToken、refreshToken等信息的响应。

关于自定义令牌的补充说明 #

如果后续涉及自定义令牌登录场景，才需要生成token：

• 自定义令牌必须通过Firebase Admin SDK在后端服务器生成（前端生成存在严重安全风险）
• 生成后前端调用accounts:signInWithCustomToken接口，将自定义令牌作为请求体中的token参数传入

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