HarmonyOS APP应用开发项目- MCA助手（Day03持续更新中~）

简言：

gitee地址：https://gitee.com/whltaoin_admin/money-controller-app.git
端云一体化开发在线文档：
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/agc-harmonyos-clouddev-view-0000001700053733-V5
注：此App参照此教程进行二次修改：https://www.bilibili.com/video/BV1q5411v7o7

一、邮箱认证服务开通流程

1. 官方操作文档地址：https://developer.huawei.com/consumer/cn/doc/AppGallery-connect-Guides/agc-auth-harmonyts-login-email-0000001522426989
2. 判断是否开通邮箱服务：

地址：https://developer.huawei.com/consumer/cn/service/josp/agc/index.html#/myProject/388421841222266117/9249519184595940179?appId=5765880207854757911

3. 集成SDK

参考网址：https://developer.huawei.com/consumer/cn/doc/AppGallery-connect-Guides/agc-auth-harmonyts-integration-0000001471227866

//步骤1 添加依赖
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"
  }

// 步骤2：初始化SDK文件
// 初始化方法一：
import {initialize} from  "@hw-agconnect/hmcore"
import jsonStr from "../../resources/rawfile/agconnect-services.json"
  onCreate(){
    try {
      initialize(this.context,jsonStr)
    }catch (e){
      console.error(JSON.stringify(e))
    }

  }
// 初始化方法二：
import {initialize} from  "@hw-agconnect/hmcore"
 onCreate(){
    // 初始化
      const context = this.context
      const  value = await context.resourceManager.getRawFileContent("agconnect-services.json")
      let json:string= buffer.from(value).toString("utf8")
      console.log(json)
      initialize(this.context,json)
  }

// 步骤三：开通应用网络权限
 "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
 ]

二、注册登录业务实现

TODO 注册功能实现：
应用通过用户邮箱进行注册，注册时输入密码和向邮箱发送的验证码进行注册，注册成功后直接进入到用户主页，并缓存用户信息
TODO 登录功能实现：
用户用户邮箱地址和密码进行登录，登录成功后进入到应用主页，并缓存用户信息。
TODO 记住用户账号实现：
在用户进行登录或注册操作成功后，进入到应用主页，只要用户不执行个人信息页的退出登录功能，下一次进入应用都将不用再次登录

1. 实现代码

import InputComponent from '../components/InputComponent';
import TitleComponent from '../components/TitleComponent';
import router from '@ohos.router';
import cloud from '@hw-agconnect/cloud';
import { Auth, VerifyCodeAction } from '@hw-agconnect/cloud';




@Entry
@Component
struct Login {
  aboutToAppear(): void {
    // 页面未加载时调用:
    cloud.auth().getCurrentUser().then(user=>{
      if(user){
        //业务逻辑
        AppStorage.setOrCreate("user",user)
        router.replaceUrl({url:"pages/MainPage/MainPage"})
      }
    });
  }
  @State message: string = 'Login';
  @State eMail:string = ''
  @State EMailPassword :string = '' // 邮箱密码
  @State vCode:string = "" // 验证码
  // 倒计时
  @State countDown :number = 60
  timer :number=0
  @State isRegister:boolean= false
  // 发送验证码
   sendCode(){
    // 倒计时
    this.startCountDown()
    // 生成验证码
     cloud.auth().requestVerifyCode({
       action: VerifyCodeAction.REGISTER_LOGIN,
       lang: 'zh_CN',
       sendInterval: 60,
       verifyCodeType: {
         email: this.eMail,
         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: "获取验证码失败",
       })
       //验证码申请失败
     });
  }
  //邮箱用户登录
  loginEMail(){
    cloud.auth().signIn({
      autoCreateUser: true,
      credentialInfo: {
        kind: 'email',
        password: this.EMailPassword,
        email: this.eMail
      }
    }).then(user => {
      //登录成功
      AppStorage.setOrCreate("user",user)
      router.replaceUrl({url:"pages/MainPage/MainPage"})
    }).catch((error:Promise<Result>) => {

      //登录失败
      AlertDialog.show({
        title: "提示",
        message: "用户登录失败，请重试",
      })
    });

  }
  // 注册用户
   registerUser(){
      try{
      cloud.auth().createUser({
          "kind": "email",
          "email": this.eMail,
          "password": this.EMailPassword,
          "verifyCode": this.vCode
        }).then(result => {
       //创建帐号成功后，默认已登录
       AlertDialog.show({
         title: "提示",
         message: "用户注册成功",
       })
        AppStorage.setOrCreate("user",result.getUser())
        router.replaceUrl({url:"pages/MainPage/MainPage"})
        })


      }catch(e){
        AlertDialog.show({
          title: "提示",
          message: "用户注册失败，请重试",
        })
      }


  }

  // 开始倒计时
  startCountDown(){
  this.timer =   setInterval(()=>{
      this.countDown--
      if(this.countDown===0){
        this.countDown=60
        clearInterval(this.timer)
      }
    },1000)
  }


  build() {
      Column(){
        // title
        TitleComponent({title:"登录"})
        // login_content
        Stack({alignContent:Alignment.Top}){
          Image($r("app.media.Login_icon")).width(88).height(88).offset({y:-44}).zIndex(999)

       Column({space:10}){
            // email
          InputComponent({title:"电子邮箱",inputIcon:$r("app.media.mail_icon"),placeholder:"请输入邮箱信息",
            change:(value:string)=>{
                this.eMail=value
          }})
            // pwd
          InputComponent({title:"密码",inputIcon:$r("app.media.pwd_icon"),placeholder:"请输入密码",inputType:InputType.Password,
          change:(value:string) =>{
            this.EMailPassword = value
          }
          })
            // VCode
          if(this.isRegister){
            Column(){
              Text("验证码").width("100%").textAlign(TextAlign.Start).fontWeight(500)
                .fontSize(16).fontColor(Color.Black).margin({bottom:14})
              Row(){
                TextInput({placeholder:"请输入验证码"})


                  .layoutWeight(1)
                  .backgroundColor(Color.Transparent)
                  .border({
                    width:1,
                    color:"#ff9b9b9b"

                  }).borderRadius(10)
                  .onChange((value)=>{
                    this.vCode = value
                  })
                Button(this.countDown==60?"点击获取验证码":`${this.countDown}s`).fontSize("10").margin({left:10}).width(100).padding(0).onClick((event: ClickEvent) => {
                  if(this.countDown===60){
                    this.sendCode()
                  }else{
                    AlertDialog.show({
                      message:"正在获取验证码，请等待..."
                    })
                  }


                })

              }.width("100%").height(50)

            }
          }
            // login_btn
            Button(this.isRegister?"注册":"登录").width(228).backgroundColor("#ff09b19d").margin({top:50})
              .onClick(()=>{
                // 登录方法
                if(this.isRegister){
                  // 注册用户
                  this.registerUser()
                }else{
                  // 登录用户
                   this.loginEMail()
                }
              })
            // re_btn
         Row(){
           Text(this.isRegister?"去登录":"去注册").fontSize(12).onClick(()=>{
             this.isRegister= !this.isRegister
           })
           Text("|").padding({left:10,right:10})
           Text("忘记密码").fontSize(12)
         }.width("100%").layoutWeight(1).justifyContent(FlexAlign.Center)

       }.width("100%").height("100%").padding({left:14,right:14}).margin({top:44})

        }.width("90%").backgroundColor(Color.White).margin({top:44}).layoutWeight(1)
        .borderRadius(20)
      }.width("100%").height("100%").backgroundColor($r("app.color.page_Color"))
  }
}

2. 效果图：
   1. 注册：

2. 登录

三、注销功能实现

TODO 注销功能说明
本应用进行了用户持久化处理，只要不进行退出用户操作，下次登录时仍然会保持上次的登录状态。

1. 实现代码：

// 页面四：个人信息页
import TitleComponent from '../../components/TitleComponent'
import router from '@ohos.router'
import { Router } from '@kit.ArkUI'
import cloud from '@hw-agconnect/cloud'

@Component
export  default struct My {
  build() {
    Column(){
      TitleComponent({title:"个人资料",titleColor:"#ffff"})

      Stack({alignContent:Alignment.Start}){
        Column().width("100%").height(120)
          .backgroundColor("#ffc3f6e1")
          .margin({top:50}).borderRadius(20).shadow({radius:10,color:"#fff"})
        Column(){
          Image($r("app.media.user")).width(66).height(66).borderRadius(22)
            .border({
            width:5,
            color:'#ff09b06d',
              style:BorderStyle.Solid
          }).shadow({radius:10,color:"#fff"})

          Text("追风的少年").offset({x:80,y:-30}).width("100%")
          Text("财富的意义，在于分享与贡献，而非单纯的积累。").fontSize(14).fontColor("#ff969191").margin({top:10})
            .offset({y:-10}).margin({right:10})
        }.width("100%").alignItems(HorizontalAlign.Start).margin({left:10})
        Image($r("app.media.right_i")).height(20).offset({
          y:60,x:270
        })

      }.width("100%").padding({left:30,right:30})


       Row(){
        Image($r("app.media.edit_icon")).height(30).margin({right:20})
        Text("编辑个人信息").layoutWeight(1).fontSize(14)
         Image($r("app.media.right_icon")).height(25)
       }.height(40).padding({left:5,right:10}).backgroundColor("#fff").margin(20)
      .borderRadius(10).shadow({radius:20,color:"#ff70e7d5"}).onClick(()=>{
        router.pushUrl({
          url:"pages/info/InfoEdit"
        })
       })

      Row(){
        Image($r("app.media.qrcode_icon_external")).height(25).margin({left:5,right:30})
        Text("个人二维码").layoutWeight(1).fontSize(14)
        Image($r("app.media.right_icon")).height(25)
      }.height(40).padding({left:5,right:10}).backgroundColor("#fff").margin(20)
      .borderRadius(10).shadow({radius:20,color:"#ff70e7d5"}).onClick(()=>{
        router.pushUrl({
          url :'pages/info/QrCodePage'
        })
      })
    
      Row(){
        Image($r("app.media.loginOut")).height(20).margin({left:10,right:30})
        Text("退出登录").layoutWeight(1).fontSize(14)
        Image($r("app.media.right_icon")).height(25)
      }.height(40).padding({left:5,right:10}).backgroundColor("#fff").margin(20)
      .borderRadius(10).shadow({radius:20,color:"#ff70e7d5"}).onClick(()=>{
        cloud.auth().signOut().then(() => {
          //登出成功
          AlertDialog.show({
            title: "提示",
            message: "用户已成功注销",

          })
          router.replaceUrl({url:'pages/Login'})
        }).catch((error:Promise<Result>) => {

          //登出失败
          AlertDialog.show({
            title: "提示",
            message: "注销用户失败，请重试",

          })
        });
      })

    }.width("100%").height("100%").backgroundImage($r("app.media.myPageBg"))
    .backgroundImageSize({width:"100%",height:"100%"})
  }
}

2. 效果图：

day03 登录注册业务功能基本实现