如何让谷歌认证与ReactJs一起工作？

我一整天都在努力让谷歌认证与React一起工作，但在搜索了几个小时尝试了所有东西后，我发现我只得到了一辆四轮马车，有时还在工作，一团糟。有人能看出我做错了什么吗？（这是一个学校项目，所以我正在学习！）

该项目将是一个在线计划创建者

My main 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);
  }

函数renderApp（）{
ReactDOM.render(
,
应用程序）；
}

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

登录组件有谷歌登录按钮，所有受保护的路由（通过布局组件）都有谷歌注销按钮

My Header.js包含“Google注销按钮”（signOutHandler）：

导出默认类头扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={}；
this.SignOutHandler=this.SignOutHandler.bind（this）；
}
SignOutHandler（）{
var auth2=gapi.auth2.getAuthInstance（）；
auth2.signOut（）.then（函数（）{
log（'User signed out'）；
Authenticate.signOutUser（）；
});
}
render（）{
返回(
日程
);
}
}

我使用了谷歌自己的示例代码，并试图对其进行调整，以便于做出反应。我在这段代码中遇到的问题是“UncaughtTypeError:无法读取未定义的属性'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>
    );
  }
}

导出默认类登录扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={}；
this.onSignIn=this.onSignIn.bind（this）；
this.rendergoogelogenbutton=this.rendergoogelogenbutton.bind（this）；
}
RenderGoogelLoginButton（）{
console.log（'呈现谷歌登录按钮'）
gapi.signn2.render（'my-signn2'{
'范围'：'https://www.googleapis.com/auth/plus.login',
“宽度”：200，
身高:50,，
"龙缇乐":对,，
“主题”：“光”，
“onsuccess”：this.onSignIn
});
load（'auth2'，function（）{
gapi.auth2.init（）；
});
}
componentDidMount（）{
window.addEventListener（'google-loaded'，this.renderGoogleLoginButton）；
}
onSignIn（谷歌用户）{
Authenticate.signUser（googleUser.getBasicProfile（））；
this.props.router.push（“/auth”）；
}
render（）{
返回(
需要使用Google帐户登录
);
}
}

我也基于谷歌自己的代码，但这根本不起作用（要么按钮没有加载，要么根本没有显示，要么它从未调用onSignIn）。我也发现并尝试了，这让它有点工作（有时）。我还尝试在rendergoogeloginbutton（）中初始化auth2，但这只在某些情况下有效

RenderGogleLoginButton（）由自定义事件（google loaded）的偶数处理程序调用，该事件在google API加载时触发（与链接中完全相同）。Authenticate是我自己的类，它将我创建的令牌、getUserName函数等捆绑在一起

我还从gapi得到以下错误：“UncaughtTypeError:无法读取null的属性'style'，我认为它试图引用登录/注销按钮，但因为它们在为null时未加载

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

---

很抱歉发了这么长的帖子，非常感谢您的时间，如果您有任何问题，请提问

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

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

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

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

My Header.js现在具有登录和注销按钮。一个隐藏，另一个根据您是否登录显示

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

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

---

希望这能帮助一些人

React谷歌登录组件可用。这是我的工作

---

你能分享一些片段吗

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>
    );
  }
}