小程序如何实现微信登录

微信登录的流程如下：

名词解释:

• code 临时登录凭证, 有效期由微信官方决定, 通过 wx.login() 获取
• session_key 会话密钥, 服务端通过 code2Session 获取（后端负责处理）
• openId 用户在该小程序下的用户唯一标识, 永远不变, 服务端通过 code 获取
• unionId 用户在同一个微信开放平台帐号(公众号, 小程序, 网站, 移动应用)下的唯一标识, 永远不变
• appId 小程序唯一标识
• appSecret 小程序的 app secret, 可以和 code, appId 一起换取 session_key

其他名词

• rawData 不包括敏感信息的原始数据字符串，用于计算签名
• encryptedData 包含敏感信息的用户信息, 是加密的
• signature 用于校验用户信息是否无篡改
• iv 加密算法的初始向量

步骤

• 给头像和昵称给一个默认值
• 通过wx.login（）获取到code，只需要负责调用api，微信后台会处理
• 通过getUserProfile方法，获取微信用户信息，只需要负责调用api，微信后台会处理
• 根据登录接口文档所需参数，调用接口
• 使用微信用户信息来调用接口登录，获取token
• 将token和头像以及昵称存入本地
• 把头像和昵称取出来给定义的头像和昵称

<script>
	export default {
		data() {
			return {
				avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
				nickName: ''
			}
		},
		onShow() {
			const userInfo = uni.getStorageSync('userInfo') || {}
			this.avatarUrl = userInfo.avatarUrl
			this.nickName = userInfo.nickName
		},
		async onLoad() {
			const res = await uni.login()
			console.log(res)
			this.code = res.code
		},
		methods: {
			getAvatar(e){
				console.log(e)
				this.avatarUrl = e.detail.avatarUrl
			},
			// 调用接口登录
			async hLogin(user) {
				// 登录所需参数
				const res = await uni.getUserProfile({
					desc: '获取微信用户信息'
				});
				console.log(res)
				const {
					encryptedData,
					iv,
					rawData,
					signature
				} = res
				
				const {data} = await this.request({
					url: "/users/wxlogin",
					method: "post",
					data: {
						encryptedData,
						iv,
						rawData,
						signature,
						code: this.code
					}
				});
				console.log(data);
        // 保存token
				uni.setStorageSync("token", data.token)
        // 保存用户更新后的头像和昵称 -- 只是纯前端处理，服务器中并没有对应的接口来保存修改结果
				uni.setStorageSync("userInfo", {avatarUrl: this.avatarUrl, nickName: this.nickName})
				// 后退
        uni.navigateBack()
			}
		}
	}
</script>