Login with google button in Internet Explorer 11 / Edge

Question

I set up the "login with google" button with server side authentication. Everything works in Chrome, FIrefox, Safari. In IE 11 / Edge the Google login window opens, the login is correct, but when the popup closes nothing happens. The call back function is never called. Nothing in console. I think it is the same problem of Google Sign-in in Internet Explorer / Edge In my case, just as in that other thread, the code is the same of the google examples.

<script type="text/javascript">


    function signInCallback(authResult){

        if (authResult['code']) {
            $('#login_social').html("");
            setLoading($('#login_social'),'relative');
            $.ajax({
                url:'gp_ajax_server_login?state=d77e966cf2e830268a4223543a853dd9',
                type: 'POST',
                contentType: 'application/octet-stream; charset=utf-8',
                success: function(response){
                    if(response == "OK"){
                            displayLoggedUser();
                    }else if(response == "CL"){
                            window.location.href = "/snkt/";
                    }
                },
                data: authResult['code'],
                processData: false
            });

        }else{
            console.log("GOOGLE SIGN-IN ERROR");
        }
    }

    function startAndRender(){
        gapi.load('auth2', function() {
            auth2 = gapi.auth2.init(
                {client_id:'XXXXXXXXX.apps.googleusercontent.com'}
            );
        });
    }

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

<center>
<button id="signinButton"  class="g-signin-btn"></button>
<script>
    $('#signinButton').click(function(){
        auth2.grantOfflineAccess({'redirect_uri':'postmessage'}).then(signInCallback);
    });
</script>
</center>

Possible duplicate of [Google Sign In for Web Apps not working with Internet Explorer](http://stackoverflow.com/questions/31494204/google-sign-in-for-web-apps-not-working-with-internet-explorer) — bummi, Jan 06 '16 at 16:47

score 2 · Answer 1 · answered Oct 29 '15 at 21:06

Unfortunately there is not a known resolution for this yet. After a little searching I found many posts with the same exact issue. It looks like some developers have tried opening a case with Google to see if they can resolve the issue.

Basic Google Sign-In for Websites code not working in Internet Explorer 11

I personally tried a couple different variations including publishing the site to a live URL (not local host) and referencing platform.js locally. Nothing worked. I had the same exact issue as you are describing.

I would recommend trying to open a trouble ticket with Google as well as with Microsoft and hopefully a resolution comes from it!

score 0 · Answer 2 · edited Jun 13 '16 at 08:44

I found a workaround: the Google Plus api seem to be still working in IE. I detect the browser, and with IE I use the Plus API, with the other browsers the Google API. At least until the problem is solved. I hope this can help somebody.

<?php
//***************** IE
if (preg_match('~MSIE|Internet Explorer~i', $_SERVER['HTTP_USER_AGENT']) || (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false)|| (strpos($_SERVER['HTTP_USER_AGENT'], 'Edge/12') !== false)){
?>
<script type="text/javascript">

    (function () {
      var po = document.createElement('script');
      po.type = 'text/javascript';
      po.async = true;
      po.src = 'https://plus.google.com/js/client:plusone.js?onload=start';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(po, s);
    })();

    function signInCallback(authResult) {
        if (authResult['code']) {

            $('#login_social').html("");
            setLoading($('#login_social'),'relative');
            $.ajax({
                url:'gp_ajax_server_login?state=<?php echo $state?>',
                type: 'POST',
                contentType: 'application/octet-stream; charset=utf-8',
                success: function(response){
                    if(response == "OK"){
                        displayLoggedUser();
                    }else if(response == "CL"){
                        window.location.href = "/snkt/";
                    }
                },
                data: authResult['code'],
                processData: false
            });

        } else if(authResult['error']) {
            console.log("GOOGLE SIGN-IN ERROR: "+authResult['error']);
        }
        }

</script>

    <div id="signinButton">
      <span class="g-signin"
        data-scope="https://www.googleapis.com/auth/plus.login email"
        data-clientid="XXXXXXXXXXXXX.apps.googleusercontent.com"
        data-redirecturi="postmessage"
        data-accesstype="offline"
        data-cookiepolicy="single_host_origin"
        data-callback="signInCallback"
        data-width="wide"
        data-height="tall"
        data-approvalprompt="auto">
      </span>
    </div>
<div id="result"></div>


<?php
// ********** OTHER BROWSERS
} else {
?>
<script type="text/javascript">


    function signInCallback(authResult) {

    if (authResult['code']) {
        $('#login_social').html("");
        setLoading($('#login_social'),'relative');
        $.ajax({
            url:'gp_ajax_server_login?state=d77e966cf2e830268a4223543a853dd9',
            type: 'POST',
            contentType: 'application/octet-stream; charset=utf-8',
            success: function(response){
                if(response == "OK"){
                        displayLoggedUser();
                }else if(response == "CL"){
                        window.location.href = "/snkt/";
                }
            },
            data: authResult['code'],
            processData: false
        });

        }else{
        console.log("GOOGLE SIGN-IN ERROR");
        }
    }

    function startAndRender() {
    gapi.load('auth2', function() {
        auth2 = gapi.auth2.init(
            {client_id:'XXXXXXXXX.apps.googleusercontent.com'}
        );
    });
    }

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

<center>
<button id="signinButton"  class="g-signin-btn"></button>
<script>
    $('#signinButton').click(function() {
       auth2.grantOfflineAccess({'redirect_uri':'postmessage'}).then(signInCallback);
});
</script>
</center>
<?php
}
?>

Login with google button in Internet Explorer 11 / Edge

2 Answers2