ログアウト機能の追加
では、ログインの基本がわかったところで、その他の機能についても考えていきましょう。まずは「ログアウト」についてです。これも、専用のタグを使ってフォームを配置します。
では、index.gspの中に、ログアウトボタンを用意してみましょう。<body>内の適当なところに、以下のタグを記述してください。
<auth:form authAction="logout"
success="[controller:'helo', action:'login']"
error="[controller:'helo', action:'index']">
<g:submitButton name="Log out"/>
</auth:form>
これで、ログアウトのボタンが表示されるようになります。このボタンを押すと、ログアウトし、loginページに戻ります。ログアウトのフォームも、ログインと同じく<auth:form>タグで作成することができます。authAction="logout"を指定し、ログインと同様、successとerrorを指定します。フォームには、<g:submitButton>でSubmitボタンを1つだけ用意すればOKです。
これも、やはり実際にブラウザに出力されるのは、<form action="/gapp/authentication/logout">といった形のタグになります。Authenticationのlogoutアクションに送信することでログアウトの処理を行っていたのです。
サインアップの追加
続いて、サインアップ（ユーザーIDの登録）についてです。これは、新たにsignupというアクションを作ってみることにしましょう。「views」内に、新たに「signup.gsp」ファイルを作成し、次のようにフォームを用意します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Grails SignUp</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
h1 {background:#AAAAFF; font-size: 12pt; padding: 3px;}
h2{font-size: 12pt; font-weight: bold;}
p{color:#000066; font-size:10pt;}
</style>
</head>
<body>
<h1>Grails SignUp</h1>
<h2>ログインID、メールアドレス、パスワードを登録してください。</h2>
<auth:form authAction="signup"
success="[controller:'auth', action:'index']"
error="[controller:'auth', action:'signup']">
<table>
<tr><td>User:</td><td><g:textField name="login"/></td></tr>
<tr><td>Email:</td><td><g:textField name="email"/></td></tr>
<tr><td>Password:</td><td><g:passwordField name="password"/></td></tr>
<tr><td>Confirm:</td><td><g:passwordField name="passwordConfirm"/></td></tr>
<tr><td></td><td><g:submitButton name="Sign up"/></td></tr>
</auth:form>
</body>
</html>
サインアップのフォームは、<auth:form>タグを使い、authAction="signup"と指定して作成します。サインアップは、用意する項目が多いので注意が必要です。「ユーザーID」「メールアドレス」「パスワード」「パスワード確認用」「送信ボタン」の計5つを用意しなければいけません。
また、入力フィールドの名前も、やはり指定された形で記述する必要があります。それぞれ「login」「email」「password」「passwordConfirm」という名前を指定してください。これらが正しく設定されていないとサインアップの情報を登録できなくなります。
では、AuthControllerに、次のようにsignupアクションのクロージャを用意し、実際にブラウザからアクセスして動作を確かめてみましょう。
def signup = { }
ログイン状態に応じて表示を変える
先ほど、indexではコントローラー側でログイン状態をチェックし、必要に応じてエラーを発生させていました。が、コントローラー側でなく、ビュー側で制御させることもできます。Authenticationには認証に関するカスタムタグが用意されており、それを利用して認証の状態に応じた表示をさせることが可能です。
例として、indexの表示を、ビュー側で制御してみましょう。index.gspを次のように修正します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Grails Helo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
h1 {background:#AAAAFF; font-size: 12pt; padding: 3px;}
h2{font-size: 12pt; font-weight: bold;}
p{color:#000066; font-size:10pt;}
</style>
</head>
<body>
<h1>Grails Auth</h1>
<auth:ifLoggedIn>
<h2>This is Index Action Page.</h2>
LOGIN ID: <auth:user property="login" />
これは、ログインしなければ見られないページです。
<auth:form authAction="logout"
success="[controller:'auth', action:'login']"
error="[controller:'auth', action:'index']">
<g:submitButton name="Log out"/>
</auth:form>
</auth:ifLoggedIn>
<auth:ifNotLoggedIn>
<div>※ログインしてください。</div>
</auth:ifNotLoggedIn>
</body>
</html>
続いて、AuthControllerにあるindexクロージャを次のように空の状態に変更しておきましょう。
def index = { }
これで、コントローラー側では何も操作を行わない状態となりました。実際にindexにアクセスをしてみましょう。ログインしているとコンテンツが表示されますが、していないと警告メッセージだけが表示されます。
ここでは、<auth:ifLoggedIn>と<auth:ifNotLoggedIn>というタグを使っています。これらは、それぞれ「ログインしているときだけ表示」「ログインしていないときだけ表示」をする役割を果たします。これらを使うことで、ログイン時だけコンテンツを表示させる、といったことが簡単に行えるわけです。これらのタグを使い、ログイン時とそうでない時の表示の両方を組み込んでしまえば、ログインの状態に応じて自動的にどちらかが表示されます。
