1. 序章

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

この記事では、アプリケーションに戻ってきたユーザーのカスタムログインページを開発する方法を見ていきます。ユーザーには標準の「ようこそ…」メッセージが表示されます。

2. 長寿命のCookieを追加する

ユーザーが当社のWebサイトに戻っているかどうかを識別する1つの方法は、長期間有効なCookieを追加することです(例: 30日)ユーザーが正常にログインしてから。 このロジックを開発するには、 AuthenticationSuccessHandler これにより、認証が成功するとCookieが追加されます。

カスタム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()メソッドの呼び出しです。

それでは、Cookieを追加するためのコードを見てみましょう。

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

キー「ようこそ」と現在のユーザーのfirstNameの値でCookieを設定しました。 Cookieは30日後に期限切れになるように設定されています。

3. ログインフォームでCookieを読む

最後のステップは、ログインフォームが読み込まれるたびにCookieを読み取り、存在する場合は、グリーティングメッセージを表示するための値を取得することです。 これは簡単にできます 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="display_username()">

4. 結論

この簡単な記事では、Springのデフォルトの認証フローを変更することでユーザーエクスペリエンスをカスタマイズすることがいかに簡単であるかを見てきました。 この簡単な設定に基づいて、多くの複雑なことができます。

この例のログインページには、 / customLoginURLからアクセスできます。 この記事の完全なコードは、GitHubにあります。