Login Google javascript



我使用Google登录JavaScript。

单击按钮后我想导入JS。问题:仅在第二次单击按钮

时仅显示弹出登录谷物

我的代码:

function clickButton(){
   $.getScript( "https://apis.google.com/js/client:plusone.js?onload=onLoadGoogleLogin");
}

 function onLoadGoogleLogin()
            {
                  var initializedGoogleCallback = false;
    gapi.client.setApiKey('AIzaSyBhV6vP_D_I7ldL1YIU7LJUGtSxJ55ievw');
    var myParams = {
        'callback': function googleLoginCallback(result) {
            debugger;
            if (!initializedGoogleCallback) {
                if (result) {
                    if (result['error'] == undefined) {
                        initializedGoogleCallback = true;
                        gapi.auth.setToken(result);
                        gapi.client.load('oauth2', 'v2', function () {
                            var request = gapi.client.oauth2.userinfo.get();
                            request.execute(googleLoginDataUserCallback);
                        });
                    }
                } else {
                    alert('Empty authResult');
                }
            }
        },
        'clientid': 'xxxxx-4kragpsm6jolann6d9t74crpkthch0iq.apps.googleusercontent.com',
        'cookiepolicy': 'single_host_origin',
        'requestvisibleactions': 'http://schemas.google.com/AddActivity',
        'scope': 'https://www.googleapis.com/auth/plus.login'
            }

开始使用Google登录OAuth:Web开发人员的逐步指南

  1. 创建一个Google API控制台项目:转到Google API控制台:Google Cloud平台通过单击"选择一个项目"来创建一个新项目。下拉列表页面,然后单击"新项目"。给您的项目一个名字,然后单击"创建"。
  2. 启用Google身份平台API:从仪表板中,单击"启用API和服务",然后搜索" Google身份平台API"。单击"启用"以启用您的项目的API。
  3. 创建OAuth凭据:单击左侧菜单中的"凭据"。单击"创建凭据",然后选择" OAUTH客户端ID"。选择" Web应用程序"作为应用程序类型,并为您的客户ID提供一个名称。添加您的授权JavaScript起源并重定向URI。这些应该与Web应用程序的域和路径。单击"创建"以创建您的OAuth客户端ID。
  4. 将Google登录API添加到您的网页:将以下脚本标签添加到网页的头部:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset='utf-8'> 
    <meta http-equiv='X-UA-Compatible' content='IE=edge'> 
    <title>Google Sign in</title> 
    <meta name='viewport' content='width=device-width, initial-scale=1'> 
    <script src="https://accounts.google.com/gsi/client" async defer></script> 
    <script> 
        function onSignIn(googleUser) { 
            const responsePayload = decodeJwtResponse(googleUser.credential); 
            let google_email = responsePayload.email 
            console.log("google_email - ",google_email) 
        } 
        function decodeJwtResponse(data) { 
            let tokens = data.split("."); 
            return JSON.parse(atob(tokens[1])) 
        } 
    </script> 
</head> 
<body> 
    <div class="login"> 
        <div id="g_id_onload" data-client_id="enter-your-client-id" 
            data-context="signin" data-ux_mode="popup" data-login_uri="" data-callback="onSignIn" 
            data-itp_support="true"> 
        </div> 
        <div class="g_id_signin" data-type="standard" data-shape="rectangular" data-theme="outline" data-text="signin" 
            data-size="large" data-logo_alignment="left"> 
        </div> 
    </div> 
    </div> 
</body> 
</html> 

查找代码:github -https://github.com/sravankumarraju/googlesignin

相关内容

最新更新