How to integrate Google Identity Toolkit with a si

Question

I need to integrate Google's identitytoolkit (Google's identitytoolkit) with my Google webtoolkit (GWT) application.

However rendering the gitkit signInButton or widget is already not straightforward because the way to do it is linked to "window.onload". And I need to render the widget at a later moment.

I managed to do it (see below), but I am not happy with this and I wonder if someone else found a better way of integration.

 private native void showGitKitWidget() /*-{
        $wnd.google.identitytoolkit.signInButton(
            '#gitkitDivId', // accepts any CSS selector
            {
             widgetUrl: "//127.0.0.1:8888/gitkit/signin.html",
             signOutUrl: "/gitkit/signout",
             popupMode: true                    
            }
        );

        var evt = $doc.createEvent('Event');
        evt.initEvent('load', false, false);
        $wnd.dispatchEvent(evt);
    }-*/;

Update Actually using the popupMode parameter for the signInButton makes a seamless integration even closer. This lets the widget popup in a browser window and leaving the GWT window unchanged. Then in the widget instead of redirecting to the successUrl I use the JS callback to trigger an AJAX call instead.

var config = {
            idps: ["googleplus"],
            signInSuccessUrl: '//127.0.0.1:8888/gwt/servlet/gitkit/signedin',          
            callbacks: {
            signInSuccess: function(tokenString, accountInfo,
              opt_signInSuccessUrl) {
                /* !!! Tell GWT parent window that we are ready...
                 I believe using a cookie for which the parent is
                 regularly looking is the way to go, because it
                 will work in mobile browsers too.
                */ 

                return false; // prevents redirect to signInSuccessUrl
              }
           }

Update Finally the GWT parent window will wait for the result cookie and if found make the AJAX call to the signInSuccessUrl. It will also have to render the signInButton again, which will then show the signed in user.

So the only ugly workaround is how the signInButton is rendered using the onload method call.

It would be very helpful if there would be a way to render the signInButton dynamically when needed, for instance if there were a "$wnd.google.identitytoolkit.update()" method. This could be called any time for the first time and should also be able to handle signin-status change!

In conclusion, I have answered my own question, which might be helpful to others, but also I would still like to ask if there would be a better way, which I missed.

Answer 1

As you've noted, the Identity Toolkit widget currently needs to be triggered by page load. Single-page applications (like those built with GWT) should place the widget on a separate page. Then you can redirect the user there - or render via popup, as you've noted - to sign in the user in.

If rendering the sign-in button is a problem, there is documentation on how to load the widget directly.