＃放码来战．端云一体化开发＃HarmonyOS 5 【农民叔叔】09.【端侧工程】用户手机号+短信验证码登录即注册-优快云博客

上一篇我们已集成认证服务SDK。

src>>main>>ets>>pages目录下新建登录页面LoginPage.ets，在登录页面引入auth

import auth, { AuthUser, VerifyCodeAction } from '@hw-agconnect/auth'

定义几个变量，带有@State装饰器

  @State phoneNo: string = ''; // 手机号
  @State vCode: string = ''; // 验证码
  @State vCodeTxt:string='获取验证码';
  @State vCodeEnabled:boolean=true; //  验证码按钮是否可用
  @State btnLoginEnabled:boolean=false; // 登录按钮是否可用
  @State isAgreed:boolean=false; // 是否同意协议

获取短信验证码时，需要判断用户输入的手机号是否合法（通过正则表达式）

  /**
   * 验证手机号
   * @returns
   */
  verifyPhone():boolean{
    let num=this.phoneNo.trim();
    const phoneRegex=/^1[3-9]\d{9}$/;
    let enabled=phoneRegex.test(num);
    if(!enabled){
      promptAction.showToast({message:'请输入正确的手机号'})
    }
    return enabled;
  }

调用auth.requestVerifyCode给合法的手机号发送短信验证码

/**
   * 获取验证码
   */
  getVerifyCode():void{
    if(!this.verifyPhone()){
      return;
    }
    // 倒计时
    this.waiting();
    auth.requestVerifyCode({
      action:VerifyCodeAction.REGISTER_LOGIN,
      lang:'zh-CN',
      sendInterval:30,
      verifyCodeType:{
        phoneNumber:this.phoneNo,
        countryCode:'86',
        kind:'phone'
      }
    }).then((verifyCodeResult) => {
      // 发送成功
      promptAction.showToast({message:'验证码已发送',duration:3000});
    }).catch((err:BusinessError) => {
      // 发送失败
      console.log(err.message);
    })
  }

间隔30秒才可以再次请求发送短信验证码，倒计时30秒

/**
   * 倒计时
   */
  waiting():void{
    let time:number=30;
    let intervalId=setInterval(()=>{
      time--;
      this.vCodeTxt=`${time}+s后重新获取`;
      this.vCodeEnabled=false;
      if(time<0){
        clearInterval(intervalId);
        this.vCodeTxt='获取验证码';
        this.vCodeEnabled=true;
      }
    },1000)
  }

是否打勾同意《隐私协议》

// 单选框
          Checkbox()
          .onChange((value) => {
              this.isAgreed=value;
            })

登录按钮调用auth.signIn方法，首次登录时创建用户（登录即注册）

/**
   * 登录
   */
  login():void{
    auth.signIn({
      credentialInfo:{
        kind:'phone',
        phoneNumber:this.phoneNo,
        countryCode:'86',
        verifyCode:this.vCode
      },
      autoCreateUser:true // 创建用户，登录即注册
    }).then((result) => {
      // 登录成功
      let user:AuthUser=result.getUser();
      let uModel=new UserModel();
      uModel.UId=user.getUid();
      uModel.Name=user.getDisplayName();
      uModel.Phone=user.getPhone();
      this.userController.saveUser(uModel); //  保存用户信息
      promptAction.showToast({message:'登录成功',duration:3000});
      // 跳转页面
      // router.replaceUrl({url:'/pages/Index'})
    }).catch((err:BusinessError) => {
      // 登录失败
      promptAction.showToast({message:'登录失败',duration:3000});
    })
  }

下一篇：通过用户首选项实现数据持久化