您的位置：首页 > 其它

CAS之5.2x版本自定义登录页面-yellowcong

2018-02-02 16:14 661 查看

Cas搞到手后，肯定不能用他自带的界面了，不仅暴漏了登录系统信息，而且让用户感觉莫名其妙。所以需要实现自定义的界面，搞上自己公司的logo,岂不是爽歪歪。有需求，我们就开搞吧。我现在的需求是，我有两个子站点，yellowcong.com,yellowlu.com. 两个站点使用不同的样式。1、在services文件夹添加的json配置文件，2、配置application.properties，设置

cas.serviceRegistry.initFromJson=true

,让配置的json文件生效，3、在static 文件夹，添加静态样式，4、在templates文件夹添加模板

项目地址

https://gitee.com/yellowcong/springboot_cas/tree/master/cas-server-page

项目结构

配置文件都扔在了src/main/resources 这个目录下


目录	意义
services	需要配置自定义登录的网站模版
static	静态文件目录，用于存放js，css代码的
templates	模板代码 casLoginView.html 这个名称不可瞎改
yellowcong.properties	用于存放yellowcong网站的模版配置信息
yellowlu.properties	用于存放yellowlu网站的模版配置信息

完整截图

service目录配置

对于一个很大的网站，不同的子项目下面，可能登录的风格和样式不一样，所以我们需要配置这个service目录，设定每一个子网站对应的请求样式，如果不设定，可以指定默认样式

HTTPSandIMAPS-10000001.json

这个json配置文件是系统默认的，我们可以直接修改这个，来设定系统默认的登录模板。大家可以看到，如果我找不到系统模版，我就直接使用yellowcong 这个模版的配置配置文件的命名必须是文件名称+id.json的这种方式，不然找不到配置文件。

参数说明


参数	意义
@class	模版注册的类
serviceId	表示哪一个网站使用这个模板
name	给这个模板命名
id	模板的id，建议json文件命名为 name_id 这样好区分，而且官网推荐
description	注释，就说明这个模板，或则这个网站
evaluationOrder	就是主题的顺序，这么多主题匹配，肯定是这个id越小，越先匹配
theme	主题名称，主题名称建议和网站名称一致
attributeReleasePolicy	cas参数返回策略，这个大家现在配置不配置，无所谓了,不影响操操作

{
"@class": "org.apereo.cas.services.RegexRegisteredService",
"serviceId": "^(http|https|imaps)://.*",
"name": "HTTPS and IMAPS",
"id": 10000001,
"description": "This service definition authorizes all application urls that support HTTPS and IMAPS protocols.",
"evaluationOrder": 10000,
"attributeReleasePolicy": {
"@class": "org.apereo.cas.services.ReturnAllAttributeReleasePolicy"
},
"theme": "yellowcong"
}

yellowcong-1000.json

这个是yellowcong 网站的配置，任何以yellowcong 开头的 https、http 、imaps，都可以走这个模板

{
"@class" : "org.apereo.cas.services.RegexRegisteredService",
"serviceId" : "^(https|imaps|http)://yellowcong.*",
"name" : "yellowcong",
"id" : 1000,
"description" : "yellowcong项目访问过来，跳转到demo主题",
"evaluationOrder" : 10,
"theme": "yellowcong"
}

yellowlu-1001.json

这个和上一个差不多，但是注意一点，id、evaluationOrder、theme这三个配置不要和别的站点重复了，evaluationOrder 指的是匹配的顺序，你越小，就越先匹配上。

{
"@class" : "org.apereo.cas.services.RegexRegisteredService",
"serviceId" : "^(https|imaps|http)://yellowlu.*",
"name" : "yellowlu",
"id" : 1001,
"description" : "yellowcong项目访问过来，跳转到demo主题",
"evaluationOrder" : 11,
"theme": "yellowlu"
}

启用识别

配置application.properties,设置cas需要从json文件做初始化操作，不然我们配置的json没有生效

#开启识别json文件，默认false
cas.serviceRegistry.initFromJson=true

#自动扫描服务配置，默认开启
#cas.serviceRegistry.watcherEnabled=true
#120秒扫描一遍
#cas.serviceRegistry.repeatInterval=120000
#延迟15秒开启
#cas.serviceRegistry.startDelay=15000

#默认json/yml资源加载路径为resources/services
#cas.serviceRegistry.config.location=classpath:/services

static文件夹

大家可以很简单的看到，目录下面，每个模板下面都配置了一个css文件，很简单的模板。设置了表头的颜色而已。

yellowcong.css

h1 {
color: yellow;
}

yellowlu.css

h1 {
color: pink;
}

templates 登录模板

目录结构可以看到，每个子站点，都会新建一个文件夹，文件夹的名称需要和 service里面配置站点的theme的名称对应上，casLoginView.html 这个模板的名称，不能瞎改，这个是固定的。

yellowcong模板

casLoginView.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title th:text="${#themes.code('yellowcong.pageTitle')}"></title>
<link rel="stylesheet" th:href="@{${#themes.code('yellowcong.css.file')}}"/>
</head>

<body>
<h1 th:text="${#themes.code('yellowcong.pageTitle')}"></h1>
<h2>yellowcong的登录模板</h2>
<div>
<form method="post" th:object="${credential}">
<div th:if="${#fields.hasErrors('*')}">
<span th:each="err : ${#fields.errors('*')}" th:utext="${err}"/>
</div>
<h2 th:utext="#{screen.welcome.instructions}"></h2>

<section class="row">
<label for="username" th:utext="#{screen.welcome.label.netid}"/>
<div th:unless="${openIdLocalId}">
<input class="required"
id="username"
size="25"
tabindex="1"
type="text"
th:disabled="${guaEnabled}"
th:field="*{username}"
th:accesskey="#{screen.welcome.label.netid.accesskey}"
autocomplete="off"/>
</div>
</section>

<section class="row">
<label for="password" th:utext="#{screen.welcome.label.password}"/>
<div>
<input class="required"
type="password"
id="password"
size="25"
tabindex="2"
th:accesskey="#{screen.welcome.label.password.accesskey}"
th:field="*{password}"
autocomplete="off"/>
</div>
</section>

<section>
<input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
<input type="hidden" name="_eventId" value="submit"/>
<input type="hidden" name="geolocation"/>
<input class="btn btn-submit btn-block"
name="submit"
accesskey="l"
th:value="#{screen.welcome.button.login}"
tabindex="6"
type="submit"/>
</section>
</form>
</div>
</body>
</html>

yellowlu模板

casLoginView.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title th:text="${#themes.code('yellowlu.pageTitle')}"></title>
<link rel="stylesheet" th:href="@{${#themes.code('yellowlu.css.file')}}"/>
</head>

<body>
<h1 th:text="${#themes.code('yellowlu.pageTitle')}"></h1>
<h2>yellowlu的登录模板</h2>
<div>
<form method="post" th:object="${credential}">
<div th:if="${#fields.hasErrors('*')}">
<span th:each="err : ${#fields.errors('*')}" th:utext="${err}"/>
</div>
<h2 th:utext="#{screen.welcome.instructions}"></h2>

<section class="row">
<label for="username" th:utext="#{screen.welcome.label.netid}"/>
<div th:unless="${openIdLocalId}">
<input class="required"
id="username"
size="25"
tabindex="1"
type="text"
th:disabled="${guaEnabled}"
th:field="*{username}"
th:accesskey="#{screen.welcome.label.netid.accesskey}"
autocomplete="off"/>
</div>
</section>

<section class="row">
<label for="password" th:utext="#{screen.welcome.label.password}"/>
<div>
<input class="required"
type="password"
id="password"
size="25"
tabindex="2"
th:accesskey="#{screen.welcome.label.password.accesskey}"
th:field="*{password}"
autocomplete="off"/>
</div>
</section>

<section>
<input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
<input type="hidden" name="_eventId" value="submit"/>
<input type="hidden" name="geolocation"/>
<input class="btn btn-submit btn-block"
name="submit"
accesskey="l"
th:value="#{screen.welcome.button.login}"
tabindex="6"
type="submit"/>
</section>
</form>
</div>
</body>
</html>

配置模板信息

模板弄好了，我们需要将模板整合起来，通过一个配置信息来告诉cas,这个js，css，哪儿找

yellowcong.properties

这个地方，只是简单的指定了默认的样式文件地址，对于更细节的js，都可以自己加入

yellowcong.css.file=/themes/yellowcong/css/yellowcong.css
yellowcong.pageTitle=yellowcong 网站

#standard.custom.css.file=/themes/[theme_name]/css/cas.css
#cas.javascript.file=/themes/[theme_name]/js/cas.js

standard.custom.css.file=/css/cas.css
admin.custom.css.file=/css/admin.css
cas.javascript.file=/js/cas.js

yellowlu.properties

#定义的字段和信息，可以在页面读取到
yellowlu.css.file=/themes/yellowlu/css/yellowlu.css
yellowlu.pageTitle=yellowlu 网站

#standard.custom.css.file=/themes/[theme_name]/css/cas.css
#cas.javascript.file=/themes/[theme_name]/js/cas.js

standard.custom.css.file=/css/cas.css
admin.custom.css.file=/css/admin.css
cas.javascript.file=/js/cas.js