如何通过@react-oauth-google获取用户姓名、邮箱及头像信息？

你看到的credential字段是一个JWT（JSON Web Token）令牌，用户的姓名、邮箱、头像等核心信息都加密存储在这个令牌里，需要解析后才能提取出来。下面是具体的解决步骤：

步骤1：安装JWT解析库 #

推荐使用jwt-decode库来解析令牌，避免手动解析的潜在错误。在项目终端执行安装命令：

npm install jwt-decode
# 或使用yarn
yarn add jwt-decode

步骤2：修改代码解析令牌 #

更新你的组件代码，导入jwt-decode并在登录成功后解析credential字段：

import './App.css';
import React from 'react';
import { GoogleOAuthProvider } from '@react-oauth/google';
import { GoogleLogin } from '@react-oauth/google';
import jwtDecode from 'jwt-decode'; // 导入JWT解析库

function App() {
  const clientId = "你的Client Id";
  
  const showUserInformation = (response) => {
    // 解析credential令牌，获取用户完整信息
    const userInfo = jwtDecode(response.credential);
    console.log('完整用户信息：', userInfo);
    
    // 提取需要的字段
    const { name, email, picture } = userInfo;
    console.log('姓名：', name);
    console.log('邮箱：', email);
    console.log('头像地址：', picture);
  }

  return (
    <div className="App">
      <GoogleOAuthProvider clientId={clientId}>
        <GoogleLogin
          onSuccess={showUserInformation}
          onError={() => {
            console.log('Login Failed');
          }}
        />
      </GoogleOAuthProvider>
    </div>
  );
}

export default App;

解析后可获取的核心字段说明 #

解析JWT后，你能直接拿到的常用用户字段包括：

• name：用户全名
• email：用户绑定的邮箱
• picture：用户头像的URL地址
• given_name：用户的名字（不含姓氏）
• family_name：用户的姓氏

注：只要你的Google OAuth客户端配置了正确的权限范围（默认创建客户端时已包含基础信息权限），这些字段都能正常获取。

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