【问题背景】
近期AGC上线了HarmonyOS(api9)平台的SDK,这样api9的设备也能使用认证服务进行快速认证登录了。下面为大家带来如何使用auth SDK(api9)实现手机号码认证登录。
【开通服务】
1.登录AppGallery Connect,点击“我的项目”,在项目的应用列表中选择您需要开通认证服务的应用。在导航栏选择“构建 > 认证服务”,请点击“立即开通”开通服务。
2.点击需要启动的认证方式所在行的“启用”。本次Codelab选择启用“手机号码”。
【集成SDK】
1.登录AppGallery Connect页面,点击“我的项目”,在项目下的应用列表中选择您开通认证服务的应用。
2.在项目设置的“常规”页签下,点击“应用”栏下的“agconnect-services.json”下载配置文件。
3.将“agconnect-services.json”文件拷贝到DevEco Studio项目的应用级资源目录“AppScope/resources/rawfile”下,如果没有这个目录,请创建一个。
4.打开您的HarmonyOS工程,打开应用级(一般为entry目录)下的“oh-package.json5”文件,在"dependencies"中添加SDK依赖和认证服务的编译依赖。
"dependencies": {"@hw-agconnect/core-ohos": "^1.0.9","@hw-agconnect/credential-ohos": "^1.0.9","@hw-agconnect/auth-ohos": "^1.0.9","@hw-agconnect/base-ohos":"^1.1.2","@hw-agconnect/api-ohos":"^1.1.2"}
5.点击界面上的“Sync Now”链接同步已完成的配置。
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对象保存为全局变量。
//初始化SDK
agconnect.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”按钮获取验证码,查看对应手机号是否可以收到认证服务服务器发送的验证码。
3.输入验证码,点击“signin phone”按钮使用当前手机号与验证码登录,观察界面是否可以打印出手机号对应的用户uid。
4.点击“sign out”按钮退出当前登录账号。
参考文档:文档中心