HarmonyOS鸿蒙NEXT中用户手机号+短信验证码登录即注册

HarmonyOS鸿蒙NEXT中用户手机号+短信验证码登录即注册

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

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

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

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

[@State](/user/State) phoneNo: string = ''; // 手机号
[@State](/user/State) vCode: string = ''; // 验证码
[@State](/user/State) vCodeTxt:string='获取验证码';
[@State](/user/State) vCodeEnabled:boolean=true; // 验证码按钮是否可用
[@State](/user/State) btnLoginEnabled:boolean=false; // 登录按钮是否可用
[@State](/user/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});
  })
}

登录/注册成功后，在手机APP端保存auth返回的用户信息。

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