Использование кнопки входа в Google с реагированием

Я пытаюсь использовать знак google в реагирующем приложении. При использовании кнопки входа в систему, которая находится вне самого приложения, отлично работает, когда вы используете его в составе настраиваемого компонента SignIn, я не могу заставить его работать должным образом. Когда пользователь заходит, сама кнопка должна выполнить метод data-onsuccess. Проблема в том, что выполнение никогда не достигает этого метода, даже если знак работает.

Вероятно, мне не хватает некоторых ответов, но я не могу найти его. Любая помощь? Найдите ниже html, который загружает все и сам компонент.

<head>
    <meta name="google-signin-scope" content="profile email">
    <meta name="google-signin-client_id" content="1234-real-client-id.apps.googleusercontent.com">
    <script src="https://apis.google.com/js/platform.js" async defer></script>
</head>
<body>
    <!-- Here is where everything gets displayed -->
    <div id="app"></div>

    <!-- The file with the js code -->
    <script src="/js/main.js"></script>
</body>


var SignIn = React.createClass({
    onSignIn : function (google_user) {
        // I want this method to be executed
    },

    render : function() {
        return (
            <div className="g-signin2" data-onsuccess={this.onSignIn} data-theme="dark" />
        );
    }
});

Обратите внимание, что я не вставлял сюда нерелевантный код;)

Ответы

Ответ 1

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

Ответ 2

Мне нужно было использовать это в функциональном компоненте, поэтому я решил поделиться тем, как я его адаптировал, мне нужно было использовать useEffectHook, который можно использовать вместо componentDidMount

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

Ответ 3

Теперь вы можете использовать этот пакет React Google Login NPM, который включает в себя всю работу по настройке. Вы можете просто передать параметры только компоненту.

import React from 'react';
import ReactDOM from 'react-dom';
import GoogleLogin from 'react-google-login';
// or
import { GoogleLogin } from 'react-google-login';
 
 
const responseGoogle = (response) => {
  console.log(response);
}
 
ReactDOM.render(
  <GoogleLogin
    clientId="658977310896-knrl3gka66fldh83dao2rhgbblmd4un9.apps.googleusercontent.com"
    buttonText="Login"
    onSuccess={responseGoogle}
    onFailure={responseGoogle}
    cookiePolicy={'single_host_origin'}
  />,
  document.getElementById('googleButton')
);

Ответ 4

Я не могу прокомментировать такую публикацию как ответ...

Я реализую то же самое и вижу ту же проблему. Я также добавил ссылку для выхода:

<a href="#" onClick={this.signOut}>Sign out</a>

signOut: function() {
  console.log("user signing out")
  var auth2 = gapi.auth2.getAuthInstance();
  auth2.signOut().then(function () {
    console.log('User signed out.');
  });
},

Функция выписки работает, но реализация Brad Решение:

Uncaught ReferenceError: gapi is not defined

предполагая, что в этот момент google lib еще не загружен. Возможно ли это, или я что-то упускаю из-за сферы охвата gapi?

--- EDIT: теперь задан автономный вопрос: Использование кнопки входа в Google с ответом 2