uni-id 怎么用于H5 uni-app

通过分析uni-id 插件，将可用的部分用于自己写的H5页面。

文末有总结 测试用网站的地址

uni-id 官方文档地址

一、注册页面 reg.vue

• 注册页面的路径 pages/reg/reg.vue

1.1 点击注册按钮后触发register函数

• 注册请求发送到了 user-center 云函数
• 我们可以理解 user-center 是一个路由云函数
• action: ‘register’ 是向服务器说明了是 注册行为
• 注册成功了，就本地保存 “用户名” 和 “token”
• 页面跳转至 主页 main.vue `

methods: {
   
	register() {
   
		const data = {
   
			username: this.username,
			password: this.password
			};
		uniCloud.callFunction({
   
			name: 'user-center',
			data: {
   
				action: 'register',
				params: data
			},
		success(e) {
   
			if (e.result.code === 0) {
   
			uni.showToast({
   
				title: '注册成功'
			});
			uni.setStorageSync('uni_id_token', e.result.token)
			uni.setStorageSync('username', e.result.username)
			uni.reLaunch({
   
				url: '../main/main',
			});
		} else {
   
			uni.showModal({
   
				content: JSON.stringify(e.result),
				showCancel: false
			})
		  }
		},
		fail(e) {
   
			uni.showModal({
   
				content: JSON.stringify(e),
				showCancel: false
			})
	  	  }
	  })
    }
 }

1.2 云函数 user-center 接收注册信息并返回结果

• uniID = require('uni-id')=>uniIDIns = uniID.createInstance({ })
• 从uniIDIns.register(params)可以看出，请求又指向了uni-id
• 无需理解 uni-id 如何处理数据，返回值 res.result 包含了全部所需

`我们不用去研究 uni-id 的代码，只需要知道
 res.result.code === 0 就表示注册成功了
 res.result 包含了我们需要的全部信息`
const uniID = require('uni-id')
const db = uniCloud.database()

exports.main = async (event, context) => {
   
   const uniIDIns = uniID.createInstance({
   
     context
   })
   let params = event.params || {
   }
   switch (event.action) {
   
		case 'register':
			res = await uniIDIns.register(params);
			break;
   }
}

二、主页 main.vue

• 主页路径 pages/main/main.vue

2.1 onLoad页面初始化

• 这里需要用到 vuex 的内容，公用函数 login 公用数据'forcedLogin', 'hasLogin', 'userName'
• computed: mapState(['forcedLogin', 'hasLogin', 'userName'])
• methods: { ...mapMutations(['login']) }
• uni_id_token保存在 token 信息
• 有本地token时，调用云函数user-center向服务器表明了checkToken是 检测token行为
• loginType === 'local'应该是APP用的，H5 页面 loginType 始终 === 'online'
• 没有本地token时，调用this.guideToLogin()，要求必须登录，调用了工具类函数univerifyLogin()，是APP、小程序才能用的一体登录系统
• 请求数据时并未看到传递参数，根据官方文档，参数已经自动传送了
• 检测 token 的官方文档，截图如下：
  

onLoad() {
   
	const loginType = uni.getStorageSync('login_type')
    //loginType === 'local' `应该是APP用的，H5 页面 `loginType 始终 === 'online' 
	if (loginType === 'local') {
   
		this.login(uni.getStorageSync('username'))
		return
	}
	let uniIdToken = uni.getStorageSync('uni_id_token')
	if (uniIdToken) {
   
		this.login(uni.getStorageSync('username'))
        //调用云函数 user-center 向服务器表明了是检测 token 		
		uniCloud.callFunction({
   
			name: 'user-center',
			data: {
   
				action: 'checkToken',
			},
			success: (e) => {
   
				console.log('checkToken success', e);
				if (e.result.code > 0) {
   
				//token过期或token不合法，重新登录
				if (this.forcedLogin) {
   
					uni.reLaunch({
   
						url: '../login/login'
					});
				} else {
   
					uni.navigateTo({
   
						url: '../login/login'
					});
					}
			  	}
			},
			fail(e) {
   
				uni.showModal({
   
				 	content: JSON.stringify(e),
					showCancel: false
				})
			}
		})
	} else {
   
		this.guideToLogin()
	}
}

2.2 user-center处理 checkToken

• 无需关注代码处理逻辑，只需知道结果里有 payload表明检测失败
• 成功或者失败，都会跳转到 登录页面
• res.result 返回的结果，如图：
  

//表示检测失败
payload = await uniIDIns.checkToken(event.uniIdToken)
	if (payload.code && payload.code > 0) {
   
		return payload
	}
//表示检测成功
switch (event.action) {
   
	case 'checkToken':
		res = await uniIDIns.checkToken(event.uniIdToken);
		break;
}

三、登录页面 login.vue

• 登录页路径 pages/login/login.vue

3.1 onLoad()初始化数据

• this.captcha('createCaptcha') 向 user-center 请求 createCaptcha
• case 'createCaptcha':res = await uniCaptcha.create(params)break;
• const uniCaptcha = require('uni-captcha')可以看出请求转到了 uni-captcha图文验证码模块
• 图文验证码模块 的运行逻辑

<template>
	/*neddCaptcha控制着图文验证码的显示
      neddCaptcha 来自于 uni-needCaptcha 是一个布尔值
	  uni-needCaptcha 来自于 login 请求获得的 
	  当登录验证成功时，就等于 false ; 当登录验证失败时，就等于 e.result.needCaptcha 也就是 true
	  当为 true 时，调用了 this.captcha('createCaptcha')，也就是获取图文码的网络地址，最终显示到img中
	*/
	<view v-if="needCaptcha" class="input-row">
		<text class="title">验证码：</text>
		<m-input type="text" v-model="captchaText" placeholder="请输入验证码"></