鸿蒙 HarmonyOS NEXT端云一体化开发-认证服务篇
一、开通认证服务地点：AppGallery Connect (huawei.com)
步骤：
1 进入到项目设置页面中，并点击左侧菜单中的认证服务
2 选择需要开通的服务并开通
https://i-blog.csdnimg.cn/blog_migrate/8816c4404d8567d8ce55139f01616c1d.png
二、端侧项目情况配置
添加依赖
entry目录下的oh-package.json5
// 添加：主要前2个依赖
"dependencies": {
"@hw-agconnect/cloud": "^1.0.0",
"@hw-agconnect/hmcore": "^1.0.0",
"@hw-agconnect/auth-component": "^1.0.0", // 可选
"long": "5.2.1"
}
开通网络权限
// 文件名：module.json5
// 路径：src/main/module.json5
"requestPermissions": [
{
"name": "ohos.permission.INTERNET" // 网络权限
},
]
更新agconnect-services.json文件
// AGC网站提示：下载最新的配置文件（如果您修改了项目、应用信息或者更改了某个开发服务设置，可能需要更新该文件）
为了确保项目不会出错，建立更新下该配置文件
三 认证组件界面示例
[*]新建Login.ets页面，并设置成为应用首页
https://i-blog.csdnimg.cn/blog_migrate/d10e89be578d5d1335fd823523aebe4f.png
[*]Login.ets调用认证组件
import { AuthMode, Login } from '@hw-agconnect/auth-component';
import router from '@ohos.router';
@Entry
@Component
struct MyLogin {
@State message: string = 'Hello World';
build() {
Column(){
Text("test")
// auth-component 中的组件Login
Login({
modes: // 手机验证码登录
,
onSuccess:()=>{
//登录成功后的回调
router.pushUrl({url:'pages/Index'})
}
}){
Button("登录").height(60).width("100%")
}
}.width("100%").height("100%")
}
}
https://i-blog.csdnimg.cn/blog_migrate/f120c64bfebea8b337397bf83243955c.png
https://i-blog.csdnimg.cn/blog_migrate/0b1ebd6379049ec5fb4b3fc171fab110.png
四、自界说登录组件
// 参考链接：https://developer.huawei.com/consumer/cn/doc/AppGallery-connect-Guides/agc-auth-harmonyos-arkts-login-phone-0000001631566338
import cloud from '@hw-agconnect/cloud';
import { Auth, VerifyCodeAction } from '@hw-agconnect/cloud';
@Entry
@Component
struct PageTest {
@State verificationBtnStr:string= "验证码"
phone:string = ""
@State verifcationBtnStatus:boolean = true
@State timer :number = 0
@State countDown:number = 60
// 云端获取
getCloudQrCode(){
cloud.auth().requestVerifyCode({
action: VerifyCodeAction.REGISTER_LOGIN,
lang: 'zh_CN',
sendInterval: 60,
verifyCodeType: {
phoneNumber: this.phone,
countryCode: '86',
kind: "phone"
}
}).then(verifyCodeResult => {
//验证码申请成功
console.log(JSON.stringify(verifyCodeResult))
AlertDialog.show({
title: "提示",
message: "获取验证码成功",
})
}).catch((error: Promise<Result>) => {
AlertDialog.show({
title: "提示",
message: "获取验证码失败",
})
//验证码申请失败
});
}
// 初始化参数：
initData(){
clearInterval(this.timer)
this.verifcationBtnStatus = true
this.verificationBtnStr= "验证码"
this.countDown= 60
}
// 发送验证码
getCode(){
if(this.phone==''){
AlertDialog.show({
title: "提示",
message: "请输入手机号码",
})
return;
}
this.verifcationBtnStatus = false
this.getCloudQrCode()
this.timer= setInterval(()=>{
this.verificationBtnStr = `${this.countDown}s`
if(this.countDown===0){
this.initData()
return;
}
this.countDown --
},1000)
}
build() {
Column({space:20}){
TextInput({placeholder:'请输入手机号：'}).width("100%").height(60).margin({top:20})
.onChange((value)=>{
this.phone = value
})
Row(){
TextInput({placeholder:"请输入验证码"}).layoutWeight(1).margin({right:20})
Button(this.verificationBtnStr).width(120).onClick(()=>{
this.getCode()
}).enabled(this.verifcationBtnStatus)
}.width("100%").height(60)
Button("登录").width("100%").height(40).padding({
left:50,right:50
}).backgroundColor("#ff08be4b")
}.width("100%").height("100%").padding({left:10,right:10})
}
}
[*]效果：
https://i-blog.csdnimg.cn/blog_migrate/1ae6b3bb439b6dc37210e8d30a4e9d54.png
五、邮箱登录验证
import cloud from '@hw-agconnect/cloud';
import { Auth, VerifyCodeAction } from '@hw-agconnect/cloud';
import router from '@ohos.router';
@Entry
@Component
struct PageTest {
@State verificationBtnStr:string= "验证码"
@State phone:string = ""
@State verifcationBtnStatus:boolean = true
@State timer :number = 0
@State countDown:number = 60
@State data:string = ""
@State verifCode:string = ""
// 注销
loginOut(){
cloud.auth().signOut().then(() => {
//登出成功
AlertDialog.show({
title: "提示",
message: "注销用户成功",
})
}).catch(() => {
//登出失败
});
}
//登录
login(){
// 注册
this.data = this.verifCode
cloud.auth().signIn({
credentialInfo: {
kind: 'email',
email: this.phone,
verifyCode: this.verifCode
}
}).then(user => {
//登录成功
router.replaceUrl({url:'pages/Index'})
}).catch((error:Promise<Result>) => {
//登录失败
this.data= JSON.stringify(error)
AlertDialog.show({
title: "提示",
message: JSON.stringify(error),
})
});
}
// 云端获取
getCloudQrCode(){
cloud.auth().requestVerifyCode({
action: VerifyCodeAction.REGISTER_LOGIN,
lang: 'zh_CN',
sendInterval: 60,
verifyCodeType: {
email: this.phone,
kind: "email",
}
}).then(verifyCodeResult => {
//验证码申请成功
console.log(JSON.stringify(verifyCodeResult))
this.data = JSON.stringify(verifyCodeResult)
AlertDialog.show({
title: "提示",
message: "获取验证码成功",
})
}).catch((error: Promise<Result>) => {
AlertDialog.show({
title: "提示",
message: "获取验证码失败",
})
//验证码申请失败
});
}
// 初始化参数：
initData(){
clearInterval(this.timer)
this.verifcationBtnStatus = true
this.verificationBtnStr= "验证码"
this.countDown= 60
}
// 发送验证码
getCode(){
if(this.phone==''){
AlertDialog.show({
title: "提示",
message: "请输入用户邮箱",
})
return;
}
this.verifcationBtnStatus = false
this.getCloudQrCode()
this.timer= setInterval(()=>{
this.verificationBtnStr = `${this.countDown}s`
if(this.countDown===0){
this.initData()
return;
}
this.countDown --
},1000)
}
build() {
Column({space:20}){
TextInput({placeholder:'请输入手机号：'}).width("100%").height(60).margin({top:20})
.onChange((value)=>{
this.phone = value
})
Row(){
TextInput({placeholder:"请输入验证码"}).layoutWeight(1).margin({right:20})
.onChange((value)=>{
this.verifCode =value
})
Button(this.verificationBtnStr).width(120).onClick(()=>{
this.getCode()
}).enabled(this.verifcationBtnStatus)
}.width("100%").height(60)
Button("登录").onClick( ()=>{
this.data = "1aaaaaa"
this.login()
}).width("100%").height(40).padding({
left:50,right:50
}).backgroundColor("#ff08be4b")
Button("注销").onClick( ()=>{
this.data = "1aaaaaa"
this.loginOut()
}).width("100%").height(40).padding({
left:50,right:50
}).backgroundColor("#ff08be4b")
Text(this.data).width("100%").height(200).backgroundColor(Color.Pink)
}.width("100%").height("100%").padding({left:10,right:10})
}
}
[*]获取验证码
https://i-blog.csdnimg.cn/blog_migrate/974229c05035123093c3d802df353f75.png
https://i-blog.csdnimg.cn/blog_migrate/46c4f9987db5ca211d2a6be4398e3287.png
[*]登录
https://i-blog.csdnimg.cn/blog_migrate/5142608f9103abfacb21f08396046420.png
// 提示用户已经登录过了，需要登出后才能重新登录
// 重而需要调用注销按钮中的登出方法
cloud.auth().signOut()
https://i-blog.csdnimg.cn/blog_migrate/f8a63eb65c902b74f7116b92cc8b470a.png
[*]点击注销按钮
https://i-blog.csdnimg.cn/blog_migrate/7c5a141692aa78a845833c0b9fe49a2a.png
[*]点击登录后，跳转到Index页面中
https://i-blog.csdnimg.cn/blog_migrate/972f5321135d0cee326d8ba031efec43.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]