在 ReactJS 中实现简单的 Google oAuth答案

【问题标题】：Implementing simple Google oAuth in ReactJS在 ReactJS 中实现简单的 Google oAuth
【发布时间】：2021-06-10 01:32:34
【问题描述】：

我有一个这样设置的迷你香草 JS 应用程序：

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    <meta
      name="google-signin-client_id"
      content="{{client_id}}" /> <!--Here goes my actual WORKING google client id-->
    />
  </head>
  <body>
    <div class="g-signin2" data-onsuccess="onSignIn"></div>
 
    <button onclick="signOut()">Sign Out</button>
    <script>
      function onSignIn(googleUser) {
        const profile = googleUser.getBasicProfile();
        console.log("ID: " + profile.getId()); // Do not send to your backend! Use an ID token instead.
        console.log("Name: " + profile.getName());
        console.log("Image URL: " + profile.getImageUrl());
        console.log("Email: " + profile.getEmail()); // This is null if the 'email' scope is not present.
        }

      function signOut() {
        var auth2 = gapi.auth2.getAuthInstance();
        auth2.signOut().then(function () {
          console.log("User signed out.");
        });
      }

    </script>
  </body>
</html>

我在哪里登录用户，然后我可以使用 Google 将其注销。当我尝试将其转移到 React 项目时，我遇到了一些问题：

无法像在 VanillaJS 应用程序中那样执行函数（在引号之间）
即使我在 React 项目中的 public/index.html 中包含脚本标签，我也没有可以访问gapi 变量。有人知道怎么做吗？

【问题讨论】：

标签： javascript node.js reactjs oauth-2.0 google-oauth

【解决方案1】：

我认为你可以使用这个库https://www.npmjs.com/package/react-google-login。或者，也许您可以阅读该 repo 的 github 以了解如何获取 google oauth 以响应应用程序

【讨论】：