魔笔平台提供了三方快捷登录模块,支持常见三方平台的OAuth快捷登录,该模块可使您的用户直接通过三方平台账号登录魔笔应用,无需在应用重新注册账号。
三方快捷登录模块组成
类别 | 名称 | 描述 |
页面 | 三方快捷登录配置页 | 在该页面对钉钉、阿里云、微信、企业微信等进行三方登录的初始化设置。 通常,您应当在您的应用控制台集成该页面,并通过账号和权限对配置的安全性进行保障。 该页面一般无需修改。 |
登录页 | 模块预置的登录页,提供三方登录快捷入口。您可使用该页面进行三方登录调试,参考该页面自定义自己的登录页,或者,直接将该页面集成到您的应用中。 | |
登录加载页 | 三方平台返回临时code并获取用户信息时的默认加载页,此时用户还未登录成功,一般无需关注和修改。 | |
登录成功页 | 三方平台用户认证成功后跳转的默认页面,一般为站点首页。如果您不做设置,登录成功后将跳转到此页面。 | |
登录失败页 | 三方平台用户认证失败后跳转的默认页面,一般无需关注和修改。 | |
前端逻辑流 | - | 一般无需关注和修改。 |
后端逻辑流 | 获取阿里云授权页面 | 该逻辑流绑定登录页中的阿里云icon,用于获取阿里云授权页面。 如果需要,您可以在自定义的登录页,重新建立该逻辑流与对应阿里云登录入口的绑定。 |
获取钉钉授权页面 | 该逻辑流绑定登录页中的钉钉icon,用于获取钉钉授权页面。 如果需要,您可以在自定义的登录页,重新建立该逻辑流与对应钉钉登录入口的绑定。 | |
获取微信授权页面 | 该逻辑流绑定登录页中的微信icon,用于获取微信授权页面。 如果需要,您可以在自定义的登录页,重新建立该逻辑流与对应微信登录入口的绑定。 | |
获取企业微信授权页面 | 该逻辑流绑定登录页中的企业微信icon,用于获取企业微信授权页面。 如果需要,您可以在自定义的登录页,重新建立该逻辑流与对应企业微信登录入口的绑定。 | |
- | 其他后端逻辑流一般无需关注和修改。 | |
数据模型 | OauthConfig | 配置存储三方平台的相关配置信息。 |
三方登录用户 | 用户存储三方登录用户相关信息,和魔笔三方登录实体关联。 | |
token | 内存实体,仅自定义逻辑流使用。 | |
登录用户 | 内存实体,仅登录页配置登录上下文使用。 | |
枚举 | 三方平台 | 一般无需关注和修改。 |
三方平台_EN | 一般无需关注和修改。 |
操作步骤
让应用支持三方登录(如钉钉/阿里云、企业微信)主要操作流程包括以下步骤。
三方登录模块仅支持:钉钉、阿里云、微信、企业微信四种开放平台。
引用三方登录平台模块前,需先完成以下两步操作:
在对应的三方开放平台注册,并获取OAuth登录所需要的ID和secret,详细说明请参见参考文档。
在三方开放平台,设置回调域名白名单。钉钉开放平台中的回调域名设置,如下图所示:
应用引用三方平台登录模块
登录魔笔。
在顶部菜单栏选择应用管理,在右上角搜索框中输入目标应用,例如TEST。
在指定的应用卡片中单击进入设计器,进入应用开发页面(Mobi Studio)。
在左侧功能区选择,展开右侧栏。
单击添加引用模块,打开系统引用模块页面。
在系统模块页签下,选中模块名称为三方快捷登录模块,单击操作列的引用。
即可引用模块到项目中。
页面路由配置
当前“选择页面”下的页面均为“三方快捷登录模块”页面,用于可以自定义页面,“**”为占位符,可以不配置。但一旦配置后,所有的占位符均一致,其余配置不变。
在左侧功能区选择 > 页面路由,单击添加页面路由,打开添加路由配置页面。
配置登录成功页。此配置中URL路径配置为:“/link/**/success”,必须以“/success”结尾。
配置登录失败页。此配置中“URL路径”配置为:“/link/**/error”,必须以“/error”结尾。
配置登录加载页。
URL路径配置为:“/link/**/auth”,需要以“/auth”结尾。
前端逻辑流关联登录加载页发起三方登录。
配置登录页。此配置中“URL路径”配置为:“/link/**/login”,必须以“/login”结尾。
配置快捷登录配置页。此配置中“URL路径”配置为:“/link/**/config”,必须以“/config”结尾。
配置完成后查看页面路由是否包含如下配置。
配置角色
在左侧功能区选择 ,单击添加角色。根据业务需求,为角色添加权限,此处以添加普通用户为例。
添加完成后,为角色配置角色映射。
映射角色选择三方快捷登录模块的OAuth普通用户,单击确定。
发布应用
在魔笔页面右上角单击发布,在弹框版本发布页面,输入版本描述,单击确定。
发布完成后,在部署页面,单击点击访问应用。
访问三方快捷登录配置页
之前已为三方快捷登录配置页设置好了路由地址,因此直接通过URL访问该页面,以便对三方平台的OAuth参数进行初始化设置。三方快捷登录配置页的URL,例如:https://cluster-3.mobiapp.cloud/应用id/link/config。
通常情况下,应用控制台应集成该页面,并通过账号和权限对配置的安全性进行保障,即只有管理员可以访问该页面并进行初始化设置。
初始化三方平台设置(id/secret)
在三方快捷登录配置页对三方平台的OAuth参数进行初始化设置。以钉钉为例:
配置三方快捷登录。
开启钉钉三方登录。
设置 client_id 和 client_secret 。如何获取对应三方平台的id/secret参数,请参考参考文档。
如无特殊需要,可以不配置登录加载页、登录成功默认回跳页。
配置成功后,单击确认。
配置角色。
访问登录页
配置完成后,模拟一个普通用户首次访问您的应用,未登录情况下将被路由至登录页面。
这里我们通过URL直接访问登录页,该URL在页面路由配置 已经被成功配置。例如:https://cluster-3.mobiapp.cloud/应用id/link/login
选择三方平台登录
选择钉钉进行三方快捷登录。
钉钉扫码登录。
成功登录,跳转到登录成功页。
参考文档
第三方开放平台接入文档请参考: