React Google 身份服务

Question

我一直在尝试在我的 React 应用程序中实现 Google 的身份服务 API，但无法让它工作。

我正在尝试实现以下非常简单的 JS 代码：https://developers.google.com/identity/gsi/web/guides/display-button#javascript

我想到的是：

  useEffect(() => {
    //I'm adding the <script>
    const elemScript = document.createElement('script'); 
    elemScript.src = "https://accounts.google.com/gsi/client";
    elemScript.async = true;
    elemScript.defer = true;
    document.body.append(elemScript);

    //adding the code from the documentation
    window.onload = function () {
      /*global google*/
      console.log(google)
      google.accounts.id.initialize({
        client_id: "<don't worry, I put the ID here>",
        callback: handleCredentialResponse
      });
      google.accounts.id.renderButton(
        googleButton.current, //this is a ref hook to the div in the official example
        { theme: "outline", size: "large" }  // customization attributes
      );
    }

    return () => {
      //I get ride of the <scripts> when the elements is unmounted
      document.body.removeChild(elemScript);
    }
  }, [])

  //This is my main and only objective, to get the token...
  function handleCredentialResponse(response) {
    console.log("Encoded JWT ID token: " + response.credential);
  }

  return (
    <div ref={googleButton}></div>
  )
}

export default GoogleAuth

当我在主应用程序中调用此组件时，它有时会呈现按钮，有时不会（原因似乎是 react-router-dom 因为它如果我从 domain 中的另一个页面移动到按钮所在的位置，则不会加载）。甚至当我得到渲染时我也会出错并且无法登录。

感谢 Bogdanof 的回答，通过使用 Promises 解决了按钮有时只出现的问题。

现在我唯一的问题是：

[GSI_LOGGER]: The given origin is not allowed for the given client ID.

我已经在 Google 上为这个应用程序制作并 ID OAuth2.0。我启用了 http://localhost:3000 因为它是 JS 来源（对于 URI 也是如此），但我仍然得到那个答案。我尝试更换浏览器，甚至删除我的缓存和 cookie，因为我读到这可能有帮助，但没有任何效果。

有人知道如何解决这个问题吗？

Answer 1

我没有测试过这个，但过去应用过这个技术。

const loadScript = (src) =>
  new Promise((resolve, reject) => {
    if (document.querySelector(`script[src="${src}"]`)) return resolve()
    const script = document.createElement('script')
    script.src = src
    script.onload = () => resolve()
    script.onerror = (err) => reject(err)
    document.body.appendChild(script)
  })

function GoogleAuth() {
  useEffect(() => {
    const src = 'https://accounts.google.com/gsi/client'

    loadScript(src)
      .then(() => {
        console.log(google)
        google.accounts.id.initialize({
          client_id: "<don't worry, I put the ID here>",
          callback: handleCredentialResponse,
        })
        google.accounts.id.renderButton(
          googleButton.current, //this is a ref hook to the div in the official example
          { theme: 'outline', size: 'large' } // customization attributes
        )
      })
      .catch(console.error)

    return () => {
      const scriptTag = document.querySelector(`script[src="${src}"]`)
      if (scriptTag) document.body.removeChild(scriptTag)
    }
  }, [])

  //This is my main and only objective, to get the token...
  function handleCredentialResponse(response) {
    console.log('Encoded JWT ID token: ' + response.credential)
  }

  return <div ref={googleButton}></div>
}

export default GoogleAuth

Answer 2

嘿，所以我得到了最终结果，由于使用了 Promises，下面的代码在呈现按钮时没有任何问题（再次感谢 bogdanoff 在这方面的帮助）：

//External imports
import { useEffect, useRef } from 'react'

  const loadScript = (src) =>
  new Promise((resolve, reject) => {
    if (document.querySelector(`script[src="${src}"]`)) return resolve()
    const script = document.createElement('script')
    script.src = src
    script.onload = () => resolve()
    script.onerror = (err) => reject(err)
    document.body.appendChild(script)
  })

const GoogleAuth = () => {

  const googleButton = useRef(null);

  useEffect(() => {
    const src = 'https://accounts.google.com/gsi/client'
    const id = "< your ID here ;) >"

    loadScript(src)
      .then(() => {
        /*global google*/
        console.log(google)
        google.accounts.id.initialize({
          client_id: id,
          callback: handleCredentialResponse,
        })
        google.accounts.id.renderButton(
          googleButton.current, 
          { theme: 'outline', size: 'large' } 
        )
      })
      .catch(console.error)

    return () => {
      const scriptTag = document.querySelector(`script[src="${src}"]`)
      if (scriptTag) document.body.removeChild(scriptTag)
    }
  }, [])

  function handleCredentialResponse(response) {
    console.log("Encoded JWT ID token: " + response.credential);
  }

  return (
    <div ref={googleButton}></div>
  )
}

export default GoogleAuth

然后为了解决 OAuth 问题，我在 Crow 的回答中找到了解决方案：

基本上添加没有端口的 http://localhost 到你的源（不知道为什么 gsi 需要这个，但它需要它）

希望这对某人有所帮助

Answer 3

如果您想自己实现，可以使用https://www.npmjs.com/package/@react-oauth/google, and you can check the implementation https://github.com/MomenSherif/react-oauth

React Google 身份服务

React Google Identity services

javascript

reactjs

google-identity