如何使用Google凭证在Feathers JS中创建注册用户

前端侧凭证获取与传参 #

用@react-oauth/google组件拿到登录响应后，不需要在前端做解码操作，直接把响应里的credential（即Google签发的ID Token）传给Feathers认证接口即可。
示例代码：

import { GoogleLogin } from '@react-oauth/google';

export default function GoogleAuthButton() {
  const handleSuccess = async (credentialRes) => {
    const { credential: idToken } = credentialRes;
    try {
      // 调用Feathers认证接口
      const res = await feathersClient.authenticate({
        strategy: 'google',
        idToken
      });
      // 登录/注册成功后会拿到Feathers签发的accessToken和用户信息，存本地做后续鉴权即可
      localStorage.setItem('feathersJWT', res.accessToken);
    } catch (err) {
      console.error('Google认证失败', err);
    }
  };

  return <GoogleLogin onSuccess={handleSuccess} onError={() => alert('Google登录出错')} />
}

后端Feathers侧配置与逻辑实现 #

官方文档只给了基础OAuth配置，缺了前端透传ID Token场景下的校验、解析、注册逻辑，按以下步骤实现：

• 先装必需依赖

npm install @feathersjs/authentication-oauth google-auth-library --save

• 在项目配置文件里补全Google认证参数，填你在Google云控制台申请到的客户端ID、密钥即可。
• 自定义Google认证策略，替换默认的OAuth跳转逻辑，直接校验前端传来的ID Token，提取用户信息完成查/注册，示例代码写在src/authentication.js里：

const { AuthenticationService, JWTStrategy } = require('@feathersjs/authentication');
const { OAuthStrategy } = require('@feathersjs/authentication-oauth');
const { OAuth2Client } = require('google-auth-library');

class GoogleIdTokenStrategy extends OAuthStrategy {
  async authenticate(authData) {
    const { idToken } = authData;
    const googleClientId = this.app.get('authentication').oauth.google.clientID;
    const client = new OAuth2Client(googleClientId);

    // 校验token合法性：自动验签名、验过期时间、验签发方，非法token直接抛错
    const ticket = await client.verifyIdToken({
      idToken,
      audience: googleClientId
    });
    const userPayload = ticket.getPayload();

    // 提取你需要的用户字段，按需增减
    const googleUserData = {
      googleId: userPayload.sub, // Google侧用户唯一ID，必须存，做账号关联用
      email: userPayload.email,
      username: userPayload.name,
      avatar: userPayload.picture,
      emailVerified: userPayload.email_verified
    };

    // 查库判断用户是否已存在
    const [existedUser] = await this.app.service('users').find({
      query: { googleId: googleUserData.googleId },
      paginate: false
    });

    let user;
    if (existedUser) {
      user = existedUser;
    } else {
      // 不存在则自动创建新用户完成注册
      user = await this.app.service('users').create(googleUserData);
    }

    // 签发Feathers自身的JWT返回给前端
    return {
      authentication: { strategy: 'google' },
      user,
      accessToken: await this.app.service('authentication').createAccessToken({ sub: user.id })
    };
  }
}

module.exports = (app) => {
  const authService = new AuthenticationService(app);
  authService.register('jwt', new JWTStrategy());
  authService.register('google', new GoogleIdTokenStrategy()); // 注册自定义Google策略
  app.use('/authentication', authService);
};

注意避坑 #

• 绝对不要信任前端传来的解码后用户数据，所有token校验、解码必须在后端完成，避免被人伪造token注册假账号
• 账号关联唯一键用Google返回的sub字段，不要用邮箱，Google账号支持换绑邮箱，用邮箱做关联会出现账号对应错的问题
• 本地开发时记得去Google云控制台把本地前端地址（比如http://localhost:5173）加到授权JS来源列表里，不然会报来源非法错误
• 如果需要走传统的OAuth跳转回调流程，不用重写整个authenticate方法，只要重写策略里的getEntityData方法，从Google返回的profile对象里提取对应字段即可，用户查存逻辑和上面一致

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