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

Question

I am attempting to use Google Sign-In for Websites (https://developers.google.com/identity/sign-in/web/) and noticed that my solution is not working in Internet Explorer 11.

Answer 1

Be sure that you don't have IE 11 configured to block all third party cookies.

Third party cookies are required, and the user experience that occurs when third party cookies are blocked--as you've discovered--leaves much to be desired. There is no warning or error message presented to the user.

You could try to catch the error before it happens. It is possible to detect whether or not third party cookies are blocked by trying to set a cookie on a second domain (that you control) and then making a second request to ensure the cookie is set. You'll need a script or something on your server that can set and check for the cookie (it can't be done using only JavaScript because of the browser security model).

Answer 2

I've had success doing the following: Loading the script to initiate the Google button rendering etc. from $document.ready. (i.e.Whatever you have in the apis.google.com/js/client:platform.js?onload= x )

e.g.

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

Move startApp() to here:

$(document).ready(function () {
    startApp();

Where startApp() looks something like this:

function startApp() {
    gapi.load('auth2', function () {
        gapi.client.load('plus', 'v1').then(function () {
            gapi.signin2.render('signin-button', {
                scope: 'https://www.googleapis.com/auth/plus.login',
                fetch_basic_profile: false
            });
            gapi.auth2.init({
                fetch_basic_profile: false,
                scope: 'https://www.googleapis.com/auth/plus.login'
            }).then(
                function () {
                    console.log('init');
                    auth2 = gapi.auth2.getAuthInstance();
                    auth2.isSignedIn.listen(updateSignIn);
                    auth2.then(updateSignIn());
                });
        });
    });
}

Answer 3

I ran into the same problem now, a few months later.

If you look at:

https://developers.google.com/identity/sign-in/web/build-button

and try a signin with their demo button, it does not work with IE11 (but it works with other browsers I am using at different OS). I could not find any solution.

I am leaving the comment for a future reader, who searches for the same problem in the future. If the demo button at Google does not work, she can at least rest assured that the problem is probably not in her code. :)

Answer 4

I struggled to get the example to work on localhost, but as soon as I deployed it to the real URL, it worked.