文档

如何让应用支持三方登录(如钉钉/阿里云、企业微信)

更新时间:

魔笔平台提供了三方快捷登录模块,支持常见三方平台的OAuth快捷登录,该模块可使您的用户直接通过三方平台账号登录魔笔应用,无需在应用重新注册账号。

三方快捷登录模块组成

类别

名称

描述

页面

三方快捷登录配置页

在该页面对钉钉、阿里云、微信、企业微信等进行三方登录的初始化设置。

通常,您应当在您的应用控制台集成该页面,并通过账号和权限对配置的安全性进行保障。

该页面一般无需修改。

登录页

模块预置的登录页,提供三方登录快捷入口。您可使用该页面进行三方登录调试,参考该页面自定义自己的登录页,或者,直接将该页面集成到您的应用中。

登录加载页

三方平台返回临时code并获取用户信息时的默认加载页,此时用户还未登录成功,一般无需关注和修改。

登录成功页

三方平台用户认证成功后跳转的默认页面,一般为站点首页。如果您不做设置,登录成功后将跳转到此页面。

登录失败页

三方平台用户认证失败后跳转的默认页面,一般无需关注和修改。

前端逻辑流

-

一般无需关注和修改。

后端逻辑流

获取阿里云授权页面

该逻辑流绑定登录页中的阿里云icon,用于获取阿里云授权页面。

如果需要,您可以在自定义的登录页,重新建立该逻辑流与对应阿里云登录入口的绑定。

获取钉钉授权页面

该逻辑流绑定登录页中的钉钉icon,用于获取钉钉授权页面。

如果需要,您可以在自定义的登录页,重新建立该逻辑流与对应钉钉登录入口的绑定。

获取微信授权页面

该逻辑流绑定登录页中的微信icon,用于获取微信授权页面。

如果需要,您可以在自定义的登录页,重新建立该逻辑流与对应微信登录入口的绑定。

获取企业微信授权页面

该逻辑流绑定登录页中的企业微信icon,用于获取企业微信授权页面。

如果需要,您可以在自定义的登录页,重新建立该逻辑流与对应企业微信登录入口的绑定。

-

其他后端逻辑流一般无需关注和修改。

数据模型

OauthConfig

配置存储三方平台的相关配置信息。

三方登录用户

用户存储三方登录用户相关信息,和魔笔三方登录实体关联。

token

内存实体,仅自定义逻辑流使用。

登录用户

内存实体,仅登录页配置登录上下文使用。

枚举

三方平台

一般无需关注和修改。

三方平台_EN

一般无需关注和修改。

操作步骤

让应用支持三方登录(如钉钉/阿里云、企业微信)主要操作流程包括以下步骤。

说明

三方登录模块仅支持:钉钉、阿里云、微信、企业微信四种开放平台。

  1. 应用引用三方平台登录模块

  2. 页面路由配置

  3. 配置角色

  4. 发布应用

  5. 访问三方快捷登录配置页

  6. 初始化三方平台设置(id/secret)

  7. 访问登录页

  8. 选择三方平台登录

引用三方登录平台模块前,需先完成以下两步操作:

  • 在对应的三方开放平台注册,并获取OAuth登录所需要的ID和secret,详细说明请参见参考文档

  • 三方开放平台,设置回调域名白名单。钉钉开放平台中的回调域名设置,如下图所示:

    image

应用引用三方平台登录模块

  1. 登录魔笔

  2. 在顶部菜单栏选择应用管理,在右上角搜索框中输入目标应用,例如TEST

  3. 在指定的应用卡片中单击进入设计器,进入应用开发页面(Mobi Studio)。

  4. 在左侧功能区选择image,展开右侧栏。

  5. 单击添加引用模块,打开系统引用模块页面。

  6. 系统模块页签下,选中模块名称为三方快捷登录模块,单击操作列的引用

    1679282818058_C815EBAC-ECBF-4d69-8CE4-6851BAFB5D59

  7. 即可引用模块到项目中。

    image..png

页面路由配置

重要

当前“选择页面”下的页面均为“三方快捷登录模块”页面,用于可以自定义页面,“**”为占位符,可以不配置。但一旦配置后,所有的占位符均一致,其余配置不变。

  1. 在左侧功能区选择image > 页面路由,单击添加页面路由,打开添加路由配置页面。

    1. 配置登录成功页。此配置中URL路径配置为:“/link/**/success”,必须以“/success”结尾。

    2. 配置登录失败页。此配置中“URL路径”配置为:“/link/**/error”,必须以“/error”结尾。

    3. 配置登录加载页。

      1. URL路径配置为:“/link/**/auth”,需要以“/auth”结尾。

      2. 前端逻辑流关联登录加载页发起三方登录。

        image

    4. 配置登录页。此配置中“URL路径”配置为:“/link/**/login”,必须以“/login”结尾。

    5. 配置快捷登录配置页。此配置中“URL路径”配置为:“/link/**/config”,必须以“/config”结尾。

  2. 配置完成后查看页面路由是否包含如下配置。

    image

配置角色

  1. 在左侧功能区选择image..png ,单击添加角色。根据业务需求,为角色添加权限,此处以添加普通用户为例。

    image..png

  2. 添加完成后,为角色配置角色映射

    image..png

  3. 映射角色选择三方快捷登录模块的OAuth普通用户,单击确定

    image..png

发布应用

  1. 在魔笔页面右上角单击发布,在弹框版本发布页面,输入版本描述,单击确定

  2. 发布完成后,在部署页面,单击点击访问应用

    image

访问三方快捷登录配置页

之前已为三方快捷登录配置页设置好了路由地址,因此直接通过URL访问该页面,以便对三方平台的OAuth参数进行初始化设置。三方快捷登录配置页的URL,例如:https://cluster-3.mobiapp.cloud/应用id/link/config。

说明

通常情况下,应用控制台应集成该页面,并通过账号和权限对配置的安全性进行保障,即只有管理员可以访问该页面并进行初始化设置。

初始化三方平台设置(id/secret)

在三方快捷登录配置页对三方平台的OAuth参数进行初始化设置。以钉钉为例:

  1. 配置三方快捷登录。

    1. 开启钉钉三方登录。

    2. 设置 client_id 和 client_secret 。如何获取对应三方平台的id/secret参数,请参考参考文档

    3. 如无特殊需要,可以不配置登录加载页、登录成功默认回跳页。

    4. 配置成功后,单击确认

      image..png

  2. 配置角色。

    image..png

访问登录页

配置完成后,模拟一个普通用户首次访问您的应用,未登录情况下将被路由至登录页面。

说明

这里我们通过URL直接访问登录页,该URL在页面路由配置 已经被成功配置。例如:https://cluster-3.mobiapp.cloud/应用id/link/login

选择三方平台登录

  1. 选择钉钉进行三方快捷登录。

    image

  2. 钉钉扫码登录。

    image

  3. 成功登录,跳转到登录成功页。

    image

参考文档

第三方开放平台接入文档请参考:

  • 本页导读