loginForm

Компонент loginForm получает учётные данные и дополнительные параметры аутентификации.

XML-элемент

loginForm

Java-класс

JmixLoginForm

Обзор

Форма входа

Основы

Базовая форма loginForm содержит поля имени пользователя и пароля, а также кнопку входа. Кроме того, она может отображать выбор локали, флажок Запомнить меня и кнопку Забыли пароль?.

Надписи и сообщения

Во вложенном элементе form задаются заголовок формы, подписи полей и текст кнопки. Значения можно указать напрямую или получить по ключам из message-bundle. В примере также задаются содержимое errorMessage для ошибки аутентификации и additionalInformation под формой:

<loginForm>
    <form title="Welcome"
          username="Username or email"
          password="Password"
          rememberMe="Remember me"
          submit="Log in"
          forgotPassword="Forgot password"/>
    <errorMessage title="Login failed"
                  message="Check that you have entered the correct username and password and try again"/>
    <additionalInformation message="Additional information"/>
</loginForm>

Необязательные элементы

Атрибуты видимости позволяют показать или скрыть выбор локали, флажок Запомнить меня и кнопку Забыли пароль?, не изменяя содержимое вложенного элемента form:

<loginForm localesVisible="true"
           rememberMeVisible="true"
           forgotPasswordButtonVisible="true">
    //...
</loginForm>

Запоминание пользователя

Параметр Запомнить меня сохраняет в браузере постоянный токен, поэтому аутентифицированный сеанс может продолжаться после завершения HTTP-сеанса и перезапуска приложения. При аутентификации получайте состояние флажка из LoginEvent. Если интерфейс должен сразу реагировать на изменение флажка, используйте RememberMeChangedEvent.

Подробное описание механизма аутентификации см. в документации Spring Security по функции Remember Me.

Аутентификация

Стандартный экран входа подписывается на LoginEvent, применяет выбранную локаль и передаёт введённые учётные данные и состояние Запомнить меня в AuthenticationManager. Ошибки аутентификации отображаются через состояние ошибки формы:

@ViewComponent
private JmixLoginForm login; (1)

@Subscribe("login")
public void onLogin(final LoginEvent event) {
    try {
        loginViewSupport.authenticate(
                AuthDetails.of(event.getUsername(), event.getPassword())
                        .withLocale(login.getSelectedLocale()) (2)
                        .withRememberMe(login.isRememberMe()) (3)
        );
    } catch (final BadCredentialsException | DisabledException | LockedException | AccessDeniedException e) {
        log.info("Login failed", e);
        event.getSource().setError(true);
    }
}
1 Инжектирует форму, чтобы контроллер мог обновлять её состояние.
2 Применяет локаль, выбранную в форме.
3 Передаёт состояние флажка в токен аутентификации.

Обработка исключений

Расширьте обработчик входа, если пользователю нужно сообщить конкретную причину ошибки аутентификации. В примере определяется заблокированная учётная запись, выводится соответствующее сообщение и регистрируется неудачная попытка входа:

@Subscribe("login")
public void onLogin(final AbstractLogin.LoginEvent event) {
    try {
        loginViewSupport.authenticate(
                AuthDetails.of(event.getUsername(), event.getPassword())
                        .withLocale(login.getSelectedLocale())
                        .withRememberMe(login.isRememberMe())
        );
    }
    catch (final BadCredentialsException | DisabledException | LockedException | AccessDeniedException e) {
        if (e instanceof LockedException) {
            JmixLoginI18n loginI18n = createLoginI18n();
            loginI18n.getErrorMessage().setMessage(e.getMessage()); (1)
            login.setI18n(loginI18n);
        } else {
            login.setI18n(createLoginI18n());
        }

        log.warn("Login failed for user '{}': {}", event.getUsername(), e.toString()); (2)
        event.getSource().setError(true);
    }
}
1 Выбирает сообщение об ошибке для LockedException.
2 Записывает неудачную попытку входа в журнал.

Стилизация экрана входа в систему

ДЕМО

В примере дескриптор формы используется вместе с CSS, ограниченным областью компонента. XML задаёт содержимое формы входа, а CSS — окружающий макет, фоновое изображение и положение формы:

XML
<div classNames="custom-login">
    <loginForm id="login"
               rememberMeVisible="false"
               forgotPasswordButtonVisible="false"
               localesVisible="false">
        <form title="Custom Login Sample"
              username="Username"
              password="Password"
              rememberMe="Remember me"
              submit="Log in"
              forgotPassword="Forgot password"/>
    </loginForm>
</div>
CSS
.custom-login {
    width: 100%;
    background-image: url("background.png");
    background-position: center;
    background-size: cover;
    display: flex;
    height: 25em;
}

.custom-login jmix-login-form {
    align-items: center;
    display: flex;
    max-width: 25em;
    background-color: var(--lumo-base-color);
}

.custom-login vaadin-login-form-wrapper {
    background-image: none;
}

Атрибуты

loginForm имеет следующие уникальные атрибуты:

Имя Описание По умолчанию

forgotPasswordButtonVisible

Отображает кнопку Забыли пароль?.

false

localesVisible

Отображает выбор локали.

false

rememberMeVisible

Отображает флажок Запомнить меня.

false

loginForm имеет следующие общие атрибуты:

id - enabled - visible - alignSelf - colspan - classNames - css

Обработчики

loginForm имеет следующие уникальные обработчики:

Имя Описание

ForgotPasswordEvent

Запускается, когда пользователь нажимает Забыли пароль.

LocaleChangedEvent

Запускается, когда пользователь выбирает другую локаль.

LoginEvent

Запускается, когда пользователь отправляет введённые учетные данные.

RememberMeChangedEvent

Вызывается при изменении состояния флажка Запомнить меня.

localeItemLabelGenerator

Предоставляет метку, отображаемую для каждого языкового стандарта в селекторе.

loginForm имеет следующие общие обработчики:

AttachEvent - DetachEvent

Элементы

loginForm может содержать элементы form, errorMessage и additionalInformation. Элемент form задаёт подписи и текст кнопки, errorMessage — содержимое при ошибке аутентификации, а additionalInformation — дополнительное содержимое под формой.

Смотрите также