如何让 Google 身份验证与 ReactJs 一起使用？

Question

我一整天都在尝试让 Google 身份验证与 React 一起使用，但是在搜索了几个小时后，我发现我发现的只是一个错误的、有时工作的、混乱的问题。谁能看到我做错了什么？ （这是一个学校项目，所以我正在学习！）

该项目将是一个在线时间表创建者。

我的主要 Index.js 具有以下渲染功能：

  function renderApp() {
    ReactDOM.render(
      <Router history={browserHistory}>
        <Route path="/" component={Login}></Route>
        <Route component={AuthUserContainer}>
          <Route path="/auth" component={Layout}>
            <IndexRoute component={Overview}></IndexRoute>
            <Route path="schedule(/:scheduleid)" component={Schedule}></Route>
          </Route>
        </Route>
      </Router>,
    app);
  }

主页只是一个登录页面，由登录组件处理，如果身份验证成功，它将将用户重定向到 /auth。每次访问受保护的路由时，AuthUserContainer 都会持续处理身份验证。

Login 组件有一个 Google Sign In 按钮，所有受保护的路由都有（通过 Layout 组件）一个 Google Sign Out 按钮。

我的 Header.js 包含“Google 退出按钮”（signOutHandler）：

export default class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.SignOutHandler = this.SignOutHandler.bind(this);
  }

  SignOutHandler() {
    var auth2 = gapi.auth2.getAuthInstance();
    auth2.signOut().then(function () {
      console.log('User signed out.');
      Authenticate.signOutUser();
    });
  }

  render() {
    return (
      <div class="header-content">
        <h2 class="header-title">Schedule</h2>
        <h3 class="header-user-button">
            <a href="/" onClick={this.SignOutHandler}>User First Name</a>
        </h3>
      </div>
    );
  }
}

我使用 Google 自己的示例代码并尝试针对 React 调整它。我使用此代码遇到的问题是“未捕获的 TypeError：无法读取未定义的属性 'getAuthInstance'”。由于我将登录和注销按钮拆分为单独的页面，因此 auth2 未正确初始化，但单击该按钮两次可以使其工作。在这里尝试手动初始化它经常给我Gapi未定义的错误......

最后是 Login.js：

export default class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.onSignIn = this.onSignIn.bind(this);
    this.renderGoogleLoginButton = this.renderGoogleLoginButton.bind(this);
  }

  renderGoogleLoginButton() {
      console.log('rendering google signin button')
      gapi.signin2.render('my-signin2', {
        'scope': 'https://www.googleapis.com/auth/plus.login',
        'width': 200,
        'height': 50,
        'longtitle': true,
        'theme': 'light',
        'onsuccess': this.onSignIn
      });

      gapi.load('auth2', function() {
        gapi.auth2.init();
      });
    }

  componentDidMount() {
      window.addEventListener('google-loaded', this.renderGoogleLoginButton);
  }

  onSignIn(googleUser) {
    Authenticate.signInUser(googleUser.getBasicProfile());
    this.props.router.push("/auth");
  }

  render() {
    return (
      <div class="container">
        <h2 class="form-signin-heading">
          Sign-in with Google account required
        </h2>
        <div id="my-signin2"></div>
      </div>
    );
  }
}

我的这段代码也是基于 Google 自己的，但这根本不起作用（按钮没有加载，根本没有显示，或者它从未调用 onSignIn）。我还找到并尝试了this，这使它有点工作（有时）。我还尝试在 renderGoogleLoginButton() 中初始化 auth2，但这有时也有效...

renderGoogleLoginButton() 由自定义事件（google-loaded）的偶数处理程序调用，该事件在 Google API 加载时触发（就像在链接中一样）。 Authenticate 是我自己的类，它将我创建的令牌、getUserName 函数等捆绑在一起。

我还从 gapi 收到以下错误：“Uncaught TypeError: Cannot read property 'style' of null”，我认为它试图引用登录/注销按钮，但因为它们当时没有加载为空。

我找不到任何不会导致故障或错误的好的解决方案。 Googles own code 将所有内容都放在同一个 HTML 文档中，但是由于我想将其拆分为组件，因此它全部中断。也许我这样做完全错了？我对 React 很陌生，但希望它是可以理解的！

抱歉发了这么长的帖子，非常感谢您抽出宝贵时间，如果您有任何问题，请随时提问！

Answer 1

除了来自 Gapi 的一些小抱怨外，我得到了它的工作： “无法读取null的属性'样式'”，这显然与gapi找不到登录按钮或类似的东西有关。我没有发现任何功能错误。

为了将来参考，这就是我所做的（有点快速修复，但至少它现在正在工作）：

所有路线现在都有一个包含所有路线的路线容器。这样容器总是在访问任何路由之前被调用，我可以在那里处理所有的身份验证和登录。

在这个容器（称为 Base）中有一个事件侦听器，用于侦听 gapi（谷歌平台脚本）何时完成加载。当事件触发时，我存储 gapi，并将 auth2 初始化并存储为 Base 中的状态变量。它们只加载一次，然后它们将通过 props 传递给所有需要它们的组件。

我的 Header.js 现在同时具有登录和退出按钮。一个是隐藏的，另一个是根据您是否登录而显示的。

onSignIn(googleUser) 会在每次重新渲染时被调用，因为您会重新渲染 Google 登录按钮。因为这意味着“用户点击并登录，所以让我们重定向” - 这意味着 Header.js 必须记住登录状态。 （它是重新渲染还是用户实际登录？）由于“onsuccess”数据标签，每次渲染都会调用 onSignIn。

由于事件是异步的，当状态已使用 gapi 和 auth2 更新时，我会强制重新渲染。

希望这对某些人有所帮助！

Answer 2

React google 登录组件可用。它对我有用。

react google login