一、获取昵称和头像

TODO：用户通过邮箱登录后跳转到用户信息页，用户信息页展示用户头像和用户昵称信息，用户头像和用户昵称在用户信息页中均可修改，在点击下方的更新信息按钮后，新的用户信息将重新传递到云端。

1. 方法一：云端API

// 获取用户信息的两种方法:
cloud.auto().getCruuentUser()

2. 方法二：AppStorage

// 方法二：在用户登录时，将返回的用户信息存储在AppStorage中，在用户信息页中在取出展示。
// 登录页主要代码：
 const result = await cloud.auth().signIn({
         credentialInfo: {
           kind: 'email',
           email: this.phone,
           verifyCode: this.verifCode
         }
       })
const user = result.getUser()
 AppStorage.setOrCreate("user",user) // 存
// 用户信息页：
// 注意 Authuse 和null是不兼容的，所以需要联合类型
 @StorageLink("user")  user :AuthUser |null = null
  aboutToAppear(): void {
    this.UserName =  this.user?.getDisplayName()? this.user?.getDisplayName():""
    this.UserImgUrl = this.user?.getPhotoUrl()?this.user?.getPhotoUrl():""
  }

3. 示例

TODO：用户通过邮箱登录后，获取到用户昵称和头像

登录页：

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(() => {
      //登出失败
    });
  }
  //登录
  async login(){
    
    
     this.data = this.verifCode
     try{
       const result = await cloud.auth().signIn({
         credentialInfo: {
           kind: 'email',
           email: this.phone,
           verifyCode: this.verifCode
         }
       })
       const user = result.getUser()
       AppStorage.setOrCreate("user",user)
       router.replaceUrl({url:'pages/UserInfo'})
     } catch (e) {
       this.data= JSON.stringify(e)
       AlertDialog.show({
         title: "提示",
         message: JSON.stringify(e),
       })
     }
     
  }
  // 云端获取
  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})
  }
}

用户信息页：

import { AuthUser } from '@hw-agconnect/cloud'
@Entry
@Component
struct UserInfo {
  @State message: string = 'Hello World'
  @State UserImgUrl:string = 'app.media.user_dark'
  @State UserName:string = 'test'
  // 注意 Authuse 和null是不兼容的，所以需要联合类型
  @StorageLink("user")  user :AuthUser |null = null
  aboutToAppear(): void {
    this.UserName =  this.user?.getDisplayName()? this.user?.getDisplayName():""
    this.UserImgUrl = this.user?.getPhotoUrl()?this.user?.getPhotoUrl():""
  }
 
  build() {
      Column({space:20}){
        Image(this.UserImgUrl?this.UserImgUrl:$r("app.media.user_dark")).width(100).height(100).margin({top:20})
          .onClick(()=>{
            this.UserImgUrl = "https://img0.baidu.com/it/u=4218602670,1294229692&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
          })
        TextInput({placeholder:"请设置昵称",text:this.UserName}).width("100%").height(40).margin({left:20,right:20})
          .onChange((value)=>{
            this.UserName = value
          })
        Text(this.UserImgUrl).width("100%").height(200)
      
      }.width("100%").height("100%")
  }
}

二、云存储服务

本项目在创建项目时就开通了云存储业务，所以就不演示了。

注意点1：免费额度为：5G（超过则需要付费）

注意点2：如果是需要点击开通该服务的，在操作完开通流程后，记得更新agconnect-services.json文件

三、云存储上传文件

TODO：用户登录后，通过点击头像打开相册，将相册中的图片上传到云存储中，并更新用户信息。:

// 示例代码
 // 步骤1：打开相册
const options = new picker.PhotoSelectOptions()
options.MIMEType= picker.PhotoViewMIMETypes.IMAGE_TYPE // img类型
options.maxSelectNumber=1 // 选择图片数量
const result = await new picker.PhotoViewPicker().select(options)
//步骤2：上传
await cloud.storage().upload({
  localPath:result.photoUris[0],
  cloudPath:`images/${this.user?.getUid()}.jpg`
})
//步骤3：回显
const url = await cloud.storage().getDownloadURL(`images/${this.user?.getUid()}.jpg`)
this.UserImgUrl = url // 赋值给UserImgUrl显示到用户信息页上

完整示例：

用户信息页：

import cloud, { AuthUser } from '@hw-agconnect/cloud'
import { picker } from '@kit.CoreFileKit'
@Entry
@Component
struct UserInfo {
  @State message: string = 'Hello World'
  @State UserImgUrl:string = 'app.media.user_dark'
  @State UserName:string = 'test'
  // 注意 Authuse 和null是不兼容的，所以需要联合类型
  @StorageLink("user")  user :AuthUser |null = null
  aboutToAppear(): void {
    this.UserName =  this.user?.getDisplayName()? this.user?.getDisplayName():""
    this.UserImgUrl = this.user?.getPhotoUrl()?this.user?.getPhotoUrl():""
  }
  async updateInfo(){
    await this.user?.updateProfile({
      displayName:this.UserName,
      photoUrl:this.UserImgUrl
    })
    AlertDialog.show({
      title: "提示",
      message: "用户信息更新成功",
    })
  }
  build() {
      Column({space:20}){
        Image(this.UserImgUrl?this.UserImgUrl:$r("app.media.user_dark")).width(100).height(100).margin({top:20})
          .onClick(async ()=>{
            // this.UserImgUrl = "https://img0.baidu.com/it/u=4218602670,1294229692&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
            try{
              // 打开相册
              const options = new picker.PhotoSelectOptions()
              options.MIMEType= picker.PhotoViewMIMETypes.IMAGE_TYPE // img类型
              options.maxSelectNumber=1 // 选择图片数量
              const result = await new picker.PhotoViewPicker().select(options)
              // 上传
              await cloud.storage().upload({
                localPath:result.photoUris[0],
                cloudPath:`images/${this.user?.getUid()}.jpg`
              })
              // 回显
              const url = await cloud.storage().getDownloadURL(`images/${this.user?.getUid()}.jpg`)
              this.UserImgUrl = url
            } catch (e) {
            }
          })
        TextInput({placeholder:"请设置昵称",text:this.UserName}).width("100%").height(40).margin({left:20,right:20})
          .onChange((value)=>{
            this.UserName = value
          })
        Text(this.UserImgUrl).width("100%").height(200)
        Button("更新信息")
          .onClick(()=>{
            this.updateInfo()
          })
      }.width("100%").height("100%")
  }
}

效果

四、图片缓存问题

1. 问题说明：

因为本次实例是以登录用户的UUID作为图片的名称上传的，所以如果切换图片上传的话，
新的图片地址和旧的图片地址都是一样的，系统就会认为是同一张图片，从而只显示系统中存在
图片，而并不会重新更新云存储中新的图片。

2. 解决方法：

// 在每次上传成功后，重新更新存储图片的RUL即可。
// 方法1：可以修改上传时的图片名称
// 方法2：在url后添加一个随机的参数

// 方法1：`images/${this.user?.getUid()}${new Date().getTime().toString()}.jpg`
// 打开相册
const options = new picker.PhotoSelectOptions()
options.MIMEType= picker.PhotoViewMIMETypes.IMAGE_TYPE // img类型
options.maxSelectNumber=1 // 选择图片数量
const result = await new picker.PhotoViewPicker().select(options)
// 上传
const imgName = `images/${this.user?.getUid()}${new Date().getTime().toString()}.jpg`
await cloud.storage().upload({
  localPath:result.photoUris[0],
  cloudPath:imgName
})
// 回显
const url = await cloud.storage().getDownloadURL(imgName)
this.UserImgUrl = url

五：初始化页面判断（自动登录）

TODO：在应用的登录界面，初始化Auth实例，获取AGC的用户信息，检查是否有已经登录的用户。如果有，则可以直接进入用户界面，否则显示登录界面。

// 在生命周期方法内判断，如果存在user信息就直接跳转到用户信息页中
aboutToAppear(): void {
    cloud.auth().getCurrentUser().then(user=>{
      if(user){
        //业务逻辑
        AppStorage.setOrCreate("user",user)
        router.replaceUrl({url:'pages/UserInfo'})
      }
    });
  }

六：上传进度功能实现

TODO：点击头像框时，跳转到图库中，选择需要的头像并点击确定后，返回到用户信息页中，加载文件上传的进度，到100%时，头像上传成功，并显示选择的图片。

// 使用层叠布局将上传进度显示在头像框上
// 通过头像框是否可用判断是否显示进度框
import cloud, { AuthUser } from '@hw-agconnect/cloud'
import { picker } from '@kit.CoreFileKit'
@Entry
@Component
struct UserInfo {
  @State message: string = 'Hello World'
  @State UserImgUrl:string = 'app.media.user_dark'
  @State UserName:string = 'test'
  @State loadingText:string = "0" // 上传进度
   @State UserImgEnable:boolean = true // 头像是否可用
  // 注意 Authuse 和null是不兼容的，所以需要联合类型
  @StorageLink("user")  user :AuthUser |null = null
  aboutToAppear(): void {
    this.UserName =  this.user?.getDisplayName()? this.user?.getDisplayName():""
    this.UserImgUrl = this.user?.getPhotoUrl()?this.user?.getPhotoUrl():""
  }
  async updateInfo(){
    await this.user?.updateProfile({
      displayName:this.UserName,
      photoUrl:this.UserImgUrl
    })
    AlertDialog.show({
      title: "提示",
      message: "用户信息更新成功",
    })
  }
  build() {
      Column({space:20}){
        Stack(){
          Image(this.UserImgUrl?this.UserImgUrl:$r("app.media.user_dark")).width(100).height(100).borderRadius(100)
            .enabled(this.UserImgEnable)
            .onClick(async ()=>{
              try{
                // 打开相册
                const options = new picker.PhotoSelectOptions()
                options.MIMEType= picker.PhotoViewMIMETypes.IMAGE_TYPE // img类型
                options.maxSelectNumber=1 // 选择图片数量
                const result = await new picker.PhotoViewPicker().select(options)
                // 上传
                const imgName = `images/${this.user?.getUid()}${new Date().getTime().toString()}.jpg`
                await cloud.storage().upload({
                  localPath:result.photoUris[0],
                  cloudPath:imgName,
                  onUploadProgress:(value)=>{
                    this.UserImgEnable = false
                     this.loadingText =  Math.floor(100* value.loaded/value.total).toString()
                  }
                })
                this.UserImgEnable = true
                // 回显
                const url = await cloud.storage().getDownloadURL(imgName)
                this.UserImgUrl = url
              } catch (e) {
              }
            })
        // 判断头像框可用状态
         if(!this.UserImgEnable){
           Text(`${this.loadingText}%`).width(100).height(100).borderRadius(100).backgroundColor(Color.Black).opacity(.5)
             .fontWeight(700)
             .fontSize(24)
             .fontColor(Color.Black)
             .textAlign(TextAlign.Center)
         }
        }.margin({top:20})
        TextInput({placeholder:"请设置昵称",text:this.UserName}).width("100%").height(40).margin({left:20,right:20})
          .onChange((value)=>{
            this.UserName = value
          })
        Text(this.UserImgUrl).width("100%").height(200)
        Button("更新信息")
          .onClick(()=>{
            this.updateInfo()
          })
      }.width("100%").height("100%")
  }
}