การติดตั้ง Shibboleth Single Sign-On
ตอนที่ 13 - การปรับแต่งหน้าล็อกอิน (ตอนจบ)
21. การทำให้หน้าล็อกอินแตกต่างกันไปแต่ละแอพพลิเคชัน
หากเราต้องการให้หน้าล็อกอินแตกต่างกันไปในแต่ละแอพพลิเคชัน
เช่น ปัจจุบันเรามีแอพพลิเคชันอยู่ 3 ตัวคือ app1,
app2 และ app3 แต่ไฟล์ที่เราใช้ทำหน้าล็อกอินจะเป็นไฟล์เดียวกันทั้งหมดคือไฟล์
login.jsp ที่อยู่ในโฟลเดอร์ apache-tomcat-6.0.18\webapps\idp
ดังนั้นหากเราต้องการให้ผู้ใช้เห็นหน้าล็อกอินแตกต่างกันไปในแต่ละแอพพลิเคชัน
เราจำเป็นต้องแก้ไขโปรแกรมที่ Shibbolet IdP เขียนไว้ให้ในหน้า
login.jsp นั่นเอง
21.1 ดึงชื่อแอพพลิเคชันผ่านทาง _shibstate_xxx
จากการสำรวจดูในค่า
Cookie พบว่า Shibboleth SP จะฝังตำแหน่งที่ผู้ใช้รีเควสต์เข้ามาไว้ในคุ๊กกี้ชื่อว่า
_shibstate_xxxx โดยตัว xxxx ด้านหลังเป็นรหัสตัวเลขที่
SP สร้างขึ้นมาและเปลี่ยนแปลงไปเรื่อย
ดังนั้นวิธีง่ายๆที่เราจะได้ความแตกต่างกันในแต่ละแอพพลิเคชันคือ
เอาชื่อแอพพลิเคชันที่ติดพาธ URL ที่อยู่ในคุ๊กกี้ตัวนี้
เปิดไปที่ไฟล์
login.jsp ของ IdP ปกติไฟล์นี้จะอยู่ในโฟลเดอร์
apache-tomcat-6.0.18\webapps\idp เปิดขึ้นมาแก้ไขโดยเติมโปรแกรมเข้าไปดังนี้
ซอร์สโค้ด 6 ไฟล์ login.jsp ที่ใช้เป็นหน้าล็อกอินของ
Shibboleth IdP (หรือก็อปปีไฟล์ login.jsp นี้ได้โฟลเดอร์ setup/extra)
<%@page
import="java.util.*" %>
<%@page
import="javax.servlet.*" %>
<%@page import="javax.servlet.http.*" %>
<%!
private Map titles = new Hashtable();
private Map styles = new Hashtable();
public void init() throws ServletException {
super.init();
titles.put("app1", "Application 1");
titles.put("app2", "Application 2");
titles.put("app3", "Application 3");
styles.put("app1", "app1.css");
styles.put("app2", "app2.css");
styles.put("app3", "app3.css");
}
public String
getAppName(HttpServletRequest request) {
Cookie[] cookies =
request.getCookies();
for(int i = 0; i <
cookies.length; i++) {
if(cookies[i].getName().startsWith("_shibstate"))
{
String value =
cookies[i].getValue();
int start =
value.lastIndexOf("%2F");
return value.substring(start +
3);
}
}
return "";
}
public String getTitle(String
appName) {
String str =
(String)titles.get(appName);
if(str == null) return "";
return str;
}
public String getStyle(String
appName) {
String str =
(String)styles.get(appName);
if(str == null) return "";
return str;
}
%>
<%
String appName = getAppName(request);
String title = getTitle(appName);
String style = request.getContextPath() + "/" +
getStyle(appName);
%>
<html>
<head>
<title>Shibboleth Identity
Provider - <%= title %> Login</title>
<link
rel="stylesheet" href="<%= style %>" type="text/css"/>
</head>
<body>
<img
src="<%=
request.getContextPath() %>/images/logo.jpg" />
<h2>Shibboleth Identity
Provider Login</h2>
<% if ("true".equals(request.getAttribute("loginFailed")))
{ %>
<p><font
color="red">Authentication Failed</font></p>
<% } %>
<% if(request.getAttribute("actionUrl")
!= null){
%>
<form action="<%=request.getAttribute("actionUrl")%>" method="post">
<% }else{ %>
<form action="j_security_check" method="post">
<% } %>
<table>
<tr>
<td>Username:</td>
<td><input
name="j_username" type="text" tabindex="1"
/></td>
</tr>
<tr>
<td>Password:</td>
<td><input
name="j_password" type="password" tabindex="2"
/></td>
</tr>
<tr>
<td
rowspan="2"><input type="submit"
value="Login" tabindex="3"
/></td>
</tr>
</table>
</form>
</body>
</html>
สังเกตว่าเราสร้างเมธอด getAppName()
ที่ดึงชื่อแอพพลิเคชันจากคุ๊กกีและนำชื่อแอพพลิเคชันนั้นมาเลือกว่าจะใช้
title และ style เป็นอะไร
2.2 ก็อปปีไฟล์ CSS ที่เตรียมไว้สำหรับแต่ละแอพพลิเคชัน
ให้ก็อปปีไฟล์ app1.css,
app2.css และ app3.css จากโฟลเดอร์ setup/extra
ไปวางไว้ใน apache-tomcat-6.0.18\webapps\idp ดังนี้
รูปภาพ 125 ไฟล์ css ที่จำเป็นต้องใช้เพื่อให้แตกต่างกันไปแต่ละแอพพลิเคชัน
หลังจากนั้นทดลองเข้าไปที่ http://127.0.0.1/app1
ใหม่อีกครั้งจะปรากฏหน้าล็อกอินดังนี้
รูปภาพ 126 หน้าล็อกอินของ
app1 ใช้
app1.css เป็นไฟล์กำหนดรูปแบบ
และหัวหน้าต่างมีชื่อว่า Application 1
ให้ทดลองเข้าใหม่เป็น http://127.0.0.1/app2
และ http://127.0.0.1/app3 สังเกตว่าหน้าล็อกอินแต่ละแอพพลิเคชันจะแตกต่างกันไปตามรูปแบบที่กำหนดไว้ในไฟล์
CSS
21. บทสรุป
เมื่อมาถึงขั้นตอนนี้ถือว่าเราได้ประสบความสำเร็จในการติดตั้ง
Shibboleth 2 Single Sign-On เพื่อเชื่อมโยงระบบการล็อกอินของ
PHP และ Java เข้าด้วยกันแล้ว
อย่างไรก็ตามหากท่านจะนำไปใช้งานจริง
อาจจะต้องปรับแต่งค่าคอนฟิกให้ตรงกับสภาพแวดล้อมของท่านเอง เช่น
ชื่อเครื่องเซิร์ฟเวอร์ และหมายเลข IP Address ต่างๆเป็นต้น
นอกจากนี้ท่านสามารถค้นคว้ารายละเอียดเพิ่มเติมได้ที่ เว็บไซต์ของ Shibboleth
ที่ตำแหน่ง URL HTUhttps://spaces.internet2.eduUTH
ความคิดเห็น
แสดงความคิดเห็น