YiAPP 移动客户端集成 OAuth2 认证服务器,实现统一登录
移动客户端通过 OAuth2 登录,实现账号统一管理。
准备工作
- YiAPP 客户端;
- OAuth2 服务器;
- IoT 应用服务器;
工作原理
- 打开 YiAPP 客户端软件;
- 使用“第三方登录”,选择 YiCLOUD 或 Github;
- 登录 第三方账号;
- 登录成功后即可完成统一登录;
移动客户端通过 OAuth2 登录,实现账号统一管理。
ThingsBoard 移动端采用 flutter 来实现,支持 Android 和 iOS,当然,web 也可以。总体测试下来,还是算不错的,虽然还没有 release 版本,但是,完全可以使用。
参考官方手册,很简单,下载,解压缩,运行:flutter doctor
,一步步排查,直到没有错误。这里不多说,不是重点。
需要提前准备好 Android 开发环境和SDK,具体请参考 Android 开发环境要求,主要是能跑起来环境就没问题。
前提是需要一台 macOS 的电脑,配置低了还不行,还需要安装很多软件环境,这个对普通开发者还是有难度,土豪除外。
lib/constants/app_constants.dart, thingsBoardApiEndpoint 改成你的服务器地址即可;
大概思路就是各种dart 文件,比如: lib/modules/profile/change_password_page.dart,修改密码页面,把字符串改成中文就好了,没什么其他要求。
运行 flutter build apk
,可简单了,结果就是这样:
jiekechoo@jiekechoo flutter_thingsboard_app % flutter build apk --no-tree-shake-icons
Building with sound null safety
Running Gradle task 'assembleRelease'...
Running Gradle task 'assembleRelease'... Done 212.8s
✓ Built build/app/outputs/flutter-apk/app-release.apk (22.8MB).
apk 文件在 build/app/outputs/flutter-apk/app-release.apk,拿到Android 手机上安装即可使用,非常简单。
直接使用 ThingsBoard 上用户登录即可
先来看一段视频,体验一下新增的功能,前端增加的菜单和功能演示。
此次二次开发,主要是针对 ThingsBoard 新增功能模块,以报表功能为目的,提供一个可以独立与原有功能的 Report/报表 模块,咱们先这么来定义。就像 Device/设备、Asset/资产模块,增删改查必不可少,还需要兼容 ThingsBoard 原有操作习惯,还可以将 Report/报表 分配给特定的 Customer/客户。上图,这是开始的设想:
modified: application/src/main/java/org/thingsboard/server/controller/BaseController.java
new file: application/src/main/java/org/thingsboard/server/controller/ReportController.java
modified: application/src/main/java/org/thingsboard/server/service/security/permission/CustomerUserPermissions.java
modified: application/src/main/java/org/thingsboard/server/service/security/permission/Resource.java
modified: application/src/main/java/org/thingsboard/server/service/security/permission/TenantAdminPermissions.java
modified: application/src/main/resources/thingsboard.yml
new file: common/dao-api/src/main/java/org/thingsboard/server/dao/report/ReportService.java
modified: common/data/src/main/java/org/thingsboard/server/common/data/CacheConstants.java
modified: common/data/src/main/java/org/thingsboard/server/common/data/EntityType.java
new file: common/data/src/main/java/org/thingsboard/server/common/data/Report.java
new file: common/data/src/main/java/org/thingsboard/server/common/data/ReportInfo.java
modified: common/data/src/main/java/org/thingsboard/server/common/data/id/EntityIdFactory.java
new file: common/data/src/main/java/org/thingsboard/server/common/data/id/ReportId.java
modified: common/data/src/main/java/org/thingsboard/server/common/data/query/EntityFilterType.java
new file: common/data/src/main/java/org/thingsboard/server/common/data/query/ReportSearchQueryFilter.java
new file: common/data/src/main/java/org/thingsboard/server/common/data/query/ReportTypeFilter.java
new file: common/data/src/main/java/org/thingsboard/server/common/data/report/ReportSearchQuery.java
new file: dao/src/main/java/org/thingsboard/server/dao/model/sql/AbstractReportEntity.java
new file: dao/src/main/java/org/thingsboard/server/dao/model/sql/ReportEntity.java
new file: dao/src/main/java/org/thingsboard/server/dao/model/sql/ReportInfoEntity.java
new file: dao/src/main/java/org/thingsboard/server/dao/report/ReportDao.java
new file: dao/src/main/java/org/thingsboard/server/dao/report/ReportServiceImpl.java
modified: dao/src/main/java/org/thingsboard/server/dao/sql/query/DefaultEntityQueryRepository.java
modified: dao/src/main/java/org/thingsboard/server/dao/sql/query/EntityKeyMapping.java
new file: dao/src/main/java/org/thingsboard/server/dao/sql/report/JpaReportDao.java
new file: dao/src/main/java/org/thingsboard/server/dao/sql/report/ReportRepository.java
modified: pom.xml
根据 git 提供的log,看出来新增文件比修改文件多,也是此次二次开发的难点所在。
这个开发过程中,我发现,频繁读取一些 API,且都是需要数据库交互,如果用户数量大,不是一个好方法,这里举一个例子:
获取实体类型频繁数据库交互
调用后台 API 为: /api/report/types,追查代码发现其实是一次 SELECT,瞬间尴尬了
@Query("SELECT DISTINCT d.type FROM ReportEntity d WHERE d.tenantId = :tenantId")
List<String> findTenantReportTypes(@Param("tenantId") UUID tenantId);
CREATE TABLE public.report
(
id uuid NOT NULL,
created_time bigint NOT NULL,
additional_info character varying COLLATE pg_catalog."default",
customer_id uuid,
type character varying(255) COLLATE pg_catalog."default",
name character varying(255) COLLATE pg_catalog."default",
label character varying(255) COLLATE pg_catalog."default",
search_text character varying(255) COLLATE pg_catalog."default",
tenant_id uuid,
CONSTRAINT report_pkey PRIMARY KEY (id),
CONSTRAINT report_name_unq_key UNIQUE (tenant_id, name)
)
{
"hello": "world",
"thingsboard": "iot",
"company": "yiqisoft",
"location": "shanghai",
"protocol": ["coap", "mqtt", "http"]
}
对于自己的业务逻辑开发方面,建议不要改动 ThingsBoard 的代码结构,可以使用外挂一个 jar,来独立实现业务功能,这个具体要看业务复杂度,是不是需要与 ThingsBoard 耦合,可以查看前期我们发布的文章:如何无缝扩展 ThingsBoard 功能?原来二次开发如此简单! , 如何无缝扩展 ThingsBoard 功能?原来二次开发如此简单!【续】
modified: ui-ngx/src/app/core/http/entity.service.ts
new file: ui-ngx/src/app/core/http/report.service.ts
modified: ui-ngx/src/app/core/services/menu.service.ts
modified: ui-ngx/src/app/modules/home/components/widget/lib/entities-hierarchy-widget.models.ts
modified: ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.ts
modified: ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.ts
modified: ui-ngx/src/app/modules/home/dialogs/home-dialogs.service.ts
modified: ui-ngx/src/app/modules/home/pages/customer/customer-routing.module.ts
modified: ui-ngx/src/app/modules/home/pages/customer/customer.component.html
modified: ui-ngx/src/app/modules/home/pages/customer/customers-table-config.resolver.ts
modified: ui-ngx/src/app/modules/home/pages/home-pages.module.ts
new file: ui-ngx/src/app/modules/home/pages/report/report-routing.module.ts
new file: ui-ngx/src/app/modules/home/pages/report/report-table-header.component.html
new file: ui-ngx/src/app/modules/home/pages/report/report-table-header.component.scss
new file: ui-ngx/src/app/modules/home/pages/report/report-table-header.component.ts
new file: ui-ngx/src/app/modules/home/pages/report/report-tabs.component.html
new file: ui-ngx/src/app/modules/home/pages/report/report-tabs.component.ts
new file: ui-ngx/src/app/modules/home/pages/report/report.component.html
new file: ui-ngx/src/app/modules/home/pages/report/report.component.scss
new file: ui-ngx/src/app/modules/home/pages/report/report.component.ts
new file: ui-ngx/src/app/modules/home/pages/report/report.module.ts
new file: ui-ngx/src/app/modules/home/pages/report/reports-table-config.resolver.ts
modified: ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.ts
modified: ui-ngx/src/app/shared/components/entity/entity-subtype-autocomplete.component.ts
modified: ui-ngx/src/app/shared/components/entity/entity-subtype-list.component.ts
modified: ui-ngx/src/app/shared/components/entity/entity-subtype-select.component.ts
modified: ui-ngx/src/app/shared/components/footer.component.html
modified: ui-ngx/src/app/shared/models/alias.models.ts
modified: ui-ngx/src/app/shared/models/entity-type.models.ts
new file: ui-ngx/src/app/shared/models/id/report-id.ts
new file: ui-ngx/src/app/shared/models/report.models.ts
modified: ui-ngx/src/assets/locale/locale.constant-en_US.json
modified: ui-ngx/src/assets/locale/locale.constant-zh_CN.json
modified: ui-ngx/src/assets/logo_title_white.svg
modified: ui-ngx/src/environments/environment.prod.ts
modified: ui-ngx/src/environments/environment.ts
modified: ui-ngx/src/index.html
new file: ui-ngx/src/yiqisoft.ico
前期,我们发布了文章,如何进行 ThingsBoard 前端二次开发?超强 Angular 框架帮你忙。,介绍如果用 Angular 二次开发的要点,具体看开发者对于 Angular 框架掌握程度。
像上面的实体类型获取,增加功能特别不容易,因为代码实现是通过枚举值来 switch/case 来判断,那么新增功能模块时,需要改动太大了,如果能够独立到每个功能模块的组件中,那就方便多了。但是,前端代码就会有很多重复。为了扩展 REPORT,必须要找到所有的 case,上代码:
switch (entity.id.entityType as EntityType | string) {
case 'function':
materialIcon = 'functions';
break;
case EntityType.DEVICE:
materialIcon = 'devices_other';
break;
case EntityType.REPORT:
materialIcon = 'equalizer';
break;
case EntityType.ASSET:
materialIcon = 'domain';
break;
}
当然,在国内,用 React 和 Vue 的前端居多,所以,不是很流行的 Angular 自然成为 ThingsBoard 二次开发的一大障碍。细细品,还是觉得 ThingsBoard 团队强大的先知先觉。
本文之前,有关 ThingsBoard 后端的无缝二次开发已经有比较详细的文章,请需要的朋友自取。
学习一项新技术,新框架,难免要下苦功,熟读官方文档是必不可少的:https://angular.cn/
都说码 angular 项目过程像 Java 工程,所以,后端 Java 工程人员是一大捷径。
后面的文章,将进一步讲解组件中每个文件的用法。敬请期待