web-dev-qa-db-ja.com

GoogleサインインボタンをReactで使用する

反応アプリケーションでグーグルサインインを使用しようとしています。アプリケーション自体の外にあるサインインボタンを使用するとうまく機能しますが、カスタムサインインコンポーネント内で使用すると、期待どおりに機能しません。ユーザーがサインインすると、ボタン自体が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" />
        );
    }
});

ここでは無関係なコードを貼り付けていないことに注意してください;）

javascriptreactjsgoogle-signin
34
ThisIsErico

componentDidMount()でコンポーネントを初期化するときにonSuccessコールバックを追加してみてください。

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 。

29
Brad Bumbalough

機能コンポーネントでこれを使用する必要があったので、どのように適合させたかを共有すると思いました。componentDidMountの代わりに使用できるuseEffectHookを使用する必要がありました。

  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

これを使用できます 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')
);

コードはパッケージのドキュメントからのものです。

1
AV Paul