フォーム認証でログイン画面をカスタマイズする：JavaTips ～JSP／サーブレット編

» 2003年10月28日 10時00分公開

　「アクセス制限をweb.xmlの記述だけで実現する」でも紹介したように、コンテナの標準機能を利用することで、設定ファイルへの記述だけで認証機能を実現することが可能になります。

　しかし、認証ダイアログが表示されるだけの認証機能では、いささか物足りないとは思いませんか？アプリケーションによってはトップページとしてロゴを入れたい場合もあるかもしれませんし、そもそも新規ユーザーのためにユーザー登録をナビゲートするなど、お知らせメッセージなどを表記したい場合もあるでしょう。

　このようにログインページのカスタマイズを行いたいという場合には、フォーム認証を利用すると便利です。フォーム認証を利用することで、ログインページとして自由にデザインされた独自ページを採用することが可能になります。

操作手順

（1）デプロイメントディスクリプタを定義する

　「アクセス制限をweb.xmlの記述だけで実現する」で定義したデプロイメントディスクリプタに対して、以下の変更を行ってしてください（赤字部分のみ変更）。

web.xml

<login-config>

              <auth-method>FORM</auth-method>

              <realm-name>User Auth</realm-name>

              <form-login-config>

                <form-login-page>/login.jsp</form-login-page>

                <form-error-page>/err.jsp</form-error-page>

              </form-login-config>

            </login-config>

　FORM認証を使用する場合には、<auth-method>要素にBASICの代わりに、FORMと指定します。また、<form-login-config>要素でFORM認証で使用するログイン／エラーページを指定してください。

（2）ログイン用、エラー表示用の「.jsp」ページを定義する

　ログイン（ユーザーID／パスワード）入力用のページと、間違ったユーザーID／パスワードが入力された場合のエラーページを用意します。ログインページにおいては、以下の規則に従って、フォームを定義する必要があります（逆にそれ以外は自由に設計して構いません）。

**ログインページの設定値**
	項目	設定値
	<form>タグのactionメソッド	j_security_check
	ID入力ボックスの名前	j_username
	パスワード入力ボックスの名前	j_password

login.jsp

<%@ page contentType="text/html;charset=Shift_JIS" %>

            <html>

            <head>

            <title>FORM認証ログイン</title>

            </head>

            <body>

            <h1>FORM認証ログイン</h1>

            <form method="POST" action="j_security_check">

            <table border="0" align="left">

            <tr>

            <th align="right">ユーザーID：</th>

            <td>

              <input type="text" name="j_username" size="15" maxlength="20" />

            </td>

            </tr><tr>

            <th align="right">パスワード：</th>

            <td>

              <input type="password" name="j_password" size="15" maxlength="20" />

            </td>

            </tr>

            <tr>

            <td colspan="2" align="center">

              <input type="submit" name="submit" value="ログイン" />

            </td>

            </tr>

            </table>

            </body>

            </html>

err.jsp

<%@ page contentType="text/html;charset=Shift_JIS" 
            %>

            <html>

            <head>

            <title>FORM認証ログイン（エラー）</title>

            </head>

            <body>

            <h1>FORM認証ログイン（エラー）</h1>

            ログインに失敗しました。

            <a href="/atmarkit/auth/">再ログイン</a>

            </body>

            </html>

　以上で設定は完了です。「http://localhost:8080/アプリケーション名/auth/」にアクセスしてみましょう。以下のようなログインページが表示されたら、認証は有効になっています。