如何定制苍穹登录页

用户场景

在二开过程中，标准产品的前端无法满足具体的业务需求开发时，需要引入其他的JS， 登录页支持扩展JS脚本，开发通过该脚本文本可以写入js内容，前端会将dom元素的id和执行函数的方法名暴露出来。 通过扩展JS 客户可以自定义页面的内容，也可实现单点登录等功能。

如果你想定制页面, 例如在某个地方加个图片、在登录页轮播展示图片、想让用户点击logo后跳转到特定的网站、实现第三方的单点登录、改变一下输入框的颜色、根据域名显示不同的图片都可以使用扩展js实现。

功能介绍

苍穹登录页支持两种定制方式，可根据需求选择其中的一种或两种。

一.在登录页配置项里修改登录页(这种方式比较方便)

在平台‘系统管理->登录页配置’里配置登录页相关内容，如图标注了各个部分对应的登录页区域 。

二.通过引入脚本的方式修改登录页(这种方式比较灵活支持各种场景)

 1. 通过扩展JS 客户可以自定义页面的内容，也可实现单点登录等功能。如下图, 将页面上的图片换成了视频。

 2. 将登录页开放出去，让客户可以自己定制登录页的内容。拿到了dom元素的id就可以更改页面的结构、样式以及行为。如下图, 为视频添加了一个点击事件,点击视频alert了一串文字。

操作步骤

1.如图我们暴露了五个DOM元素的id，左侧图片imgPart、右侧整体formpart、右下脚链接linksBox、右侧输入框区域content、右侧小图片区域logo，通过操作相应dom的id可以实现登录页元素的个性化替换。移动端支持扩展js但并未暴露dom元素的id。

2.编写代码

• 移动端扩展js文件命名为login_index_m.js ，PC端扩展js文件命名为login_index.js。

• 将代码写在loginBeforeLoad里会在登录代码执行之前执行，将代码写在loginAfterLoad里会在登录页面加载完成后执行。

• 通过window.__kd_custome_js__可获得当前扩展js的位置。

• 请注意如果loginBeforeLoad不为空但是内部没有执行callback那么登录页面将不会渲染。

以下是移动端代码示例：

(function () {  
    // 登录代码加载前调用  
    window.loginBeforeLoad = function (callback) {    
        //   ... do something
        // 如果需要继续执行登录的代码则执行callback 否则不执行 注意:如果不执行callback登录页面不渲染    
        callback()  
    }  
    // 登录代码加载后调用  
    window.loginAfterLoad = function (key) {    
        if (key === 'other') {      
            var other = function () {        
                console.log('kingdee')      
            }      
            return other    
        }  
    }
})()

以下是PC端代码示例：

(function () {  
    // 登录代码加载前调用  
    window.loginBeforeLoad = function (callback) {    
        //   ... do something    
        // 如果需要继续执行登录的代码则执行callback 否则不执行 注意:如果不执行callback登录页面不渲染    
        callback()  
    }  
    /* 登录代码加载后调用   
        *左侧容器部分暴露了盒子的id(imgPart) 二开可以获取这个id并根据需求修改这个盒子的内容   
        *将方法挂载到window.loginAfterLoad 在页面加载完后会调用这个方法   
    */  
    window.loginAfterLoad = function (key) {    
        // 修改左侧图片部分    
        if (key === 'imgPart') {      
            var imgPart = function () {        
                var banner = document.getElementById('imgPart')        
                var currentUrl = window.__kd_custome_js__.slice(0, window.__kd_custome_js__.indexOf('/login_index.js')) + '/img/'        
                var videoUrl = currentUrl + 'kingdee.mp4'        
                var video = document.createElement('video')        
                video.src = videoUrl        
                video.autoplay = true        
                video.loop = true