HarmonyOS云端开发(二)


登录认证服务以及云数据库使用

云端开发不需要存储token,由提供的API统一验证,假设未登录则跳转登录页,已登录 跳转首页。


一创建登录注册页面

根据上一章节写过的测试云端可使用,并且判断未登录则跳转登录页,已登录则跳转首页的逻辑,在pages目录下创建login.ets、register.ets、index.ets
在这里插入图片描述

二、开启认证服务

在这里插入图片描述

二、创建数据表

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.导出数据表

导出一个json格式,一个js格式
在这里插入图片描述
在这里插入图片描述
将导出的表 放到ets/db目录下
在这里插入图片描述

2.使用表 进行增删改查

以下为注册页面 会详细注释 看代码

// @ts-nocheck
//引入router路由跳转
import router from '@ohos.router';
//VerifyCodeAction 为集成的验证码函数
import cloud,{VerifyCodeAction} from "@hw-agconnect/cloud"
//配置数据库相关文件 将导出的数据表 引入  以下是页面的布局可以不用看 往下看
import appJSON from '../bd/app.json';
import {coupon} from '../bd/coupon'
import  {userInfo} from '../bd/userInfo'
@Entry
@Component
struct Register {
  @State message:string = '注册';
  tel:string ='';
  code:string = '';
  @State flag:boolean = true;
  @State num:number = 60;
  @State timer:any = ''; //定时器
  start(){
    this.timer = setInterval(()=>{
      this.num--;
      if(this.num==0){
        clearInterval(this.timer);
        this.flag =true;
        this.num=60;
      }
    },1000)
  }
  
  build() {
    Row() {
      Column({space:20}) {
        Image($rawfile("icon.png"))
          .width(150)
          .height(150)
          .margin({top:100,bottom:50})
        TextInput({placeholder:'手机号'})
        .onChange(val=>{
          this.tel=val;
        })
        Row({space:5}){
          TextInput({placeholder:'验证码'})
            .onChange(val=>{
              this.code=val;
            })
            .width(120)
            .height(40)
          Button(this.flag?"获取验证码":(this.num>=10?this.num:"0"+this.num)+"s后获取")
            .height(40)
            .onClick( async()=>{
              //验证手机号
              if(!(/^1[3-9]\d{9}$/.test(this.tel))){
              AlertDialog.show({
                title:"提示",
                message:"手机号格式错误",
              })
                return
              }
              //调用方法  -------------看这里
              //使用requestVerifyCode函数 看送验证码
              await cloud.auth().requestVerifyCode({
                action:VerifyCodeAction.REGISTER_LOGIN,
                lang:'zh_ch',
                sendInterval:60,
                verifyCodeType:{
                  phoneNumber:this.tel,
                  countryCode:"86",
                  kind:'phone'
                }
              })
              AlertDialog.show({
                title:"提示",
                message:"验证码发送成功,请注意查收"
              })
              //按钮设置禁用状态 开始倒计时
            this.flag = false;
              this.start()

            })
              // @ts-ignore
            .enabled(this.flag)
        }
        .width('100%')
        .width('100%')
        Button("注册")
          .width('100%')
          .height(40)
          .onClick(async()=>{
            //验证手机号和验证码
            if(!(/^1[3-9]\d{9}$/.test(this.tel))){
              AlertDialog.show({
                title:"提示",
                message:"手机号格式不对"
              })
              return false;
            }
            if(!(/^\d{6}$/.test(this.code))){
              AlertDialog.show({
                title:"提示",
                message:"验证码格式不对"
              })
              return false;
            }
            //看这里 -----------点击注册按钮 使用 createUser函数进行注册,
            //如果已经注册过了那么会返回对应的错误码,如果想重新测试在认证服务那把注册手机号删掉即可
            let result = await cloud.auth().createUser({
              kind: 'phone',
              countryCode: '86',
              phoneNumber: this.tel,
              verifyCode: this.code
            })
            //获取用户对象 此时 对于云端开发而言 已经是注册成功了 并且是可以直接登录的
            let user = result.getUser();
            let id = user.getUid();
            console.log("用户id",id);
          //关联数据库
          //用户信息余额
          //重点来了--------------------使用表来进行新增或者修改
            await cloud.database({objectTypeInfo:appJSON,zoneName:'charging'})
               //选择的userInfo表
              .collection(userInfo)
              //如果id(主键一致那么就是修改,主键不一致就是添加)
              //给新用户 添加一些余额
              .upsert({
                id,
                money:'200'
              })
          //优惠券
          //给新用户添加一些优惠券 可以是一个或者多个
            await cloud.database({objectTypeInfo:appJSON,zoneName:"charging"})
            //选择coupon表
              .collection(coupon)
              .upsert([
                {
                  id:Date.now()+'1',
                  userId:id,
                  num:'1',
                  date:Date.now().toString()
                },
               {
                  id:Date.now()+'2',
                  userId:id,
                  num:'2',
                  date:Date.now().toString()
                }
              ])
          // 跳转到应用首页
            router.replaceUrl({
              url:'pages/Index'
            })
          })
        Text('已有账号,去登录')
          .fontColor('#999999')
          .decoration({type:TextDecorationType.Underline})
          .onClick(()=>{
            router.replaceUrl({
              url:'pages/login'
            })
          })
      }
      .width('100%')
    }
    .margin(10)
  }
}

3.查看云数据库

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

张帅涛_666

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值