【AGC】认证服务HarmonyOS(api9)实现手机号码认证登录

发布时间 2023-07-11 10:22:17作者: Mayism123
【问题背景】

近期AGC上线了HarmonyOS(api9)平台的SDK,这样api9的设备也能使用认证服务进行快速认证登录了。下面为大家带来如何使用auth SDK(api9)实现手机号码认证登录。

 

【开通服务】

1.登录AppGallery Connect,点击“我的项目”,在项目的应用列表中选择您需要开通认证服务的应用。在导航栏选择“构建 > 认证服务”,请点击“立即开通”开通服务。

cke_1170.png

2.点击需要启动的认证方式所在行的“启用”。本次Codelab选择启用“手机号码”。

cke_2818.png

 

【集成SDK】

1.登录AppGallery Connect页面,点击“我的项目”,在项目下的应用列表中选择您开通认证服务的应用。

2.在项目设置的“常规”页签下,点击“应用”栏下的“agconnect-services.json”下载配置文件。

3.将“agconnect-services.json”文件拷贝到DevEco Studio项目的应用级资源目录“AppScope/resources/rawfile”下,如果没有这个目录,请创建一个。

cke_5141.png

4.打开您的HarmonyOS工程,打开应用级(一般为entry目录)下的“oh-package.json5”文件,在"dependencies": {

"dependencies": {    "@hw-agconnect/core-ohos": "^1.0.9",    "@hw-agconnect/credential-ohos": "^1.0.9

5.点击界面上的“Sync Now”链接同步已完成的配置。

cke_2078.png

6.在“EntryAbility.ts”文件中导入agc组件。

import agconnect from '@hw-agconnect/api-ohos';import "@hw-agconnect/core-ohos";import "@hw-agconnect/auth-ohos";

7.在“EntryAbility.ts”文件的onCreate中使用entry的context初始化SDK,并且将auth对象保存为全局变量。

//初始化SDKagconnect.instance().init(this.context);globalThis.auth = agconnect.auth();

8.在“entry/src/main/module.json5”文件中添加网络权限。

"requestPermissions": [  {    "name": "ohos.permission.INTERNET"  }]

 

【功能开发】

在“index.ets”文件中导入我们需要用到的包。

import { Logger } from "@hw-agconnect/base-ohos"import "@hw-agconnect/auth-ohos"import { EmailAuthProvider, VerifyCodeAction, VerifyCodeSettingBuilder, PhoneUserBuilder,  PhoneAuthProvider, AGConnectAuth, AGConnectAuthCredentialProvider} from "@hw-agconnect/auth-ohos"

接收在“EntryAbility.ts”文件中实例化的auth对象。

let auth = globalThis.auth;

创建四个空字符串分别用于存放手机号码、国家码、验证码和Uid。

@State phoneNumber: string = ''@State countryCode: string = ''@State verifyCode: string = ''@State uid: string = ''

下面进入布局与功能开发环节,首先需要创建一个输入框用于输入国家码。

TextInput({ placeholder: 'country code' })            .width('38%')            .margin({ top: 20 })            .onChange((value: string) => {              this.countryCode = value;            })

第二步,创建一个输入框用于输入手机号码。

TextInput({ placeholder: ' phone number' })            .width('52%')            .margin({ top: 20 })            .onChange((value: string) => {              this.phoneNumber = value;            })

第三步,创建一个输入框用于输入验证码。

TextInput({ placeholder: 'verify code' })            .width('40%')            .margin({ top: 20 })            .onChange((value: string) => {              this.verifyCode = value;            })

第四步,创建一个按钮用于根据输入的国家码与手机号码获取验证码。先调用new VerifyCodeSettingBuilder()构造方法设置验证码的参数,例如验证码类型、发送语言和发送间隔。然后调用AGConnectAuth.requestPhoneVerifyCode方法,使用countryCode、phoneNumber和verifyCodeSettings作为参数申请验证码。

Button("request verify code").width('50%').margin({ top: 20 })            .onClick(() => {              let verifyCodeSettings = new VerifyCodeSettingBuilder()                .setAction(VerifyCodeAction.REGISTER_LOGIN)                .setLang('zh_CN')                .setSendInterval(60)                .build();              auth.requestPhoneVerifyCode(this.countryCode, this.phoneNumber, verifyCodeSettings)                .then(verifyCodeResult => {                  Logger.info(TAG, "requestPhoneVerifyCode success " + JSON.stringify(verifyCodeResult));                }).catch(error => {                Logger.error(TAG, "requestPhoneVerifyCode error " + JSON.stringify(error));              })            })

第五步,创建一个按钮用于注册用户并登陆。先调用PhoneUserBuilder生成PhoneUser,然后调用AGConnectAuth.createPhoneUser注册用户。然后调用PhoneAuthProvider.credentialWithVerifyCode采用验证码方式创建手机帐号凭证。获取credential成功后,调用AGConnectAuth.signIn实现登录。

Button("signin phone").width('60%').margin({ top: 40 })          .onClick(() => {            let user = new PhoneUserBuilder()              .setCountryCode(this.countryCode)              .setPhoneNumber(this.phoneNumber)              .setVerifyCode( this.verifyCode)              .build();            auth.createPhoneUser(user)              .then(result => {                Logger.info(TAG, "createPhoneUser success getUid:" + result.getUser().getUid());              })            let credential = PhoneAuthProvider.credentialWithVerifyCode(this.countryCode,this.phoneNumber, this.verifyCode);            auth.signIn(credential).then(signInResult => {              this.uid = "Uid:"+signInResult.getUser().getUid();              Logger.info(TAG, "signInPhone success " + signInResult.getUser().getUid());            });          })

第六步,创建一个按钮用于登出当前账号。当用户不再使用应用,或者需要使用其他帐号登录时,需要调用AGConnectAuth.signOut登出当前用户。用户一旦被登出,端侧的用户信息和Token将被清除。

Button("sign out").width('60%').margin({ top: 40 })          .onClick(() => {            auth.signOut().then(() => {              this.uid = "sign out success";              Logger.info(TAG, "sign out success");            });          })

第七步,创建一个文本框用于显示登录账号的Uid。

Text(this.uid)          .margin({ top: 50 })          .fontSize(25)          .fontColor(Color.Gray)

 

【打包测试】

1.运行DevEco Studio工程生成APP包,并在测试手机中安装APP包。

2.输入国家码与手机号,点击“request verify code”按钮获取验证码,查看对应手机号是否可以收到认证服务服务器发送的验证码。

cke_17698.png

3.输入验证码,点击“signin phone”按钮使用当前手机号与验证码登录,观察界面是否可以打印出手机号对应的用户uid。

cke_20371.png

4.点击“sign out”按钮退出当前登录账号。

cke_24592.png

参考文档:https://developer.huawei.com/consumer/cn/doc/development/AppGallery-connect-Guides/agc-auth-harmonyts-integration-0000001471227866