为什么我的 Webapp 不能与 Google 的 OAuth 登录系统一起使用？

Question

I am attempting to build a basic Webapp which has a login with Google button.我正在尝试构建一个具有使用 Google 按钮登录的基本 Web 应用程序。 When the user logs in, I want the web app to change the 'login' button to change to a 'logout' button and also display the user's basic information such as their name which it obtains from their Google profile.当用户登录时，我希望 web 应用程序将“登录”按钮更改为“注销”按钮，并显示用户的基本信息，例如从 Google 个人资料中获取的姓名。

My site successfully opens the Google login page.我的站点成功打开了 Google 登录页面。 I am able to click on my Google profile to login and am successfully redirected back to my site.我可以点击我的 Google 个人资料进行登录，并成功重定向回我的网站。 However, nothing changes on my website.但是，我的网站上没有任何变化。 The login button still remains a login button and no information is displayed.登录按钮仍然是登录按钮，不显示任何信息。

I want my site to display the user's information and also change the "login" button to a "logout" button.我希望我的站点显示用户信息，并将“登录”按钮更改为“注销”按钮。

I have ensured that my Authorised JavaScript origin (http://localhost:8000) and my Authorised redirect URL (http://localhost:8000/callback) is set correctly.我已确保我的授权 JavaScript 来源 (http://localhost:8000) 和我的授权重定向 URL (http://localhost:8000/callback) 设置正确。 I have also added my CLIENT_ID to my index file.我还将我的 CLIENT_ID 添加到我的索引文件中。 I have also ensured that my client ID is correct.我还确保我的客户 ID 是正确的。

<html>
  <head>
    <script src="https://apis.google.com/js/platform.js"></script>
    <script>
      var googleUser;
      var profile;
      var auth2;

      function onSignIn(googleUser) {
        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());
        // Change the sign-in button to display the user's details
        document.getElementById("g-signin2").style.display = "none";
        document.getElementById("user-details").style.display = "block";
        document.getElementById("user-name").innerHTML = profile.getName();
        document.getElementById("user-email").innerHTML = profile.getEmail();
        document.getElementById("user-image").src = profile.getImageUrl();
      }

      function signOut() {
        auth2.signOut().then(function () {
          console.log('User signed out.');
          // Change the sign-in button back to the original state
          document.getElementById("g-signin2").style.display = "block";
          document.getElementById("user-details").style.display = "none";
        });
      }

      gapi.load('auth2', function() {
        gapi.auth2.init({
          client_id: 'my-client-id is in here',
          redirect_url: 'http://localhost:8000/callback',
          scope: 'profile email'
        }).then(function(auth) {
            auth2 = auth;
            // Check if user is already signed in
            if (auth2.isSignedIn.get()) {
              onSignIn(auth2.currentUser.get());
            }
        });
      });
    </script>
    <style>
        .g-signin2 {
            width: auto;
            margin: 0;
        }
        #user-details {
            display: none;
        }
    </style>
  </head>
  <body>
    </style>
  </head>
  <body>
    <div class="g-signin2" data-onsuccess="onSignIn" id="g-signin2"></div>
    <div id="user-details">
        <p id="user-name"></p>
        <button onclick="signOut()">Sign Out</button>
    </div>
  </body>
</html>

Answer 1

If you check the debugger F12 most browsers you will find your code is throwing an error and a warning如果您检查大多数浏览器的调试器 F12，您会发现您的代码抛出错误和警告

"You have created a new client application that uses libraries for user authentication or authorization that will soon be deprecated. New clients must use the new libraries instead; existing clients must also migrate before these libraries are deprecated. See the Migration Guide for more information." “您创建了一个新的客户端应用程序，该应用程序使用即将弃用的库进行用户身份验证或授权。新客户端必须改用新库；现有客户端也必须在这些库被弃用之前进行迁移。有关详细信息，请参阅迁移指南。 “

There is really no reason for you to bother fixing this code it will stop working very soon.您真的没有理由费心修复此代码，它很快就会停止工作。 You should use the new Web identity您应该使用新的Web 身份

code代码

<html>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script>
    function handleCredentialResponse(response) {
    console.log("Encoded JWT ID token: " + response.credential);
}
    window.onload = function () {
    google.accounts.id.initialize({
        client_id: "[REDACTED]",
        callback: handleCredentialResponse
    });
    google.accounts.id.renderButton(
    document.getElementById("buttonDiv"),
{ theme: "outline", size: "large" }  // customization attributes
    );
    google.accounts.id.prompt(); // also display the One Tap dialog
}
</script>
<div id="buttonDiv"></div>
</body>
</html>

为什么我的 Webapp 不能与 Google 的 OAuth 登录系统一起使用？

问题描述

1 个解决方案

解决方案1
0 2023-01-27 17:43:52

code代码

为什么我的 Webapp 不能与 Google 的 OAuth 登录系统一起使用？

问题描述

1 个解决方案

解决方案1 0 2023-01-27 17:43:52

code代码

解决方案1
0 2023-01-27 17:43:52