Question

我正在尝试在我的 react.js 应用上实现一个Google log-in按钮，但到目前为止无法获得令人满意的结果。

我按照以下文档添加了脚本和元数据：

<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content="MY_CLIENT_ID.apps.googleusercontent.com">

我还在组件中添加了这个div：

<div className="g-signin2" data-onsuccess={this.onSignIn}></div>

我应该有登录按钮，但是什么也没有出现。我可以在源代码中看到 div ，但看不到应用程序上的按钮。

<div class="g-signin2" data-onsuccess="function onSignIn(googleUser) {
        var profile = googleUser.getBasicProfile();
        sessionStorage.setItem('authToken', profile.getId());
        sessionStorage.setItem('name', profile.getName());
        sessionStorage.setItem('imageUrl', profile.getImageUrl());
        sessionStorage.setItem('email', profile.getEmail());

        var account = this.props.cursor.refine('account');
        account.refine('authToken').set(sessionStorage.getItem('authToken'));
        account.refine('name').set(sessionStorage.getItem('name'));
        account.refine('imageUrl').set(sessionStorage.getItem('imageUrl'));
        account.refine('email').set(sessionStorage.getItem('email'));
    }"></div>

我认为问题在于脚本是在呈现页面之前执行的，因此它不会将 div 替换为按钮

Answer 1

此答案来自Brad Bumbalough here

尝试在初始化以下组件时添加onSuccess回调 componentDidMount()。

componentDidMount: function() {
  gapi.signin2.render('g-signin2', {
    'scope': 'https://www.googleapis.com/auth/plus.login',
    'width': 200,
    'height': 50,
    'longtitle': true,
    'theme': 'dark',
    'onsuccess': this. onSignIn
  });  
},
...

来源： https://developers.google.com/identity/sign-in/web/build-button， https://github.com/meta-meta/webapp-template/blob/6d3e9c86f5c274656ef799263c84a228bfbe1725/app/Application/signIn.jsx。

实现Google登录到React JS

1 个答案: