Google login with JQuery trigger('click') script causes popup "error : popup_blocked_by_browser"

JavaScript
1

Have google login script which I want to be able to do 2 things:

  1. Capture user profile by clicking on the custom login button
  2. Capture user profile when page loads by using a JQuery trigger(‘click’) on the login button id

1 works fine. 2 - when I include the “Auto login testing script” at the bottom of the code and run the page, I get a popup which says, “error : popup_blocked_by_browser”. How can I eliminate this popup block and have the page auto-login when this script is encountered?

Another question - is there a risk to exposing the client id in the script?

The code below:

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous" type="text/javascript" charset="utf-8"></script>
    <script src="https://apis.google.com/js/api:client.js"></script>    
</head>
<body style="padding-top:56px;">
    <br>
        <div class="container" style="max-width:500px;">
            <div class="text-center" id="google_login_group">
                <button type="button" class="btn btn-danger btn-lg btn-block" id="google_login">Login with Google</button>  
                <div id="google_profile" style="text-align:center"></div>  
            </div>
        </div>
<script>
$(document).ready(function(){    
        var googleUser = {};
        //start the google login app
        gapi.load('auth2', function(){
          // Retrieve the singleton for the GoogleAuth library and set up the client.
          auth2 = gapi.auth2.init({
            client_id: '557066359870-hsiss2rth77tkerie61nc4mr7dbl4k04.apps.googleusercontent.com',          
            cookiepolicy: 'single_host_origin',
          });
          //clicking login button attachment to signin function
          auth2.attachClickHandler('google_login', {},
              function(googleUser) {
                var profile = googleUser.getBasicProfile();
                var social_id = profile.getId();
                var social_name = profile.getName();
                var social_email = profile.getEmail();
                var social_image = profile.getImageUrl();
                var social_type = 'google';
                var profile = `<div style="margin-bottom:10px;"></div>
                    <h3>Your Google Profile</h3>
                    <h4>${social_name}</h4>
                    <p style="margin-bottom:0px;"><strong>ID&nbsp;&nbsp;</strong>${social_id}<span id="google_id_status"></span></p>
                    <p style="margin-bottom:0px;"><strong>Email&nbsp;&nbsp;</strong>${social_email}<span id="google_email_status"></span></p>
                    <p style="margin-bottom:0px;"><strong>Image </strong><img src="${social_image}" class="avatar_medium"></p>`;
                $("#google_profile").append(profile);
                $("#google_login").hide();
            }, function(error) {
              alert(JSON.stringify(error, undefined, 2));
            });          
        });

    //********************* AUTO LOGIN testing script **************************
    //**************************************************************************
    setTimeout(
        function() 
        {
                console.log('trigger google_login');
                $('#google_login').trigger('click');

        }, 1000
    );
});
</script>
</body>
</html>
2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.