Позволить браузеру сохранять логин / пароль в логине <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

Это зависит от того, как выглядит ваша форма (myform), потому что каждый браузер использует свою собственную эвристику для обнаружения потенциальной формы входа в систему с учетными данными для хранения (например, Chrome требуется атрибут действия, присутствующий в разметке http://code.google.com/p/chromium/issues/detail?id=29513). Итак, что мы сделали, так это включили функцию google для запоминания учетных данных для каждого браузера, который должно поддерживать наше приложение. В результате появился следующий элемент формы:

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

Может работать и для вас.

EDIT

Вот пример, который работает для меня (только пробовал 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-инкубатора:

автозаполнение и GWT

Некоторые браузеры предлагают возможность хранить комбинации имени пользователя и пароля, чтобы они автоматически заполнялись для пользователя при следующем посещении страницы. Однако обычно это работает, только если есть два поля ввода (одно из паролей типа), и только если эти поля ввода загружаются вместе с главной страницей, а не добавляются позже через javascript (что и делает GWT).

Чтобы заставить эти поля ввода отображаться, поместите их в HTML-код проекта в невидимый элемент div. Затем в GWT вместо создания TextBox и PasswordTextBox, сделать div видимым и считывать значения, используя DOM. библиотека.

см .: http://code.google.com/p/google-web-toolkit-incubator/wiki/LoginSecurityFAQ

Answer 3

:) просто установите тип кнопки входа в систему для «отправки» и поместите свои входы и кнопки на панели форм!