[移动开发]uniapp 实现登录功能与获取用户凭证

前言

欢迎大佬指正思路。

由于最近面试时，被问到了这种问题，但是我回答的含糊不清。
虽然以前做过这些功能，但是一直都没有去总结和记录，所以我决定回顾一下并记录下来。

只记录思路

正文

uniapp

首先，默认已经准备好小程序 appid 等相关内容。

1. 给 标签 一个 @click 并绑定一个函数 signIn，如下。

<template>
	<view>
		<view @click="signIn">登录<view>
	</view>
</template>
<script>
export default {
	data () {
		return {}
	},
	methods: {
		signIn() {
			uni.getUserProfile({
				desc: '注册',	// 此参数是声明获取用户个人信息用途的，不可超过30个字
				success: (data) => {	// 会弹出授权框，向用户请求授权，同意后执行下边  拒绝后不执行
					console.log(data)	// 同意后可以获取到 nickname(昵称)，avatarUrl(头像地址)
					uni.login({	// 使用 .login 获取 code 凭证
						provider: 'weixin',
						success: (res) => {	// 此 res 中就获取到 code 凭证
							// 将 code、nickname、avatarUrl 传给后端
							uni.request({
								url: '192.168.1.99:1234/api/signIn',
								method: 'POST',
								data: {
									nickname: data.userInfo.nickName,
									avatarUrl: data.userInfo.avatarUrl,
									code: res.code
								},
								success: (res) => {},
								fail: (err) => {}
							})
						}
					})
				}
			})
		}
	}
}
</script>

后端

后端使用 nodejs(koa) 框架

const koaRequest = require('request');	// 这里使用 request 发送请求

async signIn(ctx, next) {
	const { nickname, avatarUrl, code } = ctx.request.body
	try {
		const res = await getOpenid(code)	// 获取到用户凭证
		// ... 此时已经获取到用户凭证，可进行其他业务操作
	} catch (err) {}
}

// code 换取 openid 和 key
function getOpenid(code) {
	return new Promise((resolve, reject) => {
		koaRequest({
			url: 'https://api.weixin.qq.com/sns/jscode2session',	// 通过这个微信api获取凭证
			qs: {
				appid: 'wx1234564789465465',	// 申请的微信小程序appid
				secret: 'q1w2e3r4t5y6u7i8o9p',	// 申请的微信小程序key
				js_code: code,	// 获取到的 code
				grant_type: "client_credential",	// 固定值
			}, (err, response, data) => {
				if (err) reject(err)
				resolve(data)
			}
		})
	})
}