从google oauth登录响应中解码新的access_token

Question

我在react应用程序中使用@react-oauth/google包进行身份验证。根据它的文档，如果我使用<GoogleLogin onSuccess={...} />组件，那么我在响应中收到credential，我可以很容易地解码用户信息。

<GoogleLogin 
onSuccess={(res) => {
console.log(res);
}}
/>
// Response
{credential: 'eyJhbGciOiJSUzI1NiIsImtpZCI6IjhlMGFjZjg5MWUwOTAwOT…u5AjExZ4f6zvn8P-SZB4V0vTtQo-nXkR2ela_1foHoKXzCWDA', clientId:'626778026017....apps.googleusercontent.com', select_by: 'btn'}

但是如果我想使用我自己的自定义按钮，那么我必须使用useGoogleLogin钩子。这样做，我在响应中得到access_token，并且面临解码用户信息的困难。

const login = useGoogleLogin({
onSuccess: async (response) => {
console.log("Res", response);
},
});
return (
<Button onClick={() => login()}>
...
// Response 
access_token: "ya29.a0...nw0163",
authuser: "0",
expires_in:3599,
...

我已经尝试将该令牌发送到我的后端服务器并使用import { OAuth2Client } from "google-auth-library"提供的verifyIdToken函数。但是它给出了这样的错误:Wrong number of segments in token ...

我错过了什么吗?

Answer 1

在令牌流中，您不能获取JWT，但也不需要获取它来获取用户配置文件信息。Google提供access_token与他们的api对话

const googleLogin = useGoogleLogin({
onSuccess: async ({ access_token }) => {
const userInfo = await axios.get(
'https://www.googleapis.com/oauth2/v3/userinfo',
{ headers: { Authorization: `Bearer ${access_token}` } },
);
console.log(userInfo);
},
});

** userinfo响应**

{
"sub": "xxxxxxxxx",
"name": "Mo'men Sherif",
"given_name": "Mo'men",
"family_name": "Sherif",
"picture": "xxxxxxx",
"email": "[e-mail]",
"email_verified": true,
"locale": "ar"
}

在代码流中，你可以，所有你需要交换的代码来获取access_token, refresh_token和id_token (id_token是包含所有用户信息的JWT)

客户

const googleLogin = useGoogleLogin({
onSuccess: async ({ code }) => {
const tokens = await axios.post('http://localhost:3001/auth/google', {  // http://localhost:3001/auth/google backend that will exchange the code
code,
});
console.log(tokens);
},
flow: 'auth-code',
});

后端(使用express)

require('dotenv').config();
const express = require('express');
const {
OAuth2Client,
} = require('google-auth-library');
const cors = require('cors');
const app = express();
app.use(cors());
app.use(express.json());
const oAuth2Client = new OAuth2Client(
process.env.CLIENT_ID,
process.env.CLIENT_SECRET,
'postmessage',
);

app.post('/auth/google', async (req, res) => {
const { tokens } = await oAuth2Client.getToken(req.body.code); // exchange code for tokens
console.log(tokens);

res.json(tokens);
});
app.listen(3001, () => console.log(`server is running`));