CODEWITHSUNDEEP
javascriptauthenticationgoogle-plus
Gabriel Costa Alves
Gabriel Costa Alves

Reputation: 11

Login Google javascript

I´m using google login javascript.

I want import js after click button. The problem: Only show popup login google the second time I click the button

My Code:

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'
            }

Upvotes: 0

Views: 1088

Answers (1)

sravan kumar raju C
sravan kumar raju C

Reputation: 11

Getting Started with Google Sign-In OAuth: A Step-by-Step Guide for Web Developers

  1. Create a Google API Console Project: Go to the Google API Console: Google Cloud Platform Create a new project by clicking on the "Select a project" dropdown at the top of the page and then clicking on "New Project". Give your project a name and click on "Create".
  2. Enable the Google Identity Platform API: From the dashboard, click on “Enable APIs and Services” and search for “Google Identity Platform API”. Click on “Enable” to enable the API for your project.
  3. Create OAuth Credentials: Click on “Credentials” in the left-hand menu. Click on “Create Credentials” and select “OAuth client ID”. Choose “Web application” as the application type and give your client ID a name. Add your authorized JavaScript origins and redirect URIs. These should match the domain and paths of your web application. Click on “Create” to create your OAuth client ID.
  4. Add the Google Sign-In API to your web page: Add the following script tag to the head section of your web page:

<!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>

find out code : GitHub - https://github.com/Sravankumarraju/googleSignin

Upvotes: 1

Related Questions