Angular集成Firebase实现Kakao登录遇自定义令牌格式错误问题

问题场景 #

在Angular应用中通过Firebase集成Kakao登录时，直接将Kakao返回的access_token传入signInWithCustomToken，触发以下错误：

Invalid assertion format. 3 dot separated segments required. (auth/invalid-custom-token)

原因是Kakao的access_token并非Firebase要求的JWT格式自定义令牌，需要通过后端转换。

原实现代码：

kakaoLogin() {
  window.Kakao.Auth.loginForm({
    success: (authObj: any) => {
      this.getKakao(authObj.access_token).then(res => { })
      this.afAuth.signInWithCustomToken(authObj.access_token).then(res => {
        console.log(res);
      })
    },
    fail(err: any) {
      console.log(err);
    },
  })
}
async getKakaoUser(token: string): Promise<User> {
  const kakaoUser: any = await this.http.get('https://kapi.kakao.com/v2/user/me?secure_resource=true', {
    headers: { Authorization: `Bearer ${token}` },
  });
  const user: any = {
    uid: `kakao:${kakaoUser.data.kakao_account.email}`,
    email: kakaoUser.data.kakao_account.email || "",
    displayName: kakaoUser.data.properties.nickname || "",
    photoURL: kakaoUser.data.properties.profile_image,
    provider: 'kakao',
  };
  return user;
}

解决方案：通过Firebase Admin SDK生成合法JWT令牌 #

Firebase的signInWithCustomToken仅接受由Firebase Admin SDK生成的JWT令牌，不能直接使用第三方平台的access_token。必须通过后端完成令牌转换（前端不能使用Admin SDK，避免暴露服务账号密钥），步骤如下：

1. 后端实现令牌转换逻辑 #

后端接收前端传来的Kakao access_token，先验证令牌有效性并获取用户唯一标识，再用Firebase Admin SDK生成自定义JWT令牌。

示例Node.js后端代码：

const admin = require('firebase-admin');
const axios = require('axios');

// 初始化Firebase Admin（需提前下载服务账号密钥）
admin.initializeApp({
  credential: admin.credential.cert('path/to/serviceAccountKey.json')
});

// 暴露给前端的令牌转换接口
async function getFirebaseCustomToken(req, res) {
  try {
    const { kakaoAccessToken } = req.body;
    
    // 验证Kakao令牌并获取用户信息
    const kakaoRes = await axios.get('https://kapi.kakao.com/v2/user/me?secure_resource=true', {
      headers: { Authorization: `Bearer ${kakaoAccessToken}` }
    });
    const kakaoUser = kakaoRes.data;
    
    // 生成Firebase自定义令牌，用Kakao用户ID作为唯一标识
    const uid = `kakao:${kakaoUser.id}`;
    const customToken = await admin.auth().createCustomToken(uid);
    
    res.status(200).send({ customToken });
  } catch (err) {
    res.status(400).send({ error: '令牌转换失败：' + err.message });
  }
}

2. 前端修改登录流程 #

前端获取Kakao的access_token后，先调用后端接口获取Firebase自定义令牌，再执行登录：

kakaoLogin() {
  window.Kakao.Auth.loginForm({
    success: async (authObj: any) => {
      try {
        // 调用后端接口获取Firebase自定义令牌
        const tokenRes = await this.http.post('/api/get-firebase-custom-token', {
          kakaoAccessToken: authObj.access_token
        }).toPromise();
        
        // 使用合法令牌登录Firebase
        const loginRes = await this.afAuth.signInWithCustomToken(tokenRes.data.customToken);
        console.log('Firebase登录成功：', loginRes);
      } catch (err) {
        console.error('登录失败：', err);
      }
    },
    fail(err: any) {
      console.log(err);
    },
  })
}

关键注意事项 #

• 禁止在前端使用Firebase Admin SDK：服务账号密钥属于敏感信息，前端暴露会导致账号被盗用。
• 用户标识选 Kakao 用户ID：相比邮箱，Kakao用户ID是永久唯一的，避免用户修改邮箱导致身份匹配失败。
• 前后端都要做错误捕获：覆盖令牌过期、验证失败、生成失败等异常场景。

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