鸿蒙 HarmonyOS NEXT端云一体化开发-认证服务篇

一、开通认证服务

地点：AppGallery Connect (huawei.com)

1. 步骤：
2. 1 进入到项目设置页面中，并点击左侧菜单中的认证服务
3. 2 选择需要开通的服务并开通

复制代码

二、端侧项目情况配置


添加依赖

1. entry目录下的oh-package.json5
2. // 添加：主要前2个依赖
3. "dependencies": {
4.     "@hw-agconnect/cloud": "^1.0.0",
5.     "@hw-agconnect/hmcore": "^1.0.0",
6.     "@hw-agconnect/auth-component": "^1.0.0", // 可选
7.     "long": "5.2.1"
8.   }

复制代码

开通网络权限

1. // 文件名：module.json5
2. // 路径：src/main/module.json5
3.   "requestPermissions": [
4.       {
5.         "name": "ohos.permission.INTERNET" // 网络权限
6.       },
7.     ]

复制代码

更新agconnect-services.json文件

1. // AGC网站提示：下载最新的配置文件（如果您修改了项目、应用信息或者更改了某个开发服务设置，可能需要更新该文件）
2. 为了确保项目不会出错，建立更新下该配置文件

复制代码

三 认证组件界面示例

• 新建Login.ets页面，并设置成为应用首页
  

• Login.ets调用认证组件
  

1. import { AuthMode, Login } from '@hw-agconnect/auth-component';
2. import router from '@ohos.router';
5. @Entry
6. @Component
7. struct MyLogin {
8.   @State message: string = 'Hello World';
10.   build() {
11.    Column(){
12.      Text("test")
13.      // auth-component 中的组件Login
14.      Login({
15.        modes:[AuthMode.PHONE_VERIFY_CODE] // 手机验证码登录
16.        ,
17.        onSuccess:()=>{
18.          //登录成功后的回调
19.          router.pushUrl({url:'pages/Index'})
20.        }
22.      }){
23.        Button("登录").height(60).width("100%")
24.      }
27.    }.width("100%").height("100%")
28.   }
29. }

复制代码

四、自界说登录组件

1. // 参考链接：https://developer.huawei.com/consumer/cn/doc/AppGallery-connect-Guides/agc-auth-harmonyos-arkts-login-phone-0000001631566338
3. import cloud from '@hw-agconnect/cloud';
4. import { Auth, VerifyCodeAction } from '@hw-agconnect/cloud';
6. @Entry
7. @Component
8. struct PageTest {
9.   @State verificationBtnStr:string= "验证码"
10.   phone:string = ""
11.   @State verifcationBtnStatus:boolean = true
12.   @State timer :number = 0
13.   @State countDown:number = 60
14.   // 云端获取
15.   getCloudQrCode(){
16.     cloud.auth().requestVerifyCode({
17.       action: VerifyCodeAction.REGISTER_LOGIN,
18.       lang: 'zh_CN',
19.       sendInterval: 60,
20.       verifyCodeType: {
21.         phoneNumber: this.phone,
22.         countryCode: '86',
23.         kind: "phone"
24.       }
25.     }).then(verifyCodeResult => {
26.       //验证码申请成功
27.       console.log(JSON.stringify(verifyCodeResult))
28.       AlertDialog.show({
29.         title: "提示",
30.         message: "获取验证码成功",
31.       })
32.     }).catch((error: Promise<Result>) => {
33.       AlertDialog.show({
34.         title: "提示",
35.         message: "获取验证码失败",
36.       })
37.       //验证码申请失败
38.     });
40.   }
41.   // 初始化参数：
42.   initData(){
43.     clearInterval(this.timer)
44.     this.verifcationBtnStatus = true
45.     this.verificationBtnStr  = "验证码"
46.     this.countDown  = 60
47.   }
48.   // 发送验证码
49.   getCode(){
50.     if(this.phone==''){
51.       AlertDialog.show({
52.         title: "提示",
53.         message: "请输入手机号码",
55.       })
56.       return;
57.     }
58.     this.verifcationBtnStatus = false
60.     this.getCloudQrCode()
63.     this.timer  = setInterval(()=>{
64.       this.verificationBtnStr = `${this.countDown}s`
65.       if(this.countDown===0){
66.         this.initData()
67.         return;
68.       }
70.       this.countDown --
72.     },1000)
73.   }
74.   build() {
75.     Column({space:20}){
76.       TextInput({placeholder:'请输入手机号：'}).width("100%").height(60).margin({top:20})
77.         .onChange((value)=>{
78.           this.phone = value
79.         })
80.       Row(){
81.         TextInput({placeholder:"请输入验证码"}).layoutWeight(1).margin({right:20})
82.         Button(this.verificationBtnStr).width(120).onClick(()=>{
83.           this.getCode()
85.         }).enabled(this.verifcationBtnStatus)
87.       }.width("100%").height(60)
88.       Button("登录").width("100%").height(40).padding({
89.         left:50,right:50
90.       }).backgroundColor("#ff08be4b")
91.     }.width("100%").height("100%").padding({left:10,right:10})
92.   }
93. }

复制代码

• 效果：
  

五、邮箱登录验证

1. import cloud from '@hw-agconnect/cloud';
2. import { Auth, VerifyCodeAction } from '@hw-agconnect/cloud';
3. import router from '@ohos.router';
5. @Entry
6. @Component
7. struct PageTest {
8.   @State verificationBtnStr:string= "验证码"
9.   @State phone:string = ""
10.   @State verifcationBtnStatus:boolean = true
11.   @State timer :number = 0
12.   @State countDown:number = 60
13.   @State data:string = ""
14.   @State verifCode:string = ""
15.   // 注销
16.   loginOut(){
17.     cloud.auth().signOut().then(() => {
18.       //登出成功
19.       AlertDialog.show({
20.         title: "提示",
21.         message: "注销用户成功",
24.       })
25.     }).catch(() => {
26.       //登出失败
27.     });
28.   }
29.   //登录
30.    login(){
31.    
32.     // 注册
33.      this.data = this.verifCode
35.      cloud.auth().signIn({
36.        credentialInfo: {
37.          kind: 'email',
38.          email: this.phone,
39.          verifyCode: this.verifCode
40.        }
41.      }).then(user => {
42.        //登录成功
43.        router.replaceUrl({url:'pages/Index'})
44.      }).catch((error:Promise<Result>) => {
45.        //登录失败
46.        this.data= JSON.stringify(error)
47.        AlertDialog.show({
48.          title: "提示",
49.          message: JSON.stringify(error),
51.        })
52.      });
54.   }
55.   // 云端获取
56.   getCloudQrCode(){
57.     cloud.auth().requestVerifyCode({
58.       action: VerifyCodeAction.REGISTER_LOGIN,
59.       lang: 'zh_CN',
60.       sendInterval: 60,
61.       verifyCodeType: {
62.         email: this.phone,
63.         kind: "email",
64.       }
65.     }).then(verifyCodeResult => {
66.       //验证码申请成功
67.       console.log(JSON.stringify(verifyCodeResult))
68.       this.data = JSON.stringify(verifyCodeResult)
69.       AlertDialog.show({
70.         title: "提示",
71.         message: "获取验证码成功",
72.       })
73.     }).catch((error: Promise<Result>) => {
74.       AlertDialog.show({
75.         title: "提示",
76.         message: "获取验证码失败",
77.       })
78.       //验证码申请失败
79.     });
81.   }
82.   // 初始化参数：
83.   initData(){
84.     clearInterval(this.timer)
85.     this.verifcationBtnStatus = true
86.     this.verificationBtnStr  = "验证码"
87.     this.countDown  = 60
88.   }
89.   // 发送验证码
90.   getCode(){
91.     if(this.phone==''){
92.       AlertDialog.show({
93.         title: "提示",
94.         message: "请输入用户邮箱",
96.       })
97.       return;
98.     }
99.     this.verifcationBtnStatus = false
101.     this.getCloudQrCode()
104.     this.timer  = setInterval(()=>{
105.       this.verificationBtnStr = `${this.countDown}s`
106.       if(this.countDown===0){
107.         this.initData()
108.         return;
109.       }
111.       this.countDown --
113.     },1000)
114.   }
115.   build() {
116.     Column({space:20}){
117.       TextInput({placeholder:'请输入手机号：'}).width("100%").height(60).margin({top:20})
118.         .onChange((value)=>{
119.           this.phone = value
120.         })
121.       Row(){
122.         TextInput({placeholder:"请输入验证码"}).layoutWeight(1).margin({right:20})
123.           .onChange((value)=>{
124.             this.verifCode =value
125.           })
126.         Button(this.verificationBtnStr).width(120).onClick(()=>{
127.           this.getCode()
129.         }).enabled(this.verifcationBtnStatus)
131.       }.width("100%").height(60)
132.       Button("登录").onClick( ()=>{
133.         this.data = "1aaaaaa"
134.         this.login()
136.       }).width("100%").height(40).padding({
137.         left:50,right:50
138.       }).backgroundColor("#ff08be4b")
140.       Button("注销").onClick( ()=>{
141.         this.data = "1aaaaaa"
142.         this.loginOut()
144.       }).width("100%").height(40).padding({
145.         left:50,right:50
146.       }).backgroundColor("#ff08be4b")
149.       Text(this.data).width("100%").height(200).backgroundColor(Color.Pink)
150.     }.width("100%").height("100%").padding({left:10,right:10})
151.   }
152. }

复制代码

• 获取验证码
  

• 登录
  

1. // 提示用户已经登录过了，需要登出后才能重新登录
2. // 重而需要调用注销按钮中的登出方法
3.    cloud.auth().signOut()

复制代码

• 点击注销按钮
  

• 点击登录后，跳转到Index页面中
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。