reactjs 在@react-oauth/google中获取令牌和谷歌ID

bvhaajcl  于 2023-03-22  发布在  React
关注(0)|答案(1)|浏览(195)

我已经实现了登录与谷歌功能为我的登录页面,我已经使用@react-oauth/google包。并在我的应用程序调度登录行动,我需要4件事-名称,电子邮件,令牌和googleId。
以前我使用react-google-login包,在那里我得到了所有这些项目。但从目前的包文档我发现...

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

<GoogleLogin
  onSuccess={credentialResponse => {
    console.log(credentialResponse);
  }}
  onError={() => {
    console.log('Login Failed');
  }}
/>;

从响应中,我得到了姓名和电子邮件,但没有需要的googleID或令牌。

const googleSuccess = (resp) => {
    let decoded = jwt_decode(resp?.credential);
    const email = decoded?.email;
    const name = decoded?.name;
    const token = resp?.tokenId;
    const googleId = resp?.googleId;
    const result = { email, name, token, googleId };
    dispatch(googleLogin({ result, navigate, toast }));
    console.log(result);
  };

我不得不使用jwt-decode,因为我得到的响应是一个JWT令牌。
这是Button组件

<GoogleLogin
          onSuccess={(resp)=>googleSuccess(resp)}
          onError={() => {
            console.log("Login Failed");
          }}
        />

我检查了其他方法比如

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

const login = useGoogleLogin({
  onSuccess: tokenResponse => console.log(tokenResponse),
});

<MyCustomButton onClick={() => login()}>
  Sign in with Google 🚀{' '}
</MyCustomButton>;

但这里我没有得到姓名电子邮件和谷歌ID

有什么建议吗?

eeq64g8w

eeq64g8w1#

如果您使用个性化按钮进行身份验证,则可以获取id_token(JWT)。
useGoogleLogin钩子正在 Package 新Google SDK中的授权部分

const googleLogin = useGoogleLogin({
onSuccess: async tokenResponse => {
  console.log(tokenResponse);
  // fetching userinfo can be done on the client or the server
  const userInfo = await axios
    .get('https://www.googleapis.com/oauth2/v3/userinfo', {
      headers: { Authorization: `Bearer ${tokenResponse.access_token}` },
    })
    .then(res => res.data);

  console.log(userInfo);
},
// flow: 'implicit', // implicit is the default

});
但我建议你,因为你有一个后端,去与授权代码流,这将返回代码,你将与你的后端交换,以获得,因为它是更安全的方式。
以下是整个讨论的源代码,其中包括客户端和后端的auth-code流的示例:https://github.com/MomenSherif/react-oauth/issues/12

相关问题