如何将Google Identity Toolkit与单个网页应用（例如GWT）集成 [英] How to integrate Google Identity Toolkit with a single webpage app (e.g. GWT)

问题描述

我需要将Google的identitytoolkit（ Google的身份工具包）与我的Google webtoolkit（GWT）相集成，应用。

然而，渲染gitkit signInButton或小部件已经不是直截了当的，因为执行它的方式与window.onload链接。我需要在稍后呈现该小部件。

我设法做到了这一点（见下文），但我对此并不满意，我想知道是否有其他人找到了更好的整合方式。

  private native void showGitKitWidget（）/ *  -  {
 $ wnd.google.identitytoolkit.signInButton（
'#gitkitDivId'，//接受任何CSS选择器
 {
 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）; 
}  -  * /; 
  

更新
实际上使用signInButton的popupMode参数无缝整合更接近。这可让该窗口小部件在浏览器窗口中弹出并保持GWT窗口不变。然后在小部件中，而不是重定向到successUrl，我使用JS回调触发AJAX调用。

  var config = { 
 idps：[googleplus]，
 signInSuccessUrl：'//127.0.0.1:8888/gwt/servlet/gitkit/signedin'，
回调：{
 signInSuccess：function （tokenString，accountInfo，
 opt_signInSuccessUrl）{
 / * !!!告诉GWT父窗口，我们准备好了... 
我相信使用父母是
的cookie经常看是一条路，因为
也可以在移动浏览器中使用。 
 * / 
 
 return false; //防止重定向到signInSuccessUrl 
 
 
 $ c 
 
 $ b 
 更新最后，GWT父窗口将等待结果cookie，并且如果找到，请对signInSuccessUrl执行AJAX调用。它也将不得不再次呈现signInButton，然后将显示签名用户。
 
 
 
所以唯一难看的解决方法是如何使用onload方法调用呈现signInButton 。
 
 
如果在需要时动态呈现signInButton方法会非常有帮助，例如，如果存在$ wnd.google.identitytoolkit.update （） 方法。这可以在任何时候第一次被调用，并且应该能够处理登录状态改变！  
 
总而言之，我回答了我自己的问题，这可能对其他人有帮助，但我仍然想问问是否会有更好的方法，错过了。 
 
解决方案
正如您所指出的，Identity Toolkit小部件目前需要通过页面加载来触发。单页面应用程序（如使用GWT构建的应用程序）应该将该小部件放置在单独的页面上。然后，您可以在那里重定向用户 - 或通过弹出窗口呈现，如您所注意到的 - 登录用户。
 
 
 
如果呈现登录按钮是问题，有关如何直接加载小部件的文档。  
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.
解决方案
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.

                        
这篇关于如何将Google Identity Toolkit与单个网页应用（例如GWT）集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！