Question

我正在尝试使用React集成Google登录（link）我在过去的Using google sign in button with react 2

中找到了一个解决了这个问题的问题

我复制了与上述相同的步骤。在我的<div id="worked"></div> <h1 style="text-align: center;"><span style="color: #ff0000;"><strong>Offer Ends In:</strong></span></h1> <h1 id="time" style="text-align: center;"> </h1>我做

index.html

然后我的<script src="https://apis.google.com/js/platform.js?onload=triggerGoogleLoaded" async defer></script> <script type="text/javascript"> function triggerGoogleLoaded() { console.log("google event loaded"); window.dispatchEvent(new Event('google-loaded')); } </script>看起来像

Component

当我使用var LoginButton = React.createClass({ onSignIn: function(googleUser) { console.log("user signed in"); // plus any other logic here }, renderGoogleLoginButton: function() { console.log('rendering google signin button'); gapi.signin2.render('my-signin2', { 'scope': 'https://www.googleapis.com/auth/plus.login', 'width': 200, 'height': 50, 'longtitle': true, 'theme': 'light', 'onsuccess': this.onSignIn }) }, componentDidMount: function() { window.addEventListener('google-loaded',this.renderGoogleLoginButton); }, render: function() { let displayText = "Sign in with Google"; return ( <div class="g-signin2" data-onsuccess="onSignIn"></div> ); } }); export default LoginButton;运行程序时，我得到了

yarn start

完整的源代码位于https://github.com/hhimanshu/google-login-with-react

有人可以帮我理解我的错误吗？

由于

Answer 1

我认为您喜欢将Google API作为脚本标记加载，我们希望将window.gapi设置为google api。但是，您正在运行eslint或其他一些检查程序，并且不知道window.gapi应该存在。它失败了，因为它看到你使用未声明的变量。

一个便宜的解决方法是告诉Eslint你知道自己在做什么;

/* global gapi */

将它放在文件的顶部，并且eslint会将gapi视为已知的全局变量。

Answer 2

这对我有用。把它放在componentDidMount或构造函数中：

componentDidMount() {
    window.gapi.load('auth2', () => {
        // Retrieve the singleton for the GoogleAuth library and set up the client.
        this.auth2 = window.gapi.auth2.init({
            client_id: '436676563344-.apps.googleusercontent.com',
            cookiepolicy: 'single_host_origin',
        });

        this.auth2.attachClickHandler(this.refs.googleButton, {},
            (googleUser) => {
                this.googleLogin(googleUser.getBasicProfile());
            }, (error) => {

            });
    });
}

Answer 3

您也可以尝试使用软件包gapi-script，该软件包可立即提供apgi，因此您无需等待任何脚本加载，只需导入并使用：

import { gapi } from 'gapi-script';

Answer 4

确保您没有使用异步延迟，这会导致window.gapi.someMethod（）与脚本加载之间的竞争状况

简而言之，请从index.html中的脚本标记中删除异步延迟。

之前

<script src="https://apis.google.com/js/platform.js?onload=triggerGoogleLoaded" async defer></script>

之后

<script src="https://apis.google.com/js/platform.js?onload=triggerGoogleLoaded"></script>

Answer 5

我遇到了类似的问题。

我对SEO使用“反应捕捉”。它阻止了我使用“ gapi”。我找到了navigator.userAgent'ReactSnap'。

if (navigator.userAgent !== 'ReactSnap') {
    // some code to dynamically load a script
    let myScript = document.createElement('script')
    myScript.setAttribute('src', 'https://apis.google.com/js/platform.js')
    document.body.appendChild(myScript)
}

我解决了一个问题。效果很好。

加载React Component时未定义gapi

5 个答案: