9 ログインおよびログアウト機能の作成
HR Webアプリケーションには、hradmin
とhrstaff
の2人のユーザーがいます。
HRアプリケーションにログインすると、Webアプリケーションの詳細が記載されたランディング・ページが表示されます。hradmin
およびhrstaff
には、異なる権限と異なる機能へのアクセス権があります。

この章では、アプリケーションでログインおよびログアウト機能を構築するために必要なクラスと追加コードを示します。
-
ログイン機能用のXMLファイル
tomcat-users.xml
を作成します。 -
ユーザーをログインするHTMLページ
login.html
を作成します。 -
エラー・メッセージを表示するHTMLページ
login-failed.html
を作成します。 -
ログイン中にユーザーを認証する
web.xml
の作成 -
アプリケーションの詳細を表示するHTMLページ
about.html
を作成します。 -
ランディング・ページ
index.html
を作成し、リダイレクト用のhtmlページを定義します。 - ログアウトを処理するコードをサーブレット
WebController.java
に追加します。
tomcat-users.xml
の作成
XMLファイルtomcat-users.xml
を作成し、アクセスを許可するユーザーをリストします。各ユーザーにユーザー名とパスワードの両方を指定します。
クラス名: /java/HRWebApp/tomcat-users.java
Githubの場所: tomcat-users.xml
xmlファイルを作成するステップ:
- ファイル
tomcat-users.xml
を作成します。<?xml version='1.0' encoding='utf-8'?> z <tomcat-users xmlns="http://tomcat.apache.org/xml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://tomcat.apache.org/xml tomcat-users.xsd" version="1.0"> <role rolename="manager"/> <role rolename="staff"/> <user username="hradmin" password="welcome" roles="manager,staff"/> <user username="hrstaff" password="welcome" roles="staff"/> </tomcat-users>
- このファイルをマシンの
TOMCAT_HOME/conf/tomcat-users.xml
の下に配置します。
login.html
の作成
ログイン・ページは、Webアプリケーションのメイン・ページを起動すると表示されます。ログイン・ページには、ユーザー名およびパスワードを取得するためのフィールドが表示されます。
クラス名: src/main/webapp/login.html
Githubの場所: login.html
HTMLページを作成するステップ:
login.html
のタイトル、ヘッダーおよびスタイルシートを作成します。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login to Jdbc Web Sample application</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <style> #cent { position:absolute; top:50%; left:50%; margin-top:-50px; /* this is half the height of your div*/ margin-left:-100px; /*this is half of width of your div*/ } td { height: 30px; } </style> </head>
- ユーザーが入力したログイン資格証明を発行する
<body>
および<form>
を作成します。<body> <div id="cent"> <form method="POST" action="j_security_check"> <table> <tr> <td colspan="2">Login to the Jdbc Web Sample application:</td> </tr> <td>Name:</td> <td><input type="text" name="j_username" /></td> </tr> <tr> <td>Password:</td> <td><input type="password" name="j_password"/></td> </tr> <tr> <td colspan="2"><input type="submit" value="Go" /></td> </tr> </table> </form> </div> </body>
login-failed.html
の作成
ログインに失敗した場合にエラー・メッセージを表示するHTMLページ。
クラス名: src/main/webapp/login-failed.html
Githubの場所: login-failed.html
HTMLページを作成するステップ:
- 次に示すように
login-failed.html
を作成します。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login Failed</title> </head> <body> <p> Sorry, login failed! </p> </body> </html>
web.xml
の作成
web.xml
ファイルは、ログイン・ページがユーザーに表示されたときにユーザーを認証するための記述子で構成されています。
クラス名: src/main/webapp/WEB-INF/web.xml
Githubの場所: web.xml
xmlファイルを作成するステップ:
- 次のコードを使用して、
web.xml
ファイルを作成します。<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd"> <web-app> <display-name>Jdbc Web Sample</display-name> <security-role> <role-name>manager</role-name> </security-role> <security-role> <role-name>staff</role-name> </security-role> <security-constraint> <web-resource-collection> <web-resource-name>Wildcard means whole app requires authentication</web-resource-name> <url-pattern>/*</url-pattern> <http-method>GET</http-method> <http-method>POST</http-method> </web-resource-collection> <auth-constraint> <role-name>manager</role-name> </auth-constraint> <user-data-constraint> <transport-guarantee>NONE</transport-guarantee> </user-data-constraint> </security-constraint> <security-constraint> <web-resource-collection> <web-resource-name>Wildcard means whole app requires authentication</web-resource-name> <url-pattern>/*</url-pattern> <http-method>GET</http-method> </web-resource-collection> <auth-constraint> <role-name>staff</role-name> </auth-constraint> <user-data-constraint> <transport-guarantee>NONE</transport-guarantee> </user-data-constraint> </security-constraint> <login-config> <auth-method>FORM</auth-method> <form-login-config> <form-login-page>/login.html</form-login-page> <form-error-page>/login-failed.html</form-error-page> </form-login-config> </login-config> </web-app>
about.html
の作成
about.html
ファイルには、HRアプリケーション、ユーザーおよび機能に関する情報が表示されます。
クラス名: src/main/webapp/about.html
Githubの場所: about.html
HTMLページを使用するステップ: about.HTMLをダウンロードして、それをアプリケーションで使用します。
index.html
の作成
index.html
ファイルは、HR Webアプリケーションに関するすべての詳細で構成されています。ユーザーおよび機能の詳細を説明します。
クラス名: src/main/webapp/index.html
Githubの場所: index.html
HTMLページを作成するステップ:
index.html
のタイトル、ヘッダーおよびスタイルシートを作成します。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Employee table listing</title> <link rel="stylesheet" type="text/css" href="css/app.css" > <style> iframe:focus { outline: none; } iframe[seamless] { display: block; } </style> </head> <body>
- ナビゲーション・リンクとログアウトを使用して、機能のアクションと
<body>
を作成します。<body> <div id="sideNav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()" class="staff">×</a> <a href="javascript:switchSrc('listAll.html')" class="staff">List All</a> <a href="javascript:switchSrc('listById.html')" class="staff">Search By Id</a> <a href="javascript:switchSrc('listByName.html')" class="manager">Update Employee Record</a> <a href="javascript:switchSrc('incrementSalary.html')" class="manager">Increment Salary</a> <a href="javascript:switchSrc('about.html')">About</a> </div> <div id="main"> <div align="right"> <div id="myrole" style="display:inline; color:#393318; display: block; background-color:#eff0f1;position: absolute; top: 20px; right: 8%;" >myrole</div> <a href="javascript:void(0)" onclick="logout()" class="staff" style="display: block; position: absolute; top: 20px; right: 1%">Logout</a> </div> <div> <span style="font-size:30px;cursor:pointer" onclick="openNav()"> Java Get Started HR Web Application </span> </div> <div> <iframe id="content" src="about.html" frameborder="0" style="overflow:hidden; height:100%; width:100%" height="100%" width="100%"></iframe> </div> </div> <script> function openNav() { document.getElementById("sideNav").style.width = "256px"; document.getElementById("main").style.marginLeft = "256px"; } function closeNav() { document.getElementById("sideNav").style.width = "0"; document.getElementById("main").style.marginLeft= "0"; } function switchSrc(src) { document.getElementById('content').src = src; } function logout() { var xmllogout = new XMLHttpRequest(); xmllogout.open("GET", "WebController?logout=true", true, "_", "_"); xmllogout.withCredentials = true; // Invlalid credentials to fake logout xmllogout.setRequestHeader("Authorization", "Basic 00001"); xmllogout.send(); xmllogout.onreadystatechange = function() { window.location.replace("index.html"); } return true; } var xmlhttp = new XMLHttpRequest(); var url = "getrole"; xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { role = xmlhttp.responseText; console.log("role: " +role); if (role == "staff") { console.log ("disabling manager"); var x = document.getElementsByClassName('manager'); for(i = 0; i < x.length; ++i) { x[i].style.display = 'none'; } } document.getElementById('myrole').innerHTML = ' '+role+' '; } } xmlhttp.open("GET", url, true); xmlhttp.send(); </script> </body>
リクエストを処理するコードのサーブレットへの追加
アプリケーションにログインおよびログアウトするための関連コードをWebController.java
に追加します。
クラス名: src/main/java/com/oracle/jdbc/samples/web/WebController.java
Githubの場所: WebController.java
コードを追加するステップ:
WebController.java
クラスを開きます。WebController.java
を作成するには、リクエストを処理するサーブレットの作成を参照してください。同じクラスを使用して、必要なコードを追加します。- ユーザーのステータスを取得する変数
LOGOUT
を宣言します。これはグローバル変数であるため、processRequest()
メソッドの外部で、ただしWebController
クラスの内部で宣言します。private static final String LOGOUT = "logout";
- メソッド
processRequest()
は、ListAll機能ですでに作成されています。次に、ログアウト機能を実装するコードを追加します。 入力に基づいて呼び出す機能を検証するif
ブロックを作成します。入力値がLOGOUT
かどうかを確認します。if ((value = request.getParameter(LOGOUT)) != null) { /* Getting session and then invalidating it */ HttpSession session = request.getSession(false); if (request.isRequestedSessionIdValid() && session != null) { session.invalidate(); } handleLogOutResponse(request,response); response.setStatus(HttpServletResponse.SC_UNAUTHORIZED); return; }
- 入力値が
LOGOUT
の場合は、ユーザーのログアウトを処理するメソッドを呼び出します。private void handleLogOutResponse(HttpServletRequest request, HttpServletResponse response) { Cookie[] cookies = request.getCookies(); for (Cookie cookie : cookies) { cookie.setMaxAge(0); cookie.setValue(null); cookie.setPath("/"); response.addCookie(cookie); } }