CAS统一登录认证(14): 定制自己的sso登录界面

1. cas允许定制自己的登录界面,并绑定到某个客户登录,不同的cas客户可以绑定不同的登录界面:

2.  定制界面相关文件:

/webapps/cas/WEB-INF/classes/templates/linbsoft/casLoginView.html 界面form模板
/webapps/cas/WEB-INF/classes/services/www-100000009.json   客户应用验证文件
/webapps/cas/WEB-INF/classes/linbsoft.properties  定制界面配置文件
/webapps/cas/WEB-INF/classes/static/themes/linbsoft/css/linbsoft.css  定制css文件

以上文件和文件夹没有的话,就创建它

3. /webapps/cas/WEB-INF/classes/services/www-100000009.json   客户应用验证文件内容

 4.  /webapps/cas/WEB-INF/classes/linbsoft.properties   定制界面配置文件

#cas.javascript.file=/themes/linbsoft/js/cas.js
cas.standard.css.file=/css/cas.css
#自己的样式
cas.myself.css=themes/linbsoft/css/linbsoft.css
cas.page.title=linbsoft cas form
 

5.  /webapps/cas/WEB-INF/classes/templates/linbsoft/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"/>
</head>
<body>
<div>
    <form method="post" th:object="${credential}">
        <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>
        <div th:if="${#fields.hasErrors('*')}">
            <span th:each="err : ${#fields.errors('*')}" th:utext="${err}"/>
        </div>
    </form>
</div>
</body>
</html>

6.访问该sso界面

可以正常登录使用

猜你喜欢

转载自blog.csdn.net/oLinBSoft/article/details/82726755
今日推荐