让浏览器在登录<form>中保存用户名/密码值？

Question

我有一个GWT应用程序,需要一个用户登录表单.我想让浏览器保存用户的用户名和密码.我认为我需要使用"常规"形式(不是由GWT生成的).所以我做了一个简单的表格:

<form id="myform">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit" value="Login" />
</form>

现在我想中断提交过程,获取用户名/密码,通过RPC登录,但让浏览器为用户保存这些字段的内容,如果需要的话.关于它的GWT开发板上有一些帖子,不确定哪一个有效,因为它们都没有为我开箱即用.我认为应该是这样的:

FormPanel form = FormPanel.wrap(Document.get().getElementById("myform"), false);
form.setAction("javascript:;");
form.addSubmitHandler(new SubmitHandler() {
    public void onSubmit(SubmitEvent event) {
        // Do my RPC call here?
        // User should have been prompted to save password already now?
    }
});

有谁知道如何让这个工作？

Answer 1

这取决于您的form(myform)的外观,因为每个浏览器都使用自己的启发式方法来发现具有要存储凭据的潜在登录表单(例如,Chrome需要在标记中显示操作属性http://code.google.com/p/铬/问题/细节？id = 29513).所以我们所做的就是谷歌为我们的应用程序必须支持的每个浏览器记住凭据功能.结果是以下表单元素:

<form id="login-form" style="display:none" action="login">
    <input type="text" tabindex="0" name="username" id="login-username">
    <input type="password" tabindex="0" name="password" id="login-password">
    <input style="position: absolute; left: -9999px; width: 1px; height: 1px;" type="submit">
</form>

也可能适合你.

编辑

这里有一个适合我的例子(仅尝试过FF版本14.x).不要忘记display:none从表单标记中删除.

public class Starter implements EntryPoint {

    private static final String FORM_ID = "login-form";
    private static final String USER_ID = "login-username";
    private static final String PASSWORD_ID = "login-password";

    @Override
    public void onModuleLoad() {
        injectLoginFunction();
        TextBox fUsername = TextBox.wrap(DOM.getElementById(USER_ID));
        fUsername.setStyleName("gwt-TextBox");
        PasswordTextBox fPassword = PasswordTextBox.wrap(DOM.getElementById(PASSWORD_ID));
        fPassword.setStyleName("gwt-PasswordTextBox");
        FormPanel fLoginForm = FormPanel.wrap(DOM.getElementById(FORM_ID), false);
        fLoginForm.setAction("");
        fLoginForm.addSubmitHandler(new SubmitHandler() {

            @Override
            public void onSubmit(SubmitEvent event) {
                Window.alert("test");
            }
        });
        fLoginForm.getElement().setAttribute("onsubmit", "login();return false;");
    }

    private static void doLogin() {
        Window.alert("test");
    }

    private static native void injectLoginFunction() /*-{
        $wnd.login = function() {
            @test.client.Starter::doLogin()();
        };
    }-*/;
}

Answer 2

在搜索同样的内容时,我在google-web-toolkit-incubator的wiki中偶然发现了这一段:

自动完成和GWT

某些浏览器提供存储用户名/密码组合的选项,以便在用户下次访问页面时自动填写这些组合.但是,通常只有在有两个输入框(密码类型之一)的情况下才会起作用,并且只有当这些输入框与主页一起加载时才会起作用,而以后不会通过javascript添加(这是GWT所做的).

为了强制显示这些输入框,将它们填入项目的HTML中的隐形div中.然后,在GWT中,不是创建TextBox和PasswordTextBox,而是使div可见并使用DOM读出值.图书馆.

请参阅:http://code.google.com/p/google-web-toolkit-incubator/wiki/LoginSecurityFAQ