基于auth2.0的谷歌第三方登录(2023年将弃用！)

Google服务注册

https://console.cloud.google.com/apis/credentials?pr

创建OAuth客户端ID

入口

web准备

教程：https://developers.google.com/identity/sign-in/web/reference#googleauthcurrentuserget

权限：https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow#js-client-library_1

GoogleUser.getBasicProfile（）

<script src="https://apis.google.com/js/platform.js?onload=init" async defer></script>

初始化

/**
 * @description: 配置初始化-加载auth2的库
 * @param {*}
 * @return {*}
 */
  function onInitGoogle() {
    let baseOptions = {
      client_id:
        "你申请的client_id",
      cookiepolicy: "single_host_origin",
    };
    gapi.load("auth2", function () {
      console.log("%c%s", "color: #00e600", "auth2-ready");
      gapi.auth2
        .init(baseOptions)
        .then((res) => {
          console.log("google init complete...", res);
          window.getAuthInstance = gapi.auth2.getAuthInstance(); //获取GoogleAuth对象
          let isSignedIn = getAuthInstance.isSignedIn.get(); //存储登录状态
          let GoogleUser = getAuthInstance.currentUser.get(); //这个方法获取返回的响应对象
          if (isSignedIn) {
            console.log(
              "%c%s",
              "color: #00a3cc",
              "window.getAuthInstance",
              GoogleUser
            );
          }
        })
        .catch((err) => console.log(err));
    });
  }

登录

  /**
 *google登录
 */
  function googleSignIn() {
   return  getAuthInstance.signIn()
  }

登出

 function googleSignOut() {
    getAuthInstance
      .signOut()
      .then((res) => {
        console.log(res, "退出登录");
        getAuthInstance.disconnect();
      })
      .catch((err) => console.log(err));
  }

官方实例代码

<script>
  var GoogleAuth;
  var SCOPE = 'https://www.googleapis.com/auth/drive.metadata.readonly';
  function handleClientLoad() {
    // Load the API's client and auth2 modules.
    // Call the initClient function after the modules load.
    gapi.load('client:auth2', initClient);
  }
  function initClient() {
    // In practice, your app can retrieve one or more discovery documents.
    var discoveryUrl = 'https://www.googleapis.com/discovery/v1/apis/drive/v3/rest';
    // Initialize the gapi.client object, which app uses to make API requests.
    // Get API key and client ID from API Console.
    // 'scope' field specifies space-delimited list of access scopes.
    gapi.client.init({
        'apiKey': 'YOUR_API_KEY',
        'clientId': 'YOUR_CLIENT_ID',
        'discoveryDocs': [discoveryUrl],
        'scope': SCOPE
    }).then(function () {
      GoogleAuth = gapi.auth2.getAuthInstance();
      // Listen for sign-in state changes.
      GoogleAuth.isSignedIn.listen(updateSigninStatus);
      // Handle initial sign-in state. (Determine if user is already signed in.)
      var user = GoogleAuth.currentUser.get();
      setSigninStatus();
      // Call handleAuthClick function when user clicks on
      //      "Sign In/Authorize" button.
      $('#sign-in-or-out-button').click(function() {
        handleAuthClick();
      });
      $('#revoke-access-button').click(function() {
        revokeAccess();
      });
    });
  }
  function handleAuthClick() {
    if (GoogleAuth.isSignedIn.get()) {
      // User is authorized and has clicked "Sign out" button.
      GoogleAuth.signOut();
    } else {
      // User is not signed in. Start Google auth flow.
      GoogleAuth.signIn();
    }
  }
  function revokeAccess() {
    GoogleAuth.disconnect();
  }
  function setSigninStatus() {
    var user = GoogleAuth.currentUser.get();
    var isAuthorized = user.hasGrantedScopes(SCOPE);
    if (isAuthorized) {
      $('#sign-in-or-out-button').html('Sign out');
      $('#revoke-access-button').css('display', 'inline-block');
      $('#auth-status').html('You are currently signed in and have granted ' +
          'access to this app.');
    } else {
      $('#sign-in-or-out-button').html('Sign In/Authorize');
      $('#revoke-access-button').css('display', 'none');
      $('#auth-status').html('You have not authorized this app or you are ' +
          'signed out.');
    }
  }
  function updateSigninStatus() {
    setSigninStatus();
  }
</script>
<button id="sign-in-or-out-button"
        style="margin-left: 25px">Sign In/Authorize</button>
<button id="revoke-access-button"
        style="display: none; margin-left: 25px">Revoke access</button>
<div id="auth-status" style="display: inline; padding-left: 25px"></div><hr>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script async defer src="https://apis.google.com/js/api.js"
        onload="this.onload=function(){};handleClientLoad()"
        onreadystatechange="if (this.readyState === 'complete') this.onload()">
</script>

备注 该API 2023年将废弃

说明网站： https://developers.google.com/identity/gsi/web 迁移方案 https://www.yuque.com/docs/share/516c88cc-e68c-4c79-b87c-ab1dd955f437?#