云函数uni-id用户体验

<template>
	<view class="content">
		<input type="text" value="" placeholder="请输入用户名" v-model="username" />
		<input type="password" value="" placeholder="请输入密码" v-model="password" />
		<input type="text" value="" placeholder="请输入验证码" v-model="code" />
		<input type="text" value="" placeholder="请输入手机号码" v-model="phoneNumber" />
		<image @click="refresh" id="codeimgid" :src="codeImg" v-if="codeImg"></image>
		<button type="primary" size="mini" @click="register">注册</button>
		<button type="primary" size="mini" @click="login">登录</button>
		<button type="primary" size="mini" @click="loginOut">退出登录</button>
		<button type="primary" size="mini" @click="getUserInfo">获取用户信息</button>
		<button type="primary" size="mini" @click="verify">校验验证码</button>
		<button type="primary" size="mini" @click="phoneCode">获取手机验证码</button>
	</view>
</template>

<script>
	var   uniIdToken=uni.getStorageSync("uni_id_token");
	console.log(uniIdToken,"缓存的token");
	export default {
		data() {
			return {
				username: '',
				password: '',
				code:'',
				action:"register",
				codeImg:'',
				phoneNumber:""
			}
		},
		created() {
			this.createCaptcha();
		},
		onLoad() {
            
		},
		methods: {
			phoneCode(){
				let  that=this;
				uniCloud.callFunction({
					name:"use-center",
					data:{
						action:"sendSmsCode",
						mobile:that.phoneNumber
					},
					success:res=>{
						console.log(res.result,"手机验证码");
						if(res.result.code===0){
 							 uni.showToast({
 							 	title:"获取成功",
								icon:"success",
 							 })
						}else{
							uni.showToast({
								title:res.result.msg,
								icon:"none"
							})
						}
					}
				})
			},
			 
			refresh(){
				let  that=this;
				uniCloud.callFunction({
					name:"use-center",
					data:{
						action:"refresh"
					},
					success:res=>{
						console.log(res.result,"刷新验证码");
						if(res.result.code===0){
							uni.showToast({
								title:"刷新成功",
								icon:"success"
							})
							that.codeImg=res.result.captchaBase64;
						}else{
							uni.showToast({
								title:res.result.msg,
								icon:"none"
							})
						}
					}
				})
			},
			verify(){
				let  that=this;
				let  captcha=this.code;
				console.log(captcha);
				uniCloud.callFunction({
					name:"use-center",
					data:{
						action:"verify",
						captcha  
					},
					success:res=>{
						console.log(res.result,"校验验证码");
						if(res.result.code===0){
							uni.showToast({
								title:"校验成功",
								icon:"success"
							})
						}else{
							uni.showToast({
								title:res.result.message,
								icon:"none"
							})
						}
					}
				})
			},
			createCaptcha(){
				let  that=this;
				uniCloud.callFunction({
					name:"use-center",
					data:{
						action:"createCaptcha"
					},
					success:res=>{
						console.log(res.result,"获取验证码");
						if(res.result.code===0){
							uni.showToast({
								title:"获取成功",
								icon:"success"
							})
							that.codeImg=res.result.captchaBase64;
						}else{
							uni.showToast({
								title:res.result.msg,
								icon:"none"
							})
						}
					}
				})
			},
			getUserInfo(){
				uniCloud.callFunction({
					name:"use-center",
					data:{
						action:"getUserInfo",
						uniIdToken
					},
					success:res=>{
						console.log(res,"获取用户信息");
						if(res.result.code===0){
							uni.showToast({
								title:"获取成功",
								icon:"success"
							})
						}else{
							uni.showToast({
								title:res.result.msg,
								icon:"none"
							})
						}
					}
				})
			},
			loginOut(){
				 
				uniCloud.callFunction({
					name:"use-center",
					data:{
 						action:"logout",
						uniIdToken
					},
					success:res=>{
						console.log(res,"退出信息");
						if(res.result.code===0){
							uni.showToast({
								title:"退出成功",
								icon:"success"
							})
							uni.removeStorageSync("uni_id_token");
							uni.removeStorageSync("uni_id_token_expired");
						}else{
							uni.showToast({
								title:res.result.msg,
								icon:"none"
							})
						}
					}
				})
			},
			req(){
				let {
					username,
					password,
					action
				} = this;
				
				return  new  Promise((resolve,reject)=>{
					uniCloud.callFunction({
						name:"use-center",
						data:{
							username,
							password,
							action
						},
						success:res=>{
							resolve(res);
						},
						fail:err=>{
							reject(err);
						}
					})
				})
			},
			register(){
				this.req().then(res=>{
					console.log(res.result,"注册信息");
					if(res.result.code==0){
						uni.showToast({
							title:"注册成功",
							icon:"success"
						})
						const {
						    token,
						    tokenExpired
						  } = res.result;
						  console.log(token,"token");
						  if(token) {
						    uni.setStorageSync('uni_id_token', token)
						    uni.setStorageSync('uni_id_token_expired', tokenExpired)
						  }
					}else{
						uni.showToast({
							title:res.result.msg,
							icon:"none"
						})
					}
					 
				}).catch(err=>{
					console.log(err,"错误信息");
				})
			},
			login() {
				 
				let {
					username,
					password,
					action
				} = this;
				uniCloud.callFunction({
					name: "use-center",
					data: {
						action:"login",
						username,
						password
					},
					success: res => {
						console.log(res.result);
						if(res.result.code===0){
						   uni.showToast({
						   	title:"登录成功",
						   	icon:"none"
						   })
						   const {
						       token,
						       tokenExpired
						     } = res.result
						     if(token) {
						       uni.setStorageSync('uni_id_token', token)
						       uni.setStorageSync('uni_id_token_expired', tokenExpired)
						     }
						}else{
							uni.showToast({
								title:res.result.msg,
								icon:"none"
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
  button{
	  margin-top: 20px;
	  width: 200px;
	  letter-spacing: 1px;
  }
	input {
		width: 70%;
		height: 30px;
		background-color: #ddd;
		padding-left: 10px;
		margin: 5px;
		border-radius: 1px;
		font-size: 12px;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	#codeimgid{
		width: 100px;
		height: 30px;
		background-size: cover;
		padding: 20rpx;
	}
</style>

云函数
‘use strict’;
const uniID=require(“uni-id”);
const uniCaptcha=require(“uni-captcha”);
exports.main = async (event, context) => {

//event为客户端上传的参数
console.log('event : ', event)
 const {
        username,
        password
    } = event;
	console.log(username,password,"信息");
   
  let res ={};
  switch(event.action){
	  // 注册
	 case   "register":{
		 //自己额外增加的校验密码规范的逻辑（可选）
		 //强弱密码校验,密码至少包含大写字母，小写字母，数字，且不少于6位
		 if(!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{6,16}$/.test(password)){
		   return {
		     code: 401,
		     msg: '密码至少包含大写字母，小写字母，数字，且不少于6位'
		   }
		 }
		 // 自动验证用户名是否与已经注册的用户名重复，如果重复会直接返回错误。否则会自动生成token并加密password存储username、password、token到数据表uni-id-users，并返回如上响应参数
		res = await uniID.register({ //支持传入任何值，比如可以直接传入mobile即可设置手机号码，切勿直接传入event否则这是一个极大的安全问题
		    username,
		    password
		}) 
		break  ;
	 }
	 // 登录
	 case  "login":{
		 res = await uniID.login({
		 		username,
		 		password 
		 	})
		 break;
	 }
	 // 退出登录
	 case  "logout":{
		 res = await uniID.logout(event.uniIdToken);
		 break;
	 }
	 // 获取用户信息
	 case  "getUserInfo":{
		 
		let  payload = await uniID.checkToken(event.uniIdToken);
		  console.log(payload,"payload");
		   if (payload.code) {
		   	return payload
		   }
		  res = await uniID.getUserInfo({
		     uid: payload.uid,
		     field: ['mobile']
		   })
		   break;
	 }
	 
	 case  "createCaptcha":{
		res = await uniCaptcha.create({
			scene:"login",
			size:4
		});
		 break;
	 }
	 case  "refresh":{
	 			res = await uniCaptcha.refresh({
	 				scene:"login",
	 				size:4
	 			});
	 			 break;
	 }
	 case  "verify":{
		res = await uniCaptcha.verify({
			scene:"login",
			captcha:event.captcha
		});
		 break;
	 }
	 case   "sendSmsCode":{
		 const {
		 		mobile
		 	} = event
		   // 生成验证码可以按自己的需求来，这里以生成6位数字为例
		   const randomStr = '00000' + Math.floor(Math.random() * 1000000)
		   const code = randomStr.substring(randomStr.length - 6)
		 console.log(code);
		  res = await uniID.sendSmsCode({
		 	 mobile,
		     code,
			 templateId:"",
		     type: 'login'
		 	})
			
			break;
	 }
	 default: {
		 res={
			 code:774,
			 msg:"请求非法"
		 }
	 }
	 
	 
  }
     
       
//返回数据给客户端
return res

};

ui: