戻るユーザー用のカスタムログインページ

1前書き

この記事は、現在進行中の Spring Securityシリーズへの登録 の続きです。

  • この記事では、私たちのアプリケーションに戻ってきたユーザーのためにカスタムログインページを作成する方法を見ていきます** ユーザーは標準の "Welcome …​"メッセージで迎えられます。

2長寿命のクッキーを追加する

  • ユーザーが当社のWebサイトに戻ってきたかどうかを確認する1つの方法は、ユーザーが正常にログインした後に長寿命のクッキーを追加することです。認証が成功すると

カスタム MyCustomLoginAuthenticationSuccessHandler を作成し、 onAuthenticationSuccess() メソッドを実装しましょう。

@Override
public void onAuthenticationSuccess(final HttpServletRequest request,
  final HttpServletResponse response, final Authentication authentication)
  throws IOException {
    addWelcomeCookie(gerUserName(authentication), response);
    redirectStrategy.sendRedirect(request, response,
    "/homepage.html?user=" + authentication.getName());
}

ここでの焦点は addWelcomeCookie() メソッドの呼び出しです。

それでは、クッキーを追加するコードを見てみましょう。

private String gerUserName(Authentication authentication) {
    return ((User) authentication.getPrincipal()).getFirstName();
}

private void addWelcomeCookie(String user, HttpServletResponse response) {
    Cookie welcomeCookie = getWelcomeCookie(user);
    response.addCookie(welcomeCookie);
}

private Cookie getWelcomeCookie(String user) {
    Cookie welcomeCookie = new Cookie("welcome", user);
    welcomeCookie.setMaxAge(60 **  60 **  24 **  30);
    return welcomeCookie;
}

私たちはキー "welcome" と現在のユーザーの firstName である値でクッキーを設定しました。 Cookieは30日後に期限切れになるように設定されています。

3ログインフォームでクッキーを読む

最後のステップはログインフォームがロードされたときはいつでもクッキーを読み、もしあれば、あいさつメッセージを表示するための値を取得することです。これは Javascript. を使って簡単に行えます。

まず、ログインページにメッセージを表示するためのプレースホルダー "welcometext" を追加しましょう。

<form name='f' action="login" method='POST' onsubmit="return validate();">
    <span id="welcometext"> </span>

    <br/><br/>
    <label class="col-sm-4" th:text="#{label.form.loginEmail}">Email</label>
    <span class="col-sm-8">
      <input class="form-control" type='text' name='username' value=''/>
    </span>
    ...
</form>

それでは、対応する Javascript を見てみましょう。

function getCookie(name) {
    return document.cookie.split('; ').reduce((r, v) => {
        const parts = v.split('=')
        return parts[0]=== name ? decodeURIComponent(parts[1]) : r
    }, '')
}

function display__username() {
    var username = getCookie('welcome');
    if (username) {
        document.getElementById("welcometext").innerHTML = "Welcome " + username + "!";
    }
}

最初の関数は、ユーザーがログインしている間に設定されたCookieを単に読み取るだけです。2番目の関数は、HTML文書を操作してCookieが存在する場合はウェルカムメッセージを設定します。

関数 display username() は、 HTML <body> タグの onload__イベントで呼び出されます。

<body onload="display__username()">

4結論

このクイック記事では、Springのデフォルトの認証フローを変更することによってユーザーエクスペリエンスをカスタマイズすることがいかに簡単かを説明しました。

この単純な設定に基づいて、多くの複雑なことを実行できます。

この例のログインページは /customLogin URLからアクセスできます。

この記事の完全なコードはhttps://github.com/eugenp/spring-security-registration[over on GitHub]にあります。

前の投稿:CSVファイルを配列に読み込む
次の投稿:JavaでのVRaptorの紹介