web-dev-qa-db-fra.com

Utilisation du bouton de connexion Google avec React

J'essaie d'utiliser la connexion Google dans une application React. Bien que l'utilisation du bouton de connexion tel qu'il est en dehors de l'application elle-même fonctionne très bien, lorsque vous l'utilisez dans un composant SignIn personnalisé, je ne peux pas le faire fonctionner comme prévu. Lorsque l'utilisateur se connecte, le bouton lui-même doit exécuter un data-onsuccess méthode. Le problème est que l'exécution n'atteint jamais cette méthode même si la connexion fonctionne.

Il me manque probablement une réaction, mais je ne la trouve pas vraiment. De l'aide? Trouvez ci-dessous le code HTML qui charge tout et le composant lui-même.

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

Notez que je n'ai pas collé ici du code non pertinent;)

javascriptreactjsgoogle-signin
34
ThisIsErico

Essayez d'ajouter le rappel onSuccess lorsque vous initialisez le composant dans 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
  });  
},
...

Sources: https://developers.google.com/identity/sign-in/web/build-button , https://github.com/meta-meta/webapp-template /blob/6d3e9c86f5c274656ef799263c84a228bfbe1725/app/Application/signIn.jsx .

29
Brad Bumbalough

J'avais besoin de l'utiliser dans un composant fonctionnel, alors j'ai pensé partager comment je l'ai adapté, j'avais besoin d'utiliser le useEffectHook qui peut être utilisé à la place de 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
    })
  })
1
Max Carroll

Vous pouvez maintenant utiliser ce React Google Login package NPM qui encapsule tout le travail de configuration. Vous pouvez simplement passer des options au composant uniquement.

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

Le code provient de la documentation du package.

1
AV Paul