OH 应用程序集成 AGC 认证服务实现邮箱登录
![OH应用程序集成AGC认证服务实现邮箱登录](https://static001.geekbang.org/infoq/57/57a9dfc72d145449b14adb59db5be3fd.png)
前言
AppGallery Connect(简称 AGC)是华为整合内部各项优质服务,将其在全球化、质量、安全、工程管理等领域长期积累的能力开放给开发者。通过集成 AGC 构建服务,可以降低企业开发、运维、人力成本;通过集成 AGC 增长服务能够使企业产品快速实现用户增长,加速企业应用商业成功率;通过集成 AGC 质量服务,可以精准定位应用异常,从而为应用的性能保驾护航。AGC 一站式服务可以集成到 Android、IOS、Web、小程序、HarmonyOS/OpenHarmony 应用中,如传统开发登录认证服务在集成 AGC 后可以调用少量接口即可实现多类型的登录方式。
本节以 AGC 构建应用基础能力认证服务为例,将其集成到 OpenHarmony 应用程序中。
流程
搭建开发环境
创建项目和应用
开通认证服务
集成 SDK
邮箱登录认证
1. 搭建开发环境
下载适合自己操作系统版本的DevEco Studio 3.1 Canary1,安装和配置开发环境在社区已经有很多操作教程,此处不做赘述。
![](https://static001.geekbang.org/infoq/a1/a1e257f5e55ad311e9a031abec7b3b5a.png)
2. 创建项目和应用
2.1 创建项目
在操作之前读者需要拥有一个华为开发者账号,然后登录AppGallery Connect管理中心,点击界面“我的项目”,打开项目创建界面。
![](https://static001.geekbang.org/infoq/93/93a197820c8374c66639a6940f69b285.png)
在“我的项目”界面点击“添加项目”,输入项目信息,点击“创建并继续”。
![](https://static001.geekbang.org/infoq/80/803c378c1213fa1ade38c69630f4b482.png)
接着可选择是否开通分析服务,笔者默认开通。
![](https://static001.geekbang.org/infoq/38/381d3be37bc168520d98a428d6108b0c.png)
2.2 添加应用
创建项目完成后,定位在“常规”页签,点击该页签中的“添加应用”按钮,填写应用的实际信息后,点击“确认”按钮完成应用创建。本次以 OpenHarmony 应用为例,此处需要选择“APP(HarmonyOS)”,应用名称和应用包名与使用 DevEco Studio 创建项目的名称和包名一致,建议选择有实际意义的字段。
![](https://static001.geekbang.org/infoq/69/69ed680127f99d6b9b04ab5db5c96537.png)
3 开通认证服务
在左侧菜单栏中点击“构建”-->“认证服务”,打开认证服务开通界面。
![](https://static001.geekbang.org/infoq/0f/0fffe155efb2cedb071ab77a438ca666.png)
在“认证方式”页签中,点击“邮箱地址”列后的启用,开启通过邮箱验证码方式登录。
![](https://static001.geekbang.org/infoq/01/0194c3ea01c1e658f2bac10d372d1b1f.png)
4 集成 SDK
4.1 下载 SDK 配置文件
回到“项目设置” --> "常规"页签,下拉找到“应用”,SDK 配置,然后点击下载“agconnect-services.json”,已备创建项目后使用。
![](https://static001.geekbang.org/infoq/5f/5f397e9a35c5e1dbce931647dd36e559.png)
4.2 创建项目
打开 DevEco Studio 点击 Create Project,进入创建项目向导页,选择 OpenHarmony 标签,创建 OpenHarmony 项目(当然你也可以直接创建 HarmonyOS 项目,在配置中改动少量的代码让其能够运行在 OpenHarmony 设备上)。
![](https://static001.geekbang.org/infoq/f7/f736df250fd09d82986167b5829a10e0.png)
添加项目信息,其中 Project name 和 Bundle name 需要与 2.2 小节应用名称和包名保持一致。
![](https://static001.geekbang.org/infoq/3a/3a3d923eb82a21996c628d094edff90e.png)
4.3 集成 SDK
在项目 AppScope/resouces 目录下创建 rawfile 文件夹,将 4.1 小节下载的“agconnect-services.json”拷贝到 rawfile 目录下。
![](https://static001.geekbang.org/infoq/d7/d791efd53a6198c7fb07c90ed3186371.png)
官方示例中提供的是基于 Java 版本,而笔者基于 ArkTS 语言的应用程序,那么引入的依赖文件是什么呢?打开华为提供的DevEco Marketpalce资源仓,点击“应用及服务组件”,输入“auth”进行查找。
![](https://static001.geekbang.org/infoq/bc/bc9b1478c39576a3f9a1b98bf00e2262.png)
agconnect-auth-component
是一个自定义 arkui 组件,可以直接引入相对简陋,此处笔者选择agconnect-auth
,其可以根据自己的需求来构建页面,当然agconnect-auth-component
中关于组件封装可以详细阅读一下,能够帮助你进一步学习组件的封装。
打开终端定位到 OhAGCAuth/entry 目录,输入npm install --save @ohos/agconnect-auth
或者直接在entry
目录下的 package.json 文件中引入。
![](https://static001.geekbang.org/infoq/b1/b17660f403d33abf6e2afdca68cfa9c2.png)
![](https://static001.geekbang.org/infoq/77/77f0f1fa8643c3ee7dd6520738cc9f2f.png)
5 邮箱登录认证
5.1 构建登录页面
页面元素:
邮箱地址输入框(TextInput)
验证码获取按钮(Button)
验证码输入框(TextInput)
登录按钮(Button)
登录信息回显(Text)
![](https://static001.geekbang.org/infoq/a0/a05b49fb478db373744010b34ffedc2c.png)
5.2 引入 AGC 认证服务组件
5.3 初始化 SDK 并配置 apikey 及 clientSecret,并将 auth 对象保存为全局变量
apikey 为 AGC 管理中心项目设置常规页签下项目参数中 API 密钥(凭据);
clientSecret 为为 AGC 管理中心项目设置常规页签下项目参数中客户端 ID 项 Client Secret。
AGC 认证服务需要网络请求权限,在 entry/modules.json5 中添加网络权限。
![](https://static001.geekbang.org/infoq/96/9602aa44493fbebcb48cf1aef814d13e.png)
5.4 完善功能
在
Index.ets
文件中导入邮箱认证需要的包
接受全局 auth 对象。
实现点击“获取验证码”发送验证码能力,需要调用
requestEmailVerifyCode()
方法
最后一步,将验证码输入后点击登录,调用``方法构建登录用户 credential 凭证,并调用
signIn()
方法进行登录。
6 打包测试及效果演示
使用 DevEco Studio 一键配置签名
连接 DAYU200(OpenHarmony v3.2Beta3)
![](https://static001.geekbang.org/infoq/a1/a1d5b52332547fb56137939fd98e6387.png)
版权声明: 本文为 InfoQ 作者【白晓明】的原创文章。
原文链接:【http://xie.infoq.cn/article/d5d0660e831ae93ffcb80d96e】。
本文遵守【CC BY-NC-ND】协议,转载请保留原文出处及本版权声明。
评论