文章目录
- 登录认证服务以及云数据库使用
- 一创建登录注册页面
- 二、开启认证服务
- 二、创建数据表
- 1.导出数据表
- 2.使用表 进行增删改查
- 3.查看云数据库
登录认证服务以及云数据库使用
云端开发不需要存储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)
}
}