文档首页> 应用魔方 AppCube> 最佳实践> 用户与权限> 如何实现业务用户登录
更新时间:2022-10-27 GMT+08:00
分享

如何实现业务用户登录

业务用户的登录方式

业务用户登录AppCube有两种登录方式:后台登录和前台登录。

  • 业务用户在后台登录时,是使用自定义的服务编排来调用“login”脚本,查询登录帐号密码,判断当前登录的帐号密码是否正确来实现业务用户后台登录功能。
  • 业务用户在前台登录时,需要先在线下开发一个登录组件,并上传到高级页面,并在高级页面中配置组件桥接器中的数据。最后在页面中输入登录帐号密码,通过调用“用户登录服务编排”,实现业务用户页面登录功能。

业务用户的登录机制

业务用户前台登录和后台登录,在登录过程中的服务逻辑实现过程如下:

  1. 通过调用“帐号密码校验”脚本,查询登录帐号密码,判断当前登录的帐号密码是否正确。
  2. 如果判断帐号密码错误,直接执行“帐号密码错误”。帐号密码正确,继续判断是否有验证码。
  3. 如果判断当前登录没有验证码,则直接执行登录。当前有验证码,则继续判断验证码是否正确。
  4. 如果判断验证码正确,则执行登录操作,验证码错误,则执行验证失败。

业务用户帐号密码校验(登录)脚本

业务用户无论是使用“前台登录”还是“后台登录”,实现业务用户登录的基础都需要创建一个帐号密码校验脚本。以“A”应用为例,介绍如何创建帐号密码校验脚本。

  1. 在“我的应用”中,单击“A”应用,进入应用开发页面。
  2. 将鼠标放在“Script”上,单击界面上出现的“+”,在弹出菜单中选择“脚本”。

    图1 脚本菜单

  3. 选中“创建一个新脚本”,“名称”设置为“login”,单击“添加”。

    图2 新增脚本

  4. 在代码编辑器中,插入如下脚本代码。

    import * as buffer from"buffer";
    import * as crypto from"crypto";
    import * as db from"db";
    //定义入参结构,帐号的用户名、密码为必需字段。若根据业务需要,需其校验他字段(例如验证码),则根据帐号密码字段的格式进行新增即可。
    @action.object({type:"param"})
    export class ActionInput{
        @action.param({type:'String', required:true, label:'string'})
        username:string;    //用户名
        @action.param({type:'String', required:true, label:'string'})
        password:string;    //密码
        @action.param({type:'String', required:true, label:'string'})
        captcha:string;     //验证码,本脚本只是为了校验帐号密码,因此用不到验证码,验证码也不是必需字段。在实现业务用户后台登录的Flow中,Flow调用此脚本,需要判断验证码,所以在此脚本中添加了验证码字段。
    }
    //定义出参结构,结构中的字段可以根据业务需要按下方样例结构进行添加或减少。
    @action.object({type:"param"})
    export class ActionOutput{
        @action.param({type:'String'})
        msg:string;//登录信息    
        @action.param({type:'String'})
        username:string;//用户名    
        @action.param({type:'String'})
        userId:string;//用户ID
        @action.param({type:'String'})
        captcha:string;//验证码
    }
    //使用数据对象PortalUser
    @useObject(['PortalUser'])
    @action.object({type:"method"})
    export class Login{
    //定义接口类,接口的入参为ActionInput,出参为ActionOutput    
        @action.method({ input:'ActionInput', output:'ActionOutput'})
        public login(input:ActionInput):ActionOutput{
            let out =new ActionOutput();
            //新建出参ActionOutput类型的实例,作为返回值        
            let error =new Error();
            //新建错误类型的实例,用于在发生错误时保存错误信息        
            try{
                out.captcha = input.captcha;
                let s = db.object('PortalUser');
                let condition ={
                "conjunction":"AND",
                "conditions":[{
                    "field":"usrName",
                    "operator":"eq",
                    "value": input.username
                    }]
                };
                let user = s.queryByCondition(condition);
                if(user && user.length ==1){
                    if(validate(user[0].passwordSalt, user[0].userPassword, input.password)){
                        out.msg ="登录成功!";
                        out.username = user[0].usrName;
                        out.userId = user[0].id;
                    }else{
                        out.msg ="帐号或者密码错误!";
                    }
                }else{
                    out.msg ="帐号或者密码错误!";
                }
            }catch(error){
                console.error(error.name, error.message);
                out.msg = error.message;
            }
            return out;
        }
    }
    function _salt(password:string, saltBuf: buffer.Buffer, encoding: buffer.Encoding= buffer.Encoding.Base64):string{
        const passwordBuf = buffer.from(password)
        const crypt = crypto.pbkdf2(passwordBuf, saltBuf,1000,32, crypto.Hashs.SHA1)
        return crypt.toString(encoding)
    }
    function validate(salt:string, userSaltedPassword:string, password:string, encoding: buffer.Encoding= buffer.Encoding.Base64):boolean{
        const saltBuf = buffer.from(salt, encoding);
        const saltedPassword = _salt(password, saltBuf, encoding);
        return saltedPassword === userSaltedPassword
    }

  5. 单击编辑器上方的,保存脚本。
  6. 测试脚本能否正常执行。

    1. 单击编辑器上方的,执行脚本。
    2. 在界面底部的输入参数中,输入如下测试数据,单击

      其中,“test_cs”、“{XXXXXXXX}”为注册的业务用户帐号和密码,“captcha”验证码非必填项为空。

      在业务配置中心创建的业务用户和使用脚本创建的业务用户不能通用,故此处设置的业务用户(如test_cs)不能为在业务配置中心创建的业务用户。业务配置中心创建的业务用户,只能在默认登录页中使用。

      {
      "username":"test_cs",
      "password":"{XXXXXXXX}",
      "captcha":""
      }

      执行成功后,在“输出参数”中可参看结果。

      图3 返回结果

  7. 测试成功后,单击编辑器上方的,启用该脚本。

如何实现业务用户后台登录

业务用户在后台登录时,是使用自定义的服务编排来调用“帐号密码校验”脚本,查询登录帐号密码,判断当前登录的帐号密码是否正确来实现“业务用户”后台登录功能的。“业务用户登录”服务编排开发的大致过程为:先拖拽1个脚本图元,3个决策图元以及3个赋值图元,再分别配置各个图元属性,然后配置各个图元之间连线类型,最后保存启用。

下面以“A”应用为例,向您介绍如何在后台实现业务用户登录。

  1. 在“我的应用”中,单击“A”应用,进入应用开发页面。
  2. 在开发页面中,单击“目录”,创建一个Flow目录。

    图4 创建目录

  3. 将鼠标放在“Flow”上,单击界面上出现的“+”,在弹出菜单中选择“服务编排”。

    图5 选择服务编排

  4. 选中“创建一个新的服务编排”,“标签”和“名称”设置为“login”,类型设置为“Autolaunched Flow”,单击“添加”。

    图6 创建服务编排

  5. 定义服务编排用到的变量。

    1. 单击,展开全局上下文,再单击“变量”后的,设置参数名称为“username”。
      图7 新增变量
    2. 重复上一步,定义表1中其他变量。
      表1 服务编排变量说明

      名称(变量名称,唯一标识)

      数据类型

      username

      文本

      password

      文本

      captcha

      文本

      msg

      文本

      userId

      文本

      loginMsg

      文本

      此服务编排是用来实现业务用户登录逻辑的,所以在这个服务编排中的变量需要包含业务用户帐号密码校验脚本(在业务用户帐号密码校验(登录)脚本创建的)中使用的全部参数字段(包含输入参数和输出参数)。若自定义登录脚本中包含额外字段,在服务编排的变量中也需要相应添加。

    3. 单击“公式”后的,在左侧公式弹窗中,设置“名称”为“portalUserLogin”,“表达式”为“PORTALUSERLOGIN({!username})”,单击“保存”。
      图8 添加公式变量“portalUserLogin”
    4. 参考上一步,创建表2中公式变量“verifyCode”。
      表2 公式变量说明

      名称

      表达式

      portalUserLogin

      PORTALUSERLOGIN({!username})

      verifyCode

      VERIFYCODEWITHTYPE({!captcha},"login")

  6. 拖拽图元到服务编排画布,并配置图元的基本属性。

    1. 从图元区分别拖拽脚本(1个)、决策(3个)、赋值(3个)图元到画布中,图元排列如下图所示。
      图9 图元排列
    2. 选中“Script0”图元,在右侧基本信息中,设置“标签”为“查询用户”。
    3. 参考上一步,设置其他图元的“标签”属性,具体值如下表所示。
      表3 设置其他图元标签属性

      名称(变量唯一标识,不需要修改)

      标签

      Decision0

      判断帐号密码

      Decision1

      判断是否包含验证码

      Decision2

      校验验证码

      Assignment0

      帐号密码错误

      Assignment1

      执行登录

      Assignment2

      验证失败

      图10 修改后图元

  7. 配置“查询用户”脚本图元。

    1. 单击,指定图元对应的脚本名称 (SYL__login),并配置脚本的输入输出参数。
      图11 指定脚本

      对应的脚本是业务用户帐号密码校验(登录)脚本中创建发布的帐号密码校验脚本。若此处无法选择到需要的脚本,请检查创建的脚本是否已发布。

    2. 单击“全局上下文”,显示变量列表,从“变量”中,拖拽“username”、“password”和“captcha”到“输入参数”下对应的“源”输入框中,在“输出参数”下,单击4次“新增行”,依次添加下拉选项中的输出参数字段,并从“变量”中拖拽相应的字段到“目标”输入框下,字段与变量对应关系如下图所示。

      脚本图元中,输入参数、输出个数和指定脚本中需要的输入参数字段数是一致的。若自定义脚本的输入参数有额外字段,额外的字段也需要同样操作。

      请直接从全局上下文拖拽“变量”到对应的输入输出参数下,如果手动输入请确认输入参数与全局上下文中变量的值一致。

      图12 拖拽脚本的输入输出参数

  8. 配置“判断帐号密码”决策图元。

    1. 选择“判断帐号密码”图元,在右侧单击图标,修改“默认”的“名称”为“CheckFail”。
      图13 修改“默认”结果名称
    2. 单击“新增”,增加一个可编辑的结果,修改结果为“CheckSuccess”,在“可视”下单击“新增行”,并拖拽变量中的“msg”到“资源”下,设置“比较符”为“==”,“值”为“"登录成功!"”。
      • 请直接从全局上下文拖拽变量“msg”到“资源”下,如果手动输入请确认输入参数与全局上下文中变量的值一致。
      • “登录成功!”需要与“login”登录脚本中的输出参数一致。
      图14 修改可编辑的结果

  9. 配置“判断是否包含验证码”决策图元。

    1. 选择“判断是否包含验证码”图元,在右侧单击图标,修改“默认”的“名称”为“hasVerifyCode”。
      图15 修改默认结果名称
    2. 单击“新增”,增加一个可编辑的结果,修改结果为“noVerifyCode”,在“可视”下单击“新增行”,并拖拽变量中的“captcha”到“资源”下,设置“比较符”为“==”,“值”为“""”。
      图16 修改可编辑的结果

  10. 配置“校验验证码”决策图元。

    1. 选择“校验验证码”图元,在右侧单击图标,修改“默认”的“名称”为“verifyCodeFail”。
      图17 修改“默认”名称
    2. 单击“新增”,增加一个可编辑的结果,修改结果为“verifyCodeSuccess”,在右侧选择“公式”,并从全局上下文中,拖拽“verifyCode”到“公式”下。
      图18 修改可编辑的结果

  11. 配置“帐号密码错误”赋值图元。

    1. 选择“帐号密码错误”图元,在右侧单击图标,单击“新增行”。
    2. 从全局上下文的“系统变量”中,拖拽“$Flow.ResMsg”到“赋值”下,并设置“操作符”为“=”,拖拽“msg”到“值”。
    3. 单击“新增行”,拖拽“系统变量”下的“$Flow.ResCode”到“赋值”的“变量”下,设置“操作符”为“=”,设置“值”为“"1"”。

    请直接从全局上下文拖拽变量到“值”下的对应位置,如果手动输入请确认输入参数与全局上下文中变量的值一致。

    图19 配置“帐号密码错误”图元

  12. 配置“执行登录”赋值图元。

    1. 选择“执行登录”图元,在右侧单击图标,单击4次“新增行”。
    2. 从全局上下文,拖拽“msg”等字段到“赋值”的“变量”下,并设置“操作符”为“=”,然后再拖拽“值”下的各个值,具体字段对应关系,如下图所示。
      图20 拖拽“执行登录”赋值的变量及值

      请直接从全局上下文拖拽变量到“值”下的对应位置,如果手动输入请确认输入参数与全局上下文中变量的值一致。

      表4 变量与值对应关系

      变量

      操作符

      loginMsg

      =

      portalUserLogin

      msg

      =

      msg

      username

      =

      username

      userId

      =

      userId

  13. 配置“验证失败”赋值图元。

    1. 选择“验证失败”图元,在右侧单击图标,单击“新增行”。
    2. 从全局上下文“系统变量”,拖拽“$Flow.ResMsg”、“$Flow.ResCode”到“赋值”下,并设置操作符为“=”,分别设置“值”为“"帐号或者密码错误!"”、“"1"”。
    表5 赋值

    变量

    操作符

    $Flow.ResMsg

    =

    "帐号或者密码错误!"

    $Flow.ResCode

    =

    "1"

    图21 配置“验证失败”赋值图元

  14. 拖拽图元连线,并配置连线属性。

    1. 在画布上,把鼠标放在起点图元图元上,从“+”拖动鼠标,在起点图元和“查询用户”图元间增加连线;即将当前脚本设置为服务编排的起始节点。
    2. 依次在“查询用户”、“判断帐号密码”、“判断是否包含验证码”、“执行登录”图元直接拖拽连线。
      图22 拖拽连线
    3. 单击“判断帐号密码”与“判断是否包含验证码”图元之间的连线,再右侧属性单击,在“连线”中修改“连线类型”为“CheckSuccess”。
      图23 选中连线
      图24 修改连线类型
    4. 单击“判断是否包含验证码”与“执行登录”图元之间的连线,再右侧属性单击,在“连线”中修改“连线类型”为“noVerifyCode”。
    5. 从“判断帐号密码”图元上拖拽一条连线到“帐号密码错误”图元。
    6. 从“判断是否包含验证码”图元上拖拽一条连线到“校验验证码”图元。
    7. 从“校验验证码”图元上拖拽一条连线到“验证失败”图元。
    8. 从“校验验证码”图元上拖拽一条连线到“执行登录”图元,并设置该连线的“连线类型”为“verifyCodeSuccess”。

    连线拖拽完成,如下图所示。

    图25 拖拽图元连线

  15. 定义服务编排的输入、输出参数,并保存服务编排。

    1. 鼠标在画布空白处点一下,单击右侧,设置服务编排的输入输出参数,如下图所示。
      图26 拖拽服务编排的输入输出参数
      • 服务编排的输入参数是用来执行服务编排时输入的参数,同时也是执行帐号密码校验脚本时的输入参数。所以当帐号密码校验脚本的有额外的输入参数字段,服务编排的输入参数也需要同步增加。
      • 服务编排的输出参数是执行帐号密码校验脚本时返回的参数,所以当帐号密码校验脚本的有额外的输出参数字段,服务编排的输出参数也需要同步增加。
    2. 单击服务编排页面上方的,保存服务编排。

  16. 测试服务编排能否正常执行。

    1. 单击服务编排页面上方的,进入服务编排测试页面。
      图27 服务编排测试页面
    2. 在“Flow Run”界面中输入测试数据,单击“运行”。
      其中,“test_cs”、“{XXXXXXXX}”为业务用户的帐号和密码。
      {
       "username": "test_cs",
       "password": "{XXXXXXXX}",
       "captcha": ""
       }

      执行成功后,界面上会返回设备对象中的全部信息,示例如下:

      图28 返回值示例

      返回值提示登录成功,完成业务用户的登录。业务用户登录成功后,返回AppCube,刷新页面后在页面右上角可以看到当前登录的用户已变成在服务编排中输入的业务用户。

  17. 登录测试成功后,再次使用租户帐号登录AppCube,进入“A”应用,选择刚刚测试成功的“login”服务编排进入编辑器,单击编辑器上方的,启用并发布服务编排。
  18. 服务编排发布后,单击“A”应用开发页面左下角的“服务”,进入“自定义访问控制页面”。

    图29 服务

  19. 单击“新建”,新建公共接口。

    图30 新建公共接口

    在新建公共接口时,在资源中选择已发布的服务编排。URL填写的内容是定义新建的公共接口提供外部访问的URL。

  20. 新建公共接口完成后,参考如何给接口添加业务权限凭证中操作,给测试成功的服务编排添加业务权限凭证。

    图31 给服务编排添加业务权限

如何实现业务用户页面登录

业务用户在前台登录时,需要先在线下开发一个登录组件,并上传到高级页面,并在高级页面中配置组件桥接器中的数据。最后在页面中输入登录帐号密码,通过来调用“用户登录服务编排”,实现“业务用户”页面登录功能。

以“A”应用为例,介绍如何开发登录页面,具体流程图32

图32 应用登录页面开发流程
  1. 开发自定义组件。

    本案例中提供已经开发好的自定义登录组件userLogin.zip;如果想要了解自定义登录组件的开发方法,请参考2

    将登录组件拖入到高级页面后,单击选中“userLogin”组件,在右侧属性设置的“属性”页签最下端“Parameters”配置项下,设置“login API”为“/SYL__A/1.0.0/Flow_login”。

    图33 添加登录服务URL
    “login API”为登录接口的URL后半段,请根据实际情况修改,登录接口在如何实现业务用户后台登录章节创建。
    图34 loginAPI地址

  2. 线下开发自定义登录组件。

    1. 在左侧资产下的组件模板中,单击“widgetVueTemplate”,再单击“下载”。
      图35 下载组件模板
    2. 输入组件名称,单击“保存”,将组件模板保存到本地,并解压。
      图36 输入组件名称
    3. 查看解压后的组件目录。
      目录结构如图所示,其中userLogin.js文件是写vue业务逻辑的代码,userLogin.ftl用于写html代码,userLogin.css用于写样式代码,userLogin.editor.js以及packageinfo.json是配置文件。
      图37 目录结构

      其中,userLogin.js 、userLogin.ftl、userLogin.css文件需要用户自己进行代码开发,userLogin.editor.js以及packageinfo.json配置文件的修改请参照45

    4. 在本地编辑器中打开文件夹,把userLogin.editor.js文件中的config代码改为如下代码,用于配置桥接器。
      config: [
                      {
                          type: 'connectorV2',
                          name: 'FlowConnector',
                          label: 'Flow Connector',
                          model: 'ViewModel',
                      },
                      {
                          type: 'connectorV2',
                          name: 'common.GetConnector',
                          label: 'View API Get Connector',
                          model: 'ViewModel',
                      },
                      {
                          type: 'connectorV2',
                          name: 'common.PostConnector',
                          label: 'View API Post Connector',
                          model: 'ViewModel',
                      },
                      {
                          type: 'connectorV2',
                          name: 'common.PutConnector',
                          label: 'View API Put Connector',
                          model: 'ViewModel',
                      },
                      {
                          type: 'connectorV2',
                          name: 'common.DeleteConnector',
                          label: 'View API Delete Connector',
                          model: 'ViewModel',
                      },
                  ]

    5. 将packageinfo.json文件中修改“requires” 代码块内容为如下加粗内容。
      {
          "widgetApi": [
              {
                  "name": "userLogin"
              }
          ],
          "widgetDescription": "",
          "authorName": "",
          "localFileBasePath": "",
          "requires": [
              {
                  "name": "global_Vue",
                  "version": "100.8.3"
              },
              {
                  "name": "global_Element",
                  "version": "101.0.3"
              },
              {
                  "name": "global_VueI18n",
                  "version": "100.7.3"
              },
              {
                  "name": "global_VueRouter",
                  "version": "1.0.1"
              }
          ]
      }

    6. 将修改后的配置文件和自定义开发的文件压缩成一个zip包。压缩后,即可根据需要上传到AppCube,供高级页面使用。

      用户开发登录组件代码,可参考已开发好的userLogin.zip中代码进行开发。

  3. 上传自定义登录组件。

    1. 在AppCube开发环境首页“项目 > 我的应用”中,单击“A”应用。
    2. 在左侧列表中,单击,选择“高级页面 > 组件”,进入组件页面。
      图38 组件列表页面
    3. 单击“提交新组件”,进入提交新组件页面。
    4. 单击“上传”,选择之前下载的“userLogin.zip”包(名称自动生成为上传包的名称“userLogin”),并将在“发行说明”中填写“自定义登录组件”,然后单击“提交”进行上传。
      图39 上传组件

      上传成功后,在后续创建的高级页面中,即可使用该自定义组件。

  4. 组装“业务用户登录”页面。

    “业务用户登录”页面是一个高级页面,主要是通过引用上传的自定义登录组件,再配置相关参数,来实现登录功能。

    在组装业务用户登录页面时,需要配置从登录页面登录成功后跳转的页面,所以需要提前创建一个高级页面。在本案例中,创建了一个Home页面。Home页面中没有实际数据,在Home页面中拖拽了几个图表组件,然后保存发布出来样例页面。在实际开发过程中,可以根据业务需要,选择跳转到需要的页面,或者执行自定义的业务逻辑。
    图40 Home页面
    1. 创建高级页面。
      1. 进入AppCube开发环境首页,在“项目 > 我的应用”中,单击“A”应用。
      2. 单击,进入工作目录,并创建一个Page目录。
        图41 创建Page目录
      3. 将鼠标放在“Page”上,单击界面上出现的“+”,在弹出菜单中选择“高级页面”。
        图42 创建高级页面
      4. 设置“页面标题”和“页面路径”为“Login”,并选择“绝对布局”,单击“添加”。
        图43 添加高级页面
    2. 拖拽自定义组件“userLogin”到页面,“userLogin”组件即是之前上传的自定义登录组件。

      单击左上角,打开UI列表,再单击“全部”,然后单击“自定义”页签,搜索到“userLogin”组件,将其拖进页面编辑区。

    3. 设置自定义组件“userLogin”的位置属性。
      1. 将“userLogin”组件拖拽到页面编辑区后,会在右侧显示该组件的属性配置面板。
      2. 在“位置”中,设置“距离左端”、“距离顶端”为“0”,“宽度”为“1920”,“高度”为“1080”。
        图44 设置组件位置
      3. 组件位置、样式等属性修改完成后,单击页面上方的,保存页面修改。
        图45 样式修改完成的登录页面
      4. 在目录中,将鼠标放在“Login”上,单击“...”,然后选择“设置”,在弹窗中设置页面的拉伸属性,再单击“保存”。
        图46 页面设置
        图47 设置页面拉伸
    4. 设置自定义组件“userLogin”的“数据”中的桥接器。
      1. 将登录组件拖入到高级页面后,单击选中“userLogin”组件,在右侧属性设置的“属性”页签最下端“Parameters”配置项下,设置“login API”为“/SYL__A/1.0.0/Flow_login”。
        图48 添加登录服务URL

        “login API”为登录接口的URL后半段,其中“SYL”为命名空间,“A”为应用名,请根据实际情况修改,登录接口是在如何实现业务用户后台登录章节创建。

        图49 loginAPI地址
      2. 单击“数据”,然后单击“View API Get Connector”,设置“桥接器实例”为“通用AppCube API数据桥接器”,“数据类型”为“动态数据”,“Request Method”为“get”,如下图所示。
        图50 设置桥接器
        • 桥接器实例:调用的桥接器名称。
        • Request Method:调用的方法名,如get(查询)、put(修改)、post(增加)、delete(删除)。
        • 调用周期:此处不用配置。调用周期是每隔多少秒调用一次后台接口或者获取静态数据,默认配置为“0”,表示只调用一次或者只获取一次静态数据。
      3. 参考上一步,分别设置下图中框选的桥接器实例。
        图51 设置其他桥接器
        表6 桥接器实例配置

        数据名

        桥接器实例

        数据类型

        Request Method

        View API Post Connector

        通用AppCube API数据桥接器

        动态数据

        Post

        View API Put Connector

        通用AppCube API数据桥接器

        动态数据

        Put

        View API Delete Connector

        通用AppCube API数据桥接器

        动态数据

        Delete

    5. 设置自定义组件“userLogin”的“事件”,使自定义组件与其他页面关联。
      图52 需要配置的事件
      1. 单击“go Homepage”后的齿轮图标,选择新建动作的类型。

      2. 选择“新建动作 > 默认 > 页面跳转”,进入跳转编辑页面。
        图53 编辑页面跳转

        这里选择的内部页面是之前创建并发布的“Home”,在实际开发过程中,可以根据业务需要,选择跳转到需要的页面,或者执行自定义的业务逻辑。

    6. 在上述步骤完成后,单击Login页面上方的,保存页面,再单击,发布页面。
    7. 页面发布成功后,单击,即可预览发布的登录页面。
      图54 预览的登录页面

      当前登录页中,输入业务用户帐号及密码,单击“登录”的登录逻辑是通过“自定义登录”组件,调用用户登录服务编排完成的。

    8. 在预览的登录页面中,输入配置了权限的业务用户的帐号密码,单击登录后,若页面跳转到“Home”页面,则业务用户登录成功。
      图55 登录成功后的Home页面

分享:

    相关文档

    相关产品