cas学习3：自定义登录页面

cas也搞得差不多了,一直使用的是默认登录页面，这样是肯定不行的,企业级登录页面,一般都是自定义的,页面上有广告或者公司的logo等,

下面开始进行自定义登录页面,查看官方文档,发现有动态主题和静态主题,下面只介绍静态主题模式。

参考文档

https://apereo.github.io/cas/5.3.x/installation/Configuration-Properties.html#themes
https://apereo.github.io/cas/5.3.x/installation/User-Interface-Customization-Themes.html

主题

主题意味着风格不一样,目的就是不同的接入端,显示不同的登录页面，就像阿里旗下的各种登录,支付宝登录,淘宝，天猫,用的可能就是同一个sso，但是各自的登录主题不一样。
简略看完后，会有以下的规范：
     ● 静态资源(js,css)存放目录为src/main/resources/static
     ● html资源存(thymeleaf)放目录为src/main/resources/templates
     ● 主题配置文件存放在src/main/resources并且命名为[theme_name].properties
     ● 主题页面html存放目录为src/main/resources/templates/

主题的配置

登录页渲染文件为casLoginView.html，还记得我们之前配置客户端注册的时候的json文件,这个文件中还可以添加一个属性theme对应自己的主题,具体看下面的例子,cas也可以设置一个默认主题,如果service注册的时候没有指明主题,就使用默认的主题。

具体操作实战

第一步：在客户端注册的json文件中添加theme属性

客户端app1

<span style="color:rgba(0, 0, 0, 0.75)"><span style="background-color:#ffffff"><span style="color:#000000"><span style="background-color:#f6f8fa"><code class="language-json">{
  "<span style="color:#50a14f">@class</span>" : <span style="color:#009900 !important">"org.apereo.cas.services.RegexRegisteredService"</span>,
  "<span style="color:#50a14f">serviceId</span>" : <span style="color:#009900 !important">"^(https|imaps|http)://app1.cas.com.*"</span>,
  "<span style="color:#50a14f">name</span>" : <span style="color:#009900 !important">"测试客户端app1"</span>,
  "<span style="color:#50a14f">id</span>" : <span style="color:#006666 !important">1000</span>,
  "<span style="color:#50a14f">description</span>" : <span style="color:#009900 !important">"这是app1的客户端"</span>,
  "<span style="color:#50a14f">evaluationOrder</span>" : <span style="color:#006666 !important">10</span>,
  "<span style="color:#50a14f">theme</span>" : <span style="color:#009900 !important">"app1"</span>
}</code></span></span></span></span>

客户端app2

<span style="color:rgba(0, 0, 0, 0.75)"><span style="background-color:#ffffff"><span style="color:#000000"><span style="background-color:#f6f8fa"><code class="language-json">{
  "<span style="color:#50a14f">@class</span>" : <span style="color:#009900 !important">"org.apereo.cas.services.RegexRegisteredService"</span>,
  "<span style="color:#50a14f">serviceId</span>" : <span style="color:#009900 !important">"^(https|imaps|http)://app2.cas.com.*"</span>,
  "<span style="color:#50a14f">name</span>" : <span style="color:#009900 !important">"测试客户端app2"</span>,
  "<span style="color:#50a14f">id</span>" : <span style="color:#006666 !important">1001</span>,
  "<span style="color:#50a14f">description</span>" : <span style="color:#009900 !important">"这是app2的客户端"</span>,
  "<span style="color:#50a14f">evaluationOrder</span>" : <span style="color:#006666 !important">11</span>,
  "<span style="color:#50a14f">theme</span>" : <span style="color:#009900 !important">"app2"</span>
}</code></span></span></span></span>

第二步：在src/main/resources下创建app1.properties 和 app2.properties

根据官网文档,需要在src/main/resources文件夹的根目录下创建 与 json文件中theme属性值 对应的properties
所以要在src/main/resources新建app1.properties 和 app2.properties 这只是demo,所以以下内容相似。

<span style="color:rgba(0, 0, 0, 0.75)"><span style="background-color:#ffffff"><span style="color:#000000"><span style="background-color:#f6f8fa"><code class="language-python"><span style="color:#880000 !important"><em>#原cas默认的css样式,如果更改了,某些页面样式将丢失</em></span>
cas.standard.css.file=/css/cas.css
<span style="color:#880000 !important"><em>#自己的样式</em></span>
cas.myself.css=/themes/app1/css/cas.css
cas.javascript.file=/themes/app1/js/jquery-<span style="color:#006666 !important">1.4</span><span style="color:#006666 !important">.2</span>.min.js
cas.page.title=app1的主题</code></span></span></span></span>

在app1.properties 和 app2.properties 中的属性值都是随便起,只要在html中指明引用的key就可以了,例如：properties中指明css和js文件地址,然后在html中用下面的方式使用。

<span style="color:rgba(0, 0, 0, 0.75)"><span style="background-color:#ffffff"><span style="color:#000000"><span style="background-color:#f6f8fa"><code class="language-html"><span style="color:#006666 !important"><<span style="color:#4f4f4f !important">link</span> <span style="color:#4f4f4f !important">rel</span>=<span style="color:#009900 !important">"stylesheet"</span> <span style="color:#4f4f4f !important">th:href</span>=<span style="color:#009900 !important">"@{${#themes.code('cas.myself.css')}}"</span>/></span>
<span style="color:#006666 !important"><<span style="color:#4f4f4f !important">script</span> <span style="color:#4f4f4f !important">th:src</span>=<span style="color:#009900 !important">"@{${#themes.code('cas.javascript.file')}}"</span>></span><span style="color:#006666 !important"></<span style="color:#4f4f4f !important">script</span>></span></code></span></span></span></span>

注意：上面配置文件中有cas.standard.css.file属性,这个属性默认就是指向/css/cas.css也就是cas默认的css文件,这个我们要指明,否则你只是自定义了登录页面,其他页面的样式将丢失。我们在自定义的登录页面使用自己的css文件,不跟cas的默认css混淆。

第三步：根据第二步创建cas.css文件

客户端1

<span style="color:rgba(0, 0, 0, 0.75)"><span style="background-color:#ffffff"><span style="color:#000000"><span style="background-color:#f6f8fa"><code class="language-css"><span style="color:#006666 !important">h2</span> {
    <span style="color:#50a14f">color</span>:<span style="color:#009900 !important"> red</span>;
}</code></span></span></span></span>

客户端2

<span style="color:rgba(0, 0, 0, 0.75)"><span style="background-color:#ffffff"><span style="color:#000000"><span style="background-color:#f6f8fa"><code class="language-css"><span style="color:#006666 !important">h2</span> {
    <span style="color:#50a14f">color</span>:<span style="color:#009900 !important"> pink</span>;
}</code></span></span></span></span>

第四步：在application.properties中添加以下属性，配置默认主题

<span style="color:rgba(0, 0, 0, 0.75)"><span style="background-color:#ffffff"><span style="color:#000000"><span style="background-color:#f6f8fa"><code class="language-python"><span style="color:#880000 !important"><em># 默认主题</em></span>
cas.theme.defaultThemeName=app2</code></span></span></span></span>

• 1
• 2

第五步：配置不同客户端的登录页面

这是只给出app1的页面,页面都是一样的,只是根据在properties中的title属性来区分不同的客户端,app2粘贴就行了。
注意要点：from表单的内容需要遵循一定的标准th:object等.

<span style="color:rgba(0, 0, 0, 0.75)"><span style="background-color:#ffffff"><span style="color:#000000"><span style="background-color:#f6f8fa"><code class="language-html"><span style="color:#4f4f4f !important"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span>
<span style="color:#006666 !important"><<span style="color:#4f4f4f !important">html</span>  <span style="color:#4f4f4f !important">xmlns:th</span>=<span style="color:#009900 !important">"http://www.thymeleaf.org"</span>></span>
<span style="color:#006666 !important"><<span style="color:#4f4f4f !important">head</span>></span>
    <span style="color:#006666 !important"><<span style="color:#4f4f4f !important">meta</span> <span style="color:#4f4f4f !important">http-equiv</span>=<span style="color:#009900 !important">"Content-Type"</span> <span style="color:#4f4f4f !important">content</span>=<span style="color:#009900 !important">"text/html; charset=utf-8"</span> /></span>
    <span style="color:#006666 !important"><<span style="color:#4f4f4f !important">title</span> <span style="color:#4f4f4f !important">th:text</span>=<span style="color:#009900 !important">"${#themes.code('cas.page.title')}"</span>></span><span style="color:#006666 !important"></<span style="color:#4f4f4f !important">title</span>></span>
    <span style="color:#006666 !important"><<span style="color:#4f4f4f !important">link</span> <span style="color:#4f4f4f !important">rel</span>=<span style="color:#009900 !important">"stylesheet"</span> <span style="color:#4f4f4f !important">th:href</span>=<span style="color:#009900 !important">"@{${#themes.code('cas.myself.css')}}"</span>/></span>
    <span style="color:#006666 !important"><<span style="color:#4f4f4f !important">script</span> <span style="color:#4f4f4f !important">th:src</span>=<span style="color:#009900 !important">"@{${#themes.code('cas.javascript.file')}}"</span>></span><span style="color:#006666 !important"></<span style="color:#4f4f4f !important">script</span>></span>
<span style="color:#006666 !important"></<span style="color:#4f4f4f !important">head</span>></span>

<span style="color:#006666 !important"><<span style="color:#4f4f4f !important">body</span>></span>
<span style="color:#006666 !important"><<span style="color:#4f4f4f !important">h2</span> <span style="color:#4f4f4f !important">th:text</span>=<span style="color:#009900 !important">"${#themes.code('cas.page.title')}"</span>></span><span style="color:#006666 !important"></<span style="color:#4f4f4f !important">h2</span>></span>
<span style="color:#006666 !important"><<span style="color:#4f4f4f !important">div</span>></span>
    <span style="color:#006666 !important"><<span style="color:#4f4f4f !important">form</span> <span style="color:#4f4f4f !important">method</span>=<span style="color:#009900 !important">"post"</span> <span style="color:#4f4f4f !important">th:object</span>=<span style="color:#009900 !important">"${credential}"</span>></span>
        <span style="color:#006666 !important"><<span style="color:#4f4f4f !important">div</span> <span style="color:#4f4f4f !important">th:if</span>=<span style="color:#009900 !important">"${#fields.hasErrors('*')}"</span>></span>
            <span style="color:#006666 !important"><<span style="color:#4f4f4f !important">span</span> <span style="color:#4f4f4f !important">th:each</span>=<span style="color:#009900 !important">"err : ${#fields.errors('*')}"</span> <span style="color:#4f4f4f !important">th:utext</span>=<span style="color:#009900 !important">"${err}"</span> <span style="color:#4f4f4f !important">style</span>=<span style="color:#009900 !important">"color: red"</span> /></span>
        <span style="color:#006666 !important"></<span style="color:#4f4f4f !important">div</span>></span>
        <span style="color:#006666 !important"><<span style="color:#4f4f4f !important">h4</span> <span style="color:#4f4f4f !important">th:utext</span>=<span style="color:#009900 !important">"#{screen.welcome.instructions}"</span>></span><span style="color:#006666 !important"></<span style="color:#4f4f4f !important">h4</span>></span>
        <span style="color:#006666 !important"><<span style="color:#4f4f4f !important">section</span> <span style="color:#4f4f4f !important">class</span>=<span style="color:#009900 !important">"row"</span>></span>
            <span style="color:#006666 !important"><<span style="color:#4f4f4f !important">label</span> <span style="color:#4f4f4f !important">for</span>=<span style="color:#009900 !important">"username"</span> <span style="color:#4f4f4f !important">th:utext</span>=<span style="color:#009900 !important">"#{screen.welcome.label.netid}"</span> /></span>
            <span style="color:#006666 !important"><<span style="color:#4f4f4f !important">div</span> <span style="color:#4f4f4f !important">th:unless</span>=<span style="color:#009900 !important">"${openIdLocalId}"</span>></span>
                <span style="color:#006666 !important"><<span style="color:#4f4f4f !important">input</span> <span style="color:#4f4f4f !important">class</span>=<span style="color:#009900 !important">"required"</span> <span style="color:#4f4f4f !important">id</span>=<span style="color:#009900 !important">"username"</span> <span style="color:#4f4f4f !important">size</span>=<span style="color:#009900 !important">"25"</span> <span style="color:#4f4f4f !important">tabindex</span>=<span style="color:#009900 !important">"1"</span> <span style="color:#4f4f4f !important">type</span>=<span style="color:#009900 !important">"text"</span>
                       <span style="color:#4f4f4f !important">th:disabled</span>=<span style="color:#009900 !important">"${guaEnabled}"</span>
                       <span style="color:#4f4f4f !important">th:field</span>=<span style="color:#009900 !important">"*{username}"</span>
                       <span style="color:#4f4f4f !important">th:accesskey</span>=<span style="color:#009900 !important">"#{screen.welcome.label.netid.accesskey}"</span>
                       <span style="color:#4f4f4f !important">autocomplete</span>=<span style="color:#009900 !important">"off"</span>
                       <span style="color:#4f4f4f !important">th:value</span>=<span style="color:#009900 !important">"admin"</span> /></span>
            <span style="color:#006666 !important"></<span style="color:#4f4f4f !important">div</span>></span>
        <span style="color:#006666 !important"></<span style="color:#4f4f4f !important">section</span>></span>
        <span style="color:#006666 !important"><<span style="color:#4f4f4f !important">section</span> <span style="color:#4f4f4f !important">class</span>=<span style="color:#009900 !important">"row"</span>></span>
            <span style="color:#006666 !important"><<span style="color:#4f4f4f !important">label</span> <span style="color:#4f4f4f !important">for</span>=<span style="color:#009900 !important">"password"</span> <span style="color:#4f4f4f !important">th:utext</span>=<span style="color:#009900 !important">"#{screen.welcome.label.password}"</span>/></span>
            <span style="color:#006666 !important"><<span style="color:#4f4f4f !important">div</span>></span>
                <span style="color:#006666 !important"><<span style="color:#4f4f4f !important">input</span> <span style="color:#4f4f4f !important">class</span>=<span style="color:#009900 !important">"required"</span> <span style="color:#4f4f4f !important">type</span>=<span style="color:#009900 !important">"password"</span> <span style="color:#4f4f4f !important">id</span>=<span style="color:#009900 !important">"password"</span> <span style="color:#4f4f4f !important">size</span>=<span style="color:#009900 !important">"25"</span> <span style="color:#4f4f4f !important">tabindex</span>=<span style="color:#009900 !important">"2"</span>
                       <span style="color:#4f4f4f !important">th:accesskey</span>=<span style="color:#009900 !important">"#{screen.welcome.label.password.accesskey}"</span>
                       <span style="color:#4f4f4f !important">th:field</span>=<span style="color:#009900 !important">"*{password}"</span>
                       <span style="color:#4f4f4f !important">autocomplete</span>=<span style="color:#009900 !important">"off"</span>
                       <span style="color:#4f4f4f !important">th:value</span>=<span style="color:#009900 !important">"123456"</span> /></span>
            <span style="color:#006666 !important"></<span style="color:#4f4f4f !important">div</span>></span>
        <span style="color:#006666 !important"></<span style="color:#4f4f4f !important">section</span>></span>
        <span style="color:#006666 !important"><<span style="color:#4f4f4f !important">section</span>></span>
            <span style="color:#006666 !important"><<span style="color:#4f4f4f !important">input</span> <span style="color:#4f4f4f !important">type</span>=<span style="color:#009900 !important">"hidden"</span> <span style="color:#4f4f4f !important">name</span>=<span style="color:#009900 !important">"execution"</span> <span style="color:#4f4f4f !important">th:value</span>=<span style="color:#009900 !important">"${flowExecutionKey}"</span> /></span>
            <span style="color:#006666 !important"><<span style="color:#4f4f4f !important">input</span> <span style="color:#4f4f4f !important">type</span>=<span style="color:#009900 !important">"hidden"</span> <span style="color:#4f4f4f !important">name</span>=<span style="color:#009900 !important">"_eventId"</span> <span style="color:#4f4f4f !important">value</span>=<span style="color:#009900 !important">"submit"</span> /></span>
            <span style="color:#006666 !important"><<span style="color:#4f4f4f !important">input</span> <span style="color:#4f4f4f !important">type</span>=<span style="color:#009900 !important">"hidden"</span> <span style="color:#4f4f4f !important">name</span>=<span style="color:#009900 !important">"geolocation"</span> /></span>
            <span style="color:#006666 !important"><<span style="color:#4f4f4f !important">input</span> <span style="color:#4f4f4f !important">class</span>=<span style="color:#009900 !important">"btn btn-submit btn-block"</span> <span style="color:#4f4f4f !important">name</span>=<span style="color:#009900 !important">"submit"</span> <span style="color:#4f4f4f !important">accesskey</span>=<span style="color:#009900 !important">"l"</span> <span style="color:#4f4f4f !important">th:value</span>=<span style="color:#009900 !important">"#{screen.welcome.button.login}"</span> <span style="color:#4f4f4f !important">tabindex</span>=<span style="color:#009900 !important">"6"</span> <span style="color:#4f4f4f !important">type</span>=<span style="color:#009900 !important">"submit"</span> /></span>
        <span style="color:#006666 !important"></<span style="color:#4f4f4f !important">section</span>></span>
    <span style="color:#006666 !important"></<span style="color:#4f4f4f !important">form</span>></span>
<span style="color:#006666 !important"></<span style="color:#4f4f4f !important">div</span>></span>
<span style="color:#006666 !important"></<span style="color:#4f4f4f !important">body</span>></span>
<span style="color:#006666 !important"></<span style="color:#4f4f4f !important">html</span>></span></code></span></span></span></span>

搭建完成之后的目录图如下：

测试

第一步：先直接登录cas服务,默认使用的是app2的主题
第二步：访问app1.cas.com客户端1 显示客户端1的主题。
第三步：访问app2.cas.com客户端2 显示客户端2的主题。
第四步：登录 登出测试 没有问题。效果如下图：

这是我自己参考做出来的

原文地址，转载请注明出处： cas5.3.2单点登录-自定义登录页面(十四)_cas5.3自定义登录页面-CSDN博客     ©王赛超