在 ReactJS 中实现简单的 Google oAuth

Question

我有一个像这样设置的迷你香草 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 变量。有人知道怎么做吗？

Answer 1

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

在 ReactJS 中实现简单的 Google oAuth

Implementing simple Google oAuth in ReactJS

javascript

node.js

oauth-2.0

google-oauth

reactjs