如何获得 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 都会持续处理身份验证。

登录组件具有 Google 登录按钮，所有受保护的路由（通过布局组件）具有 Google 退出按钮。

我的 Header.js 包含 "Google Sign Out button" (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 进行调整。我使用此代码遇到的问题是 "Uncaught TypeError: Cannot read property 'getAuthInstance' of undefined"。由于我将登录和注销按钮拆分到不同的页面，因此 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 加载（与 link 中的完全一样）。 Authenticate 是我自己的 class，它将我创建的令牌、getUserName 函数等捆绑在一起

我还从 gapi 收到以下错误："Uncaught TypeError: Cannot read property 'style' of null"，我认为它试图引用登录/注销按钮，但由于它们在它们为空时未加载。

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

抱歉这么久 post，非常感谢您抽出宝贵时间，如果您有任何问题，请尽管提问！

Answer 1

除了 gapi 的一些小抱怨外，我让它工作了： "Cannot read property 'style' of null"，这显然与 gapi 没有找到登录按钮或类似的东西有关。我没有检测到功能错误。

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

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

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

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

onSignIn(googleUser) 在每次重新渲染时都会被调用，因为您重新渲染了 Google 登录按钮。由于这是 "the user clicked and signed in so let's redirect" 风格，这意味着 Header.js 必须记住登录状态。（是重新渲染还是用户实际登录？）由于 'onsuccess' 数据标记，每次渲染都会调用 onSignIn。

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

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

Answer 2

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

react google login

如何获得 Google 身份验证以与 ReactJs 一起使用？

How to get Google authentication to work with ReactJs?

authentication

google-authentication

reactjs