IdP4：IdP应用界面自定义

Owned by carsi_pku_team
Last updated: May 08, 2023
3 min read

IdP界面模板

IdP所显示的界面均可以自定义内容以及样式，在/opt/shibboleth/views文件夹里面包含了界面的模板文件，主要如下：

  • login.vm：对接ldap后出现的登录界面，如果需要自定义，修改此文件即可。
  • intercept文件夹：terms-of-use.vm和attribute-release.vm是登陆后，用户须知和属性释放选择界面的模板，如果需要自定义，修改此文件即可。

在模板里面可能会看到很多如idp.title、root.footer、idp.login.username等变量。

这些变量是为了方便语言切换而定义的，可以在/opt/shibboleth-idp/messages/messages.properties这个文件修改这个变量的内容，达到修改界面显示内容的目的。

目前idp里面包含的界面显示变量可以在/opt/shibboleth-idp/system/messages/messages.properties（请勿修改此文件）里查看。

修改完界面后，需要重启jetty才能生效。

[carsi@www ~]$ sudo systemctl restart jetty

IdP默认显示页面修改

当用户访问idp.xxx.edu.cn/idp时，默认显示页面是

此页面源码如下

<%@ page pageEncoding="UTF-8" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title><spring:message code="root.title" text="Shibboleth IdP" /></title>
    <link rel="stylesheet" type="text/css" href="<%= request.getContextPath()%>/css/main.css">
</head>
<body>
    <div class="wrapper">
        <div class="container">
            <header>
                <img src="<%= request.getContextPath() %><spring:message code="idp.logo" />" alt="<spring:message code="idp.logo.alt-text" text="logo" />">
            </header>
            <div class="content">
                <h2><spring:message code="root.message" text="No services are available at this location." /></h2>
            </div>
        </div>
        <footer>
            <div class="container container-footer">
                <p class="footer-text"><spring:message code="root.footer" text="Insert your footer text here." /></p>
            </div>
        </footer>
    </div>
</body>
</html>

如果要修改此页面，需要在/opt/shibboleth-idp/edit-webapp这个目录下，新建index.jsp文件，将所需要显示的页面内容写在index.jsp内，最后重新编译并且重启tomcat

[carsi@www ~]$ sudo /opt/shibboleth-idp/bin/build.sh
[carsi@www ~]$ sudo systemctl restart jetty

CARSI IdP界面简单定制（只改文字和logo等）

定制登录界面Logo和文字

感谢山东大学秦丰林老师提供！

[carsi@www ~]$ sudo vi /opt/shibboleth-idp/messages/messages_zh_CN.properties

idp.title = 教育网统一认证与资源共享（Carsi）
idp.title.suffix = 错误
idp.footer = 教育网统一认证与资源共享-山东大学
idp.logo = /images/sdulogo.jpg
idp.login.loginTo = 登录到
idp.login.username = 账号
idp.login.password = 密码
idp.login.donotcache = 不保存账号信息
idp.login.login = 登录
idp.login.pleasewait = 正在登录，请等待...
idp.attribute-release.revoke = 清除历史授权信息

idp.login.forgotPassword  = 忘记密码？
idp.url.password.reset = http://密码重置网站url
idp.login.needHelp = 使用帮助
idp.url.helpdesk = http://使用帮助页面url

idp.logo中的logo图像文件在/opt/shibboleth-idp/edit-webapp/images/目录里。
修改图像文件后需要重新编译：

[carsi@www ~]$ sudo /opt/shibboleth-idp/bin/build.sh
[carsi@www ~]$ sudo systemctl restart jetty

定制属性释放界面文字

感谢北京联合大学王晓震老师提供！

[carsi@www ~]$ sudo vi /opt/shibboleth-idp/messages/messages_zh_CN.properties

idp.attribute-release.title                        = 信息释放
idp.attribute-release.attributesHeader             = 将向服务机构提供如下信息:
idp.attribute-release.serviceNameLabel             = 您即将访问如下服务:
idp.attribute-release.serviceDescriptionLabel      = 该服务由以下服务机构提供:
idp.attribute-release.accept                       = 同意
idp.attribute-release.reject                       = 拒绝
idp.attribute-release.confirmationQuestion         = 如果您继续，上述信息将与服务共享。您是否同意在每次访问时向服务发布这些信息？
idp.attribute-release.consentMethod                = 请选择信息释放期限:
idp.attribute-release.consentMethodRevoke          = 您可以在登录页上的复选框中随时撤销此设置。
idp.attribute-release.doNotRememberConsent         = 在下次登录时再询问我
idp.attribute-release.doNotRememberConsentItem     = 我同意本次发送的信息。
idp.attribute-release.rememberConsent              = 如果提供给服务机构的信息发生变化再询问我
idp.attribute-release.rememberConsentItem          = 我同意以后自动将相同的信息发送给这个服务机构。
idp.attribute-release.globalConsent                = 不要再询问我
idp.attribute-release.globalConsentItem            = 我同意将我的<strong>全部信息</strong>释放给<strong>所有</strong>服务机构.修改

修改后，界面预览如下：

CARSI IdP界面深度定制（完全自己开发页面）

        所有界面的模板都在/opt/shibboleth-idp/views路径下，可以根据需要自行深度定制，包括本校用户IdP登陆界面、隐私保护界面、错误提示界面等，可根据本校情况自行修改。

IdP登录界面深度定制

感谢西北工业大学孙露露老师提供！

css文件路径：/opt/shibboleth-idp/edit-webapp/css/

登录模板文件：/opt/shibboleth-idp/views

Login.vm

1.登录SP站点提示

<legend>
#springMessageText("idp.login.loginTo","Loginto") $encoder.encodeForHTML($serviceName)
</legend>

 可以按需更改为需要的提示语，例：

<strong>***请使用翱翔门户学工号和密码登陆***</strong>

2.帮助和密码找回部分，按需更改或注释删除

<div class="column two">
<ul class="list list-help">
if ($passwordEnabled)
 <li class="list-help-item">
<a href="#springMessageText("idp.url.password.reset", "#")">
<spanclass="item-marker">&rsaquo;</span> #springMessageText("idp.login.forgotPassword", "Forgot your password?")</a>
</li>
#end
<li class="list-help-item">
<a href="#springMessageText("idp.url.helpdesk", "#")">
<span class="item-marker">&rsaquo;</span>
#springMessageText("idp.login.needHelp", "Need Help?")</a></li>
</ul>
</div>  

3.目标SP站点log和链接， 按需更改或删除

 #set ($logo = $rpUIContext.getLogo())
 #if ($logo)
 <img src= "$encoder.encodeForHTMLAttribute($logo)"
alt="$encoder.encodeForHTMLAttribute($serviceName)">
  #end
  #set ($desc = $rpUIContext.getServiceDescription())
            #if ($desc)
              $encoder.encodeForHTML($desc)
  #end

 4.如要将页面替换为学校统一认证页面

将css文件放入/opt/shibboleth-idp/edit-webapp/css/文件夹

<link rel="stylesheet" type="text/css" href="$request.getContextPath()/css/main.css">

更换引用css文件

将/opt/shibboleth/views/login.vm里面的<from>……</from>中内容替换到页面的相应位置

最后重新编译并且重启tomcat

[carsi@www ~]$ sudo /opt/shibboleth-idp/bin/build.sh
[carsi@www ~]$ sudo systemctl restart jetty


版权所有©北京大学计算中心