Skip to main content

自定义登录页面

前置文档请先阅读：[用户体系建设](https://xuelangyun.feishu.cn/wiki/S4wswRnqRiXicHkNUFlcoh2knhf)

安全模式介绍

轻应用版本支持四种安全模式：关闭（免登）、企业空间管理、第三方管理、SSO

关闭 （运行时免登录）​

关闭登录之后，发布之后直接进入运行时页面（app.html）页面，不需要跳转登录页面，没有用户这一概念，右上角个人中心不可以配置登出功能。

企业空间管理​

角色权限等交由平台的企业控制台管理，进入企业控制台进行角色、权限、企业人员等配置 分别有两种登录方式，也就是说登录页可以根据需要选择使用平台默认的登录页，或者自定义搭建的登录页：

  1. 平台登录页：用户访问应用时连接时登录页面如下，也就是平台的登录页面

  1. 自定义登录页：需要搭建一个登录页，并选择使用【默认登录】组件，根据需要开启或关闭右侧的配置项即可完成配置，页面上可以使用其他前端组件进行样式或功能配置调整，例如布局、图片、按钮等。

默认登录组件，采用的是共工平台的用户体系和权限管理能力，各个配置项含义如下：

  1. 账号登录：即通过共工账号密码的方式登录，默认开启，不可更改
  2. 验证码登录：即通过手机号或邮箱接收验证码的方式登录，默认开启，可关闭
  3. 注册：即是否支持在此登录页放置注册入口，默认开启，可关闭
  4. 图形验证码：是否开启图形验证码，默认开启，可关闭

【默认登录】组件是基于平台的登录功能封装的，使用的是平台的登录认证接口，因此终端用户仍需要用平台用户身份登录，和搭建用户是同一套体系

SSO 登录​

SSO 功能指共工应用与 idaas 打通一种登录实现，目前只支持 Idaas SSO 能力。

登录页面不需要共工搭建，配置登录页面地址就可以

配置项填写说明
  1. 所有字段均填写完整才能生效
  2. 针对不同平台，参数会不一样，目前仅支持 idass 一种
  3. loginUrl 和 logoutUrl 一般是多参数 key=value&key=value&.....形式，会较长，因此采用支持拖拽的长输入框
提交键值标签名称示例值表单类型说明
clientType客户端类型idaas下拉框
（<=长度 10 字符）		目前默认就 idaas 一种
clientId客户端 IDa6c66bfa982140c5a8177ec75770e850input
<=50 字符		SSO 平台申请
clientSecret客户端密钥91047a60-7d15-47a2-8ef9-72722219d39binput
<=50 字符		SSO 平台申请
authHostSSO 服务地址http://idaas-dev-toe.xuelangyun.cominput
<=50 字符
loginUrlSSO 登录地址http://idaas-dev-toe.xuelangyun.com/#/login?response_type=code&scope=openid&state=af0ifjsadsldkj&client_id={client_id}&redirect_uri={loginCallbackUrl}input
<=300 字符		{client_id}占位符表示取之前填写的 clientId 填入,
{loginCallbackUrl}占位符表示取之前填写的 loginCallbackUrl 并 encoder 后填入
不用占位符自己直接写具体配置也是可以的
loginCallbackUrl登录回调地址/auth/idaasLogininput
<=50 字符		指向本应用，idaas 对应的回调地址,这里配置 uri,前面的 host 应用名，由运行时程序自动生成。
logoutUrlSSO 登出地址http://idaas-dev-toe.xuelangyun.com/oidc/session/end?post_logout_redirect_uri={logoutCallbackUrl}&id_token_hint=input
<=300 字符		{logoutCallbackUrl}占位符表示取之前填写的 loginCallbackUrl 并 encoder 后填入
不用占位符自己直接写具体配置也是可以的
logoutCallbackUrl登出回调地址/app.htmlinput
<=50 字符		指向本应用
authTokenUri获取 TOKEN/oidc/tokeninput
<=50 字符		根据 code 换取 token 的地址
备注： token 接口返回用户少量信息，不同平台不一样，如 uid，name 等。
authUserInfoUri获取用户信息/oidc/meinput
<=50 字符		查询用户信息的地址
备注：获取用户信息的专业接口
sync_user_switch是否同步用户当 sso 登录跳转过来的用户不存在时，是否自动同步此用户信息

操作步骤如下：

  1. 应用设置中，安全模式设置为 SSO，按以上填写要求填写配置项

  1. 发布应用

现在访问应用可以看到已经是接入 SSO 登录的模式了，使用 idaas 登录页登录

第三方管理​

在应用安全模式中选择第三方管理模式，并且关闭【应用内置组织架构及权限】开关。需要配置如下几项：

  1. 登录页配置：选择由自定义登录元件配置出来的登录页面，配置方式见后文【自定义登录】说明。
  2. 资源权限接口： 用于从外部系统获取用户及权限资源数据时使用，填写外部系统实现的自定义权限接口。
  3. 授权标识：用于认证的 key。

登录页面配置​

自定义登录元件的功能类似数据视图，在内部放一系列输入元素构成一个表单，用于填写用户信息。

数据源可设置为逻辑或连接器，通过按钮提交表单数据传给登录接口，实现登录验证。

如下图所示，账号、密码、验证码都是单行文本输入框

验证码可以通过连接器获取，用图片组件展示

登录按钮配置​

登录按钮配置点击事件（推荐使用高级函数配置）；

点击后进行表单校验 -> 调用登录接口 -> 登录成功 SAVETOKEN 方法交换 token -> 登录失败处理。

配置的代码内容如下，可以复用在第三方登录页面场景，可直接复制修改相应组件 code 即可。

注意 SAVETOKEN({token: 'xxxxx' }) 是共工提供的一个内置方法，在高级函数里面可以直接调用，这个方法主要是将连接器配置的登录接口返回值传给共工后端

// 1. 表单校验
EditableLogin_WczEM.validate().then(() => {
// 2. 校验成功之后调用登录接口连接器
 API_externalLogin.request({
         // 入参 账号 密码 验证码等
        "username":EditableLogin_WczEM.getFormModel().count,
        "password": EditableLogin_WczEM.getFormModel().passWord,
        "code" : EditableLogin_WczEM.getFormModel().code,
        "uuid" : DataView_aWLID.getFormModel().uuid
    }).then(res => {
    // 4. 登录接口调用回调处理 失败 提醒失败信息
        if(res.error || (res.status == 400)) {
            MESSAGE({
                type: 'warning',
                content: res.message
            });
            // 刷新验证码
            DataView_aWLID.reload()
        } else {
        // 3. 成功之后调用 SAVETOKEN()方法，这一步不可缺少！
            SAVETOKEN(res.data)
        }
    })
})

// 此代码段可以复用在第三方登录页面场景，可直接复制修改相应组件名即可

除登录组件和上面说明的登录事件之外，其他页面组件的用法和普通页面中一致，可以用于实现登录页上的其他样式或功能。