让浏览器在登录< form>中保存用户名/密码值？ [英] Let browser save username/password values in a login <form>?

问题描述

我有一个GWT应用程序，需要用户登录表单。我想让浏览器保存用户的用户名和密码。我相信我需要为此使用常规表单（而不是由GWT生成的表单）。所以我做了一个简单的表单：

 < form id =myform> 
< input type =textname =username> 
< input type =passwordname =password> 
< input type =submitvalue =Login/> 
< / form> 
  

现在我想中断提交过程，获取用户名/密码，通过RPC登录，但是如果他们想让浏览器保存这些字段的内容。 GWT开发板上有一些关于它的帖子，不确定哪一个可以工作，因为它们都不适合我。我认为它应该如下所示：

  FormPanel form = FormPanel.wrap（Document.get（）。getElementById（myform）） ，假）; 
 form.setAction（javascript :;）; 
 form.addSubmitHandler（new SubmitHandler（）{
 public void onSubmit（SubmitEvent event）{
 //在这里执行RPC调用吗？
 //应该提示用户保存现在密码？
} 
}）; 
  

有人知道如何让它起作用吗？

myform ）的样子，因为每个浏览器都使用自己的启发式来发现潜在的登录表单用于存储凭据（例如Chrome需要在标记 http：//代码中存在一个操作属性。 google.com/p/chromium/issues/detail?id=29513 ）。所以我们所做的就是Google为我们的应用必须支持的每个浏览器的记忆凭证功能。结果是以下表单元素：

 < form id =login-formstyle =display：noneaction = 登录 > 
< input type =texttabindex =0name =usernameid =login-username> 
< input type =passwordtabindex =0name =passwordid =login-password> 
< input style =position：absolute; left：-9999px; width：1px; height：1px;类型= 提交 > 
< / form> 
  

也可能适合您。

编辑

这里有一个适用于我的示例（仅尝试FF版本14.x）。不要忘记从表单标记中移除 display：none 。

  public class Starter实现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（）{
 $ b $ @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 （）（）; 
}; 
}  -  * /; 
} 
  

I have a GWT app, and need a user login form. I want to let the browser save the username and password for the user. I believe I need to use a 'regular' form for this (not one generated by GWT). So I made a simple form:

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

Now I'd like to interrupt the submission process, grab the username/password, do login via RPC, but have the browser save the contents of those fields for the user, if they want. There are a few posts on the GWT dev boards about it, not sure which one works because none of them are working out of the box for me. I think it should look like:

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?
    }
});

Does anyone know how to get this to work?

解决方案

This depends on how your form (myform) looks because every browser uses its own heuristic to discover a potential login form with credentials to store (Chrome for example needs an action attribute present in the markup http://code.google.com/p/chromium/issues/detail?id=29513). So what we did is to google for remember credentials feature for every browser our app must support. The result was the following form element:

<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>

May work for you as well.

EDIT

Here an example that works for me (only tried FF version 14.x). Don't forget to remove the display:none from the form tag.

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()();
        };
    }-*/;
}

这篇关于让浏览器在登录< form>中保存用户名/密码值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！