IdP界面自定义

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(请勿修改此文件)里查看。

修改完界面后,需要重启tomcat才能生效。

systemctl restart tomcat9

IdP默认显示页面修改

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

000.png

此页面源码如下

<%@ 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

/opt/shibboleth-idp/bin/build.sh
systemctl restart tomcat9


IdP国际化配置

(感谢云南大学刘东华老师提供)

由于Shibboleth IDP 3/4使用Spring框架,所以其国际化支持(i18n)是通过Java/Spring的标准方式实现的,只需要把相应的国际化翻译文件(例如简体中文的命名的messages_zh_cn.properties)放在指定位置(/opt/shibboleth-idp/messages),剩下的框架本身会自动处理——用户访问页面的时候会根据HTTP的Accept-Languages请求头返回对应语言的内容。当然如果这种隐式方式如果不满足需求,例如用户期望在首页上放置一个地区/语言下拉选择框来让用户选择他所期望的语言,这也是可以支持的,详见下面的深度定制。

快速简易配置

IDP 3/4 安装之后有一个默认的翻译覆盖文件/opt/shibboleth-idp/messages/messages.properties,其内容如下:

root@idp:/opt/shibboleth-idp# cat /opt/shibboleth-idp/messages/messages.properties
# You can define message properties here to override messages defined in
# system/messages/ or to add your own messages.

此文件是用于覆盖(合并)/opt/shibboleth-idp/system/messages/messages.properties,生成最终的国际化翻译文件,具体的覆盖(合并)规则可参考/opt/shibboleth-idp/conf/services.xml 中 shibboleth.MessageSourceResources部分的配置,其内容大致如下:

/opt/shibboleth-idp/conf/services.xml 中 shibboleth.MessageSourceResources部分:

<util:list id="shibboleth.MessageSourceResources">
<value>%{idp.home}/messages/messages</value>
<value>%{idp.home}/system/messages/messages</value>
</util:list>

messages.propertie的部分内容:

root@idp:/opt/shibboleth-idp# head -n 30 system/messages/messages.properties
# In addition to the Apache 2.0 license, this content is also licensed
# under the Creative Commons Attribution-ShareAlike 3.0 Unported license
# (see http://creativecommons.org/licenses/by-sa/3.0/).

# This is the as-delivered set of messages used in various views
# so that internationalized translations can be made available and
# so administrators can locally override or supplement the values
# in their own message files.


# Event/Exception to error key mappings, not messages per se, but used
# in the example error view to support groupings of error behavior.

AccessDenied = access
ContextCheckDenied = context-check-denied
EndpointResolutionFailed = endpoint
ImpersonationViolation = impersonation-violation
InvalidProfileConfiguration = relying-party
InvalidSecurityConfiguration = security-cfg
MessageAuthenticationError = security-msg
MessageReplay = stale
MessageExpired = stale
UnableToDecode = stale
AccountError = authn
AccountLocked = authn
AuthenticationException = authn
InvalidCredentials = authn
NoCredentials = authn
NoPotentialFlow = authn
RequestUnsupported = authn
root@idp:/opt/shibboleth-idp#

此文件结构是key/value形式的,具体key所在位置可以在/opt/shibboleth-idp/views目录下的模板文件中搜索。

快速简易配置是从MessagesTranslation下载适用于对应版本的中文的翻译文件,例如适用于3.4版本的messages_zh_CN.properties(4.x版本的可以在MessagesTranslation这里下载),当然如果觉得翻译的不如意,需要修改里面的内容,使用文本编辑器打开编辑即可。注意别忘了修改文件owner及权限使其与messages.propertie一致,重启IdP后生效。

CARSI早期文档(本页面最下方"CARSI IdP界面简单定制(只改文字和logo等)")也提到了通过直接修改/opt/shibboleth-idp/messages/messages.properties达到定制界面,但这种修改有一个弊端即不支持国际化,如果用户使用英文浏览器,期望看到的界面是英文的,但此时显示的却是中文的。

深度定制

如果需要定制例如自定义选择地区/语言,根据URL中某个参数如lang显示指定语言的内容,则需要一些Spring bean的配置,具体可参考Switching locale on the login page,按照文档及Spring通常的方式配置即可,这里就不在赘述。

参与社区翻译项目

参与社区翻译项目的方式可参考Contribute to the Translation Project

1. 访问http://zanata.org,创建自己的账号
2. 发送邮件到aai@switch.ch,申请添加到Shibboleth translations项目的贡献者/维护者中

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站点logo和链接, 按需更改或删除

 #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

/opt/shibboleth-idp/bin/build.sh
systemctl restart tomcat9

CARSI IdP界面简单定制(只改文字和logo等)

本部分内容介绍直接修改messages.properties的方式,定制化用户界面。此方法在CARSI早期文档中使用,目前建议根据 6462797 的方式配置IdP,此文档不再维护。

定制登录界面Logo和文字

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

vi /opt/shibboleth-idp/messages/messages.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/目录里。
修改图像文件后需要重新编译:

/opt/shibboleth-idp/bin/build.sh

然后重启tomcat:

systemctl restart tomcat9

然后重启tomcat
systemctl restart tomcat9

定制属性释放界面文字

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

vi /opt/shibboleth-idp/messages/messages.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>服务机构.修改

修改后,界面预览如下:


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