一、开通认证服务

地址：AppGallery Connect (huawei.com)

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

二、端侧项目环境配置

添加依赖

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

三 认证组件界面示例

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

2. 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:[AuthMode.PHONE_VERIFY_CODE] // 手机验证码登录        ,        onSuccess:()=>{          //登录成功后的回调          router.pushUrl({url:'pages/Index'})        }       }){        Button("登录").height(60).width("100%")      }      }.width("100%").height("100%")   } } 

四、自定义登录组件

// 参考链接：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) => {       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})   } } 

1. 效果：

五、邮箱登录验证

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) => {        //登录失败        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) => {       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})   } } 

• 获取验证码

• 登录

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

• 点击注销按钮

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