<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 (événement, contexte) => {
//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
} ;
interface utilisateur :