引用的开源项目地址:
Gitee:https://gitee.com/Yin-hongwei/music-website
Github:https://github.com/Yin-Hongwei/music-website
项目前后端分离,前端采用 Vue3 + Typescript,后端采用 SpringBoot,均是具有代表性的技术栈。
项目说明文档中已经详细的阐述了如何部署到本地,此处仅补充说明:
1. 通过百度云盘下载项目的音乐、图片资源(非必要)
2. 修改配置文件(Mysql,Redis)
3. 分别启动前后端服务(前端分为管理端和用户端,共三个服务)
4. 两个前端项目依赖安装建议跟随说明文档采用 yarn 命令安装依赖
项目仅作示例展示用,接下来将具体介绍如何接入 Authing 服务,有多种方式,本文侧重点在于介绍通过不改变原本项目前端 UI,而在后端「调用 SDK 」的方式。
如果你还没有用过 Authing,可以点击这里查看如何创建一个自己的应用。
对 Authing 的任何名词/概念有疑问:https://docs.authing.co/v2/concepts/
接下来,假设你已经对 Authing 有初步了解,且在 Authing 控制台创建了一个自己的应用。
引入 Authing 提供的 SDK 之后,要获取Authing 服务最核心的认证侧类 AuthenticationClient 和管理侧类 ManagementClient,通过调用这两个类中封装好的方法,就可以使用 Authing 提供的服务。
可以通过在后端项目中添加 config 配置类,将AuthenticationClient和 ManagementClient 作为 Bean 注入到 Spring之中,此后在各处仅需获取 Bean 并使用即可(例如:@Autowired)。
具体地,在项目主程序同级目录下创建 config 文件夹,在该文件夹中新建 AuthingConfig 类。
如果你不知道如何获取这些数据:
App ID、App Secret、APP Host:https://docs.dev.authing-inc.co/v2/guides/faqs/get-app-id-and-secret.html
用户池 ID、用户池 Secret:https://docs.authing.co/v2/guides/faqs/get-userpool-id-and-secret.html
重点关注:
此处登录成功后返回的 data 中会包含 accessToken,该字符串是 Authing 的接口访问凭据,建议将其返回到前端,存储在 cookie 中,之后后端接受的部分请求将从 cookie 中获取 accessToken 并对其进行验证。
注意:前端保存和后端读取要注意区分管理端和用户端的 cookie 名称,即区分不同端登录的用户。
此处给出一种前端保存 cookie 的办法的代码:
需要注意的是,该项目前端中管理端不提供注册功能,只有用户端可以注册。
可以看出 Authing 提供的 SDK 包含了该项目用户所需的全部属性,可以完全替代原本的后端接口,当然,有些地方需要你根据实际项目作额外的逻辑处理。
需要补充的一点是,原示例系统中,用户注册时需要填手机号和邮箱,用户实体类中也包含这两条属性,此处删除。因为 Authing 服务将手机号/邮箱和用户进行绑定时,会向手机号/邮箱发送验证邮件,用户需在规定时间内填写验证码才能通过验证并成功绑定。
如业务需要,此处提供一些 JAVA SDK:
更多 JAVA SDK 可以自行查看 AuthenticationClient/ManagementClient 源码,更底层的开放 API 可以看Authing 开放 API文档。
使用 Guard 进行登录需要注意以下几点:
上面介绍登录/注册时,细心的你可能注意到了,只有用户端可以进行注册,管理端是无法进行注册的。那么怎么解决管理端的账号问题呢?
首先,系统会默认创建一个超级管理员角色,此处以 superAdmin 为例,给出在 Authing 的控制台创建角色的示例,当然你也可以自己用其他方式(比如调用 SDK)解决这个问题。
当然,Authing 控制台此处也可以创建更多用户
建议根据你所使用的系统中的实际情况来决定创建方式,示例系统中仅有用户名+密码的方式,所以此处使用用户名方式创建 superAdmin 用户。
这样你就可以登录管理端了。你可能会有另一个疑问,那么用户端创建的用户难道也可以登录管理端吗?现在用户端和管理端的用户不是放在一起了吗?没错,用户端和管理端的用户确实放在了一起(建议如此,也可以不放在一起)。但是我们可以给用户赋予不同角色,来区分用户端和管理端的用户,这点会在下文角色管理详细说明。
示例系统中,可以对用户进行列表展示和删除/批量删除的操作,下面展示使用 Authing 提供的 SDK 代替原本的代码:
需要注意的是, Authing 提供的 SDK 中默认有分页的功能,将数据按照 page=1,limit=10 来返回,示例代码中,由于前端原本代码中自带分页功能,故将其合并到了一个 List 之中。
还有一点需要注意,要将 Authing 提供的 SDK 中返回的 UserDto 对象映射成你实际的用户对象。
原系统在前端采用循环调用删除来实现。
此处 updatePassword() 调用的前提是在 authenticationClient 中配置 accessToken(之后也会有类似情况),因为 accessToken 携带了用户信息,所以不再需要传递id、username 等信息,仅需要旧密码和新密码,就可以修改密码。
书接上文,管理端和用户端账号的区分,依赖于角色,下面将介绍示例代码中对于整个系统的角色划分,当然你可以自定义。最初,我们给系统创建了一个 superAdmin 用户,现在,我们赋予它 superAdmin 角色。
批量删除原系统在前端采用循环调用删除来实现。
其中,superAdmin 是系统的第一个默认超级管理员账号;在用户端创建的账号,创建成功后默认赋予 user 角色,仅可以登录用户端;vip 角色,也是仅可以登录用户端,但由于示例系统是音乐系统,此处给出区别与普通角色的 vip 角色;admin 角色,可以登录用户端和管理端。
一个账号可以拥有多个角色;默认对外不显示 superAdmin 角色的存在;账号不允许撤回 user 角色。
首先,介绍 Authing 定义的资源:
Authing 中的资源是你的业务系统中实际资源的标识符,一个资源可以是你的业务系统中的某一个实体,如 Order,我们也可以对 order 设定一个具体的操作,如:order:read;资源也可以是 UI 界面上的某一个菜单,一个按钮。资源的具体定义可以参考文档,当你把所有业务资源都在 Authing 中创建以后,就能控制对它们的访问、修改等权限。
如何在 Authing 控制台创建资源:
记得权限分组选中自己创建的应用。