Question

我正在构建一个React应用，该功能的关键部分是用户可以登录其Google帐户，然后访问其最新的Google云端硬盘/文档提及和通知的供稿。用户到达我的网站时，我在其中加载了client_id，apiKey，scope和discoveryDocs的Google OAuth2客户端，他们可以单击按钮进行登录。为方便起见，我希望用户不必在每次使用该应用程序或刷新应用程序时都重新登录并使用其Google帐户进行身份验证，而是希望在各个会话之间保存登录信息。为此，我将使用localStorage来启动，但最终要集成Firebase之类的数据库。

浏览JavaScript客户端Google OAuth2文档后，我了解了大多数事情的工作原理-了解了存储在GoogleUser，GoogleAuth等对象中的数据和方法。我在访问和刷新令牌时遇到了一些麻烦。我知道您可以通过gapi.auth2.getAuthInstance().currentUser.get()获取经过身份验证的用户的信息，并且gapi.auth2.getAuthInstance().currentUser.get().getAuthResponse()返回一个对象，其中包含我认为我需要的很多内容，例如id_token，access_token和元数据（例如{ {1}}和expires_at。我还看到了从中提取token_type的{{1}}方法，但是我不确定这些标记化字符串中的哪一个是正确的使用方式以及如何使用它。

Google（https://developers.google.com/api-client-library/javascript/help/faq）的此常见问题解答虽然有所帮助，但建议使用grantOfflineAccess()，但是Google在客户端JS OAuth2库中指出response.code与使用更广泛的兼容并大量记录了Refresh the token by calling gapi.auth.authorize with the client ID, the scope and immediate:true as parameters.和gapi.auth.authorize。

我在Google OAuth2 API Refresh Tokens之类的帖子中也有一个模糊的想法，我需要遵循服务器端OAuth2的说明，而我只能通过服务器端调用来获取此api.auth2.init，但我仍然有点茫然。我会警告说，我更像是前端开发人员/设计人员，所以我对节点和服务器端技能感到不满意。

TL;博士：我不知道如何让刷新后通过Google OAuth2登录的用户保持登录状态。我知道这是由于signIn和refresh_token造成的，我可以访问它们，但是在发送数据到Google服务器，取回信息以及设置给定用户返回时的令牌信息。

这是我的方法，它调用componentDidMount（基本上是在我的应用首次加载时）：

refresh_token

这是我单击“登录”按钮上的代码：

access_token

Answer 1

如果您使用的是客户端库（apga api），则无需刷新令牌。登录后，它应可在会话和刷新中持续存在。问题是代码...

1）在index.html部分的head中添加它：

<script src="https://apis.google.com/js/api.js"></script>

2）这是一个将使用gapi lib处理身份验证并有条件地呈现按钮的组件（代码是不言自明的，但是如果您有任何疑问，只问...）

import React from 'react';

class GoogleAuth extends React.Component {
  state = { isSignedIn: null };

  componentDidMount() {
    window.gapi.load('client:auth2', () => {
      window.gapi.client
        .init({
          clientId: '<your client id here...>',
          scope: 'email', // and whatever else passed as a string...
        })
        .then(() => {
          this.auth = window.gapi.auth2.getAuthInstance();
          this.handleAuthChange();
          this.auth.isSignedIn.listen(this.handleAuthChange);
        });
    });
  }

  handleAuthChange = () => {
    this.setState({ isSignedIn: this.auth.isSignedIn.get() });
  };

  handleSignIn = () => {
    this.auth.signIn();
  };

  handleSignOut = () => {
    this.auth.signOut();
  };

  renderAuthButton() {
    if (this.state.isSignedIn === null) {
      return null;
    } else if (this.state.isSignedIn) {
      return <button onClick={this.handleSignOut}>Sign Out</button>;
    } else {
      return <button onClick={this.handleSignIn}>Sign in with Google</button>;
    }
  }
  render() {
    return <div>{this.renderAuthButton()}</div>;
  }
}

export default GoogleAuth;

现在，您可以在应用程序中的任何位置简单地使用此组件/按钮...这意味着，如果您有Navigation组件，则只需将其导入并用作按钮登录/注销...

刷新/使用React应用中的Google OAuth2的刷新令牌后，保持用户登录

1 个答案: