Реализуйте вход в Google в React js

Я пытаюсь реализовать кнопку для входа в Google в моем приложении response.js, но пока не удается добиться хороших результатов.

Я добавил скрипт и мета, следуя следующему документу:

<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 на кнопку.


reactjs javascript google-api google-login
person Adrien Blanquer    schedule 18.07.2018    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Этот ответ был размещен здесь Брэдом Бамбалоу.

Попробуйте добавить обратный вызов 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.

person MaddEye    schedule 18.07.2018
comment
Уже пробовал, но выдает ошибку: ./src/component/Login/Login.js Line 198: 'gapi' is not defined no-undef Search for the keywords to learn more about each error. - person Adrien Blanquer; 18.07.2018
comment
@BLANQUERAdrien, тогда попробуйте window.gapi.signin2.render(..., это должно помочь - person MaddEye; 18.07.2018