uniapp微信小程序——微信授权登录并获得头像

目录

前言：

准备 ：

授权登录：                                                                                                                       

前端实现：

标签部分：

js部分：实现getUserInfo方法

getUserInfo方法全代码 

后端实现：

获取头像：                                                                                                                       

---

前言：

在做微信小程序时，不可避免需要调取用户的身份，那么就要用到微信官方的授权码去换用户信息。

核心思路：

用户点击登录——同意微信授权——通过uni.getUserProfile获得用户的code——将code传递给后端，后端携带code请求微信官方接口获得用户信息返回

准备 ：

在这之前需要准备的：首先在微信小程序助手中获得注册小程序时绑定的

• 小程序APPID
• 小程序秘钥secret 

授权登录：                                                                                                                       

前端实现：

标签部分：

我们准备一个button用来让用户点击拉起微信授权登录

<view>
    <button @click="getUserInfo">微信登录</button>
</view>

js部分：实现getUserInfo方法

里面设计到的API：

uni.showLoading：展示加载框

uni.showLoading({
    // 展示加载框
    title: '加载中'
})

 uni.getUserProfile（）：获取用户信息

getUserInfo(e) {
	var that = this
	uni.showLoading({
		// 展示加载框
		title: '加载中'
	})
	uni.getUserProfile({
		//获取到用户信息
		desc: '登录后可同步数据', // 必须要有一个desc字段
		success: async (obj) => {
	    // 调用uni.login接口
        // 调用uni.login接口
        // 调用uni.login接口
        // 调用uni.login接口
		},
		fail: () => {
			uni.showToast({
				title: '授权已取消',
				icon: 'error',
				mask: true
			})
		},
		complete: () => {
			// 隐藏loading
			uni.hideLoading()
		}
	})
}

 uni.login()：用户进行登录获取code

uni.login({
	provider: 'weixin',
	success: async (res) => {
		console.log(res) 
        // 打印res信息，里面只有{errMsg: "login:ok"，code: "你的code"}
		that.code = res.code
		// 请求登录，调用后端接口，我这里是自己封装了后端接口wxLogin，将code传递过去
		const data = await wxLogin({ code: that.code })
		if (data.data.code == 200) {
			uni.showToast({
				title: '授权登录成功！',
				mask: true,
				icon: 'success'
			})
            // data.data为后端返回的用户信息
			this.login(data.data)
		}
	}
})

getUserInfo方法全代码 

//微信授权登录
		getUserInfo(e) {
			var that = this
			uni.showLoading({
				// 展示加载框
				title: '加载中'
			})
			uni.getUserProfile({
				//获取到用户信息
				desc: '登录后可同步数据',
				success: async (obj) => {
					// 调用 action ，请求登录接口
					uni.hideLoading()
					uni.login({
						provider: 'weixin',
						success: async (res) => {
							console.log(res)
							that.code = res.code
							// 请求登录
							const data = await wxLogin({ code: that.code })
							if (data.data.code == 200) {
								uni.showToast({
									title: '授权登录成功！',
									mask: true,
									icon: 'success'
								})
								this.login(data.data)
							}
						}
					})
				},
				fail: () => {
					uni.showToast({
						title: '授权已取消',
						icon: 'error',
						mask: true
					})
				},
				complete: () => {
					// 隐藏loading
					uni.hideLoading()
				}
			})
		},
		login(data) {
			uni.setStorageSync('huoli-token', data.data.token)
			uni.setStorageSync('huoli-id', data.data.id)
		}

后端实现：

后端接收到前端传来的code，调用微信官方接口请求数据

这里在前端采用uni.request进行代码演示

uni.request({
		url: 'https://api.weixin.qq.com/sns/jscode2session',// 请求微信服务器
        method:'GET',
		data: {
			appid: '你的小程序的APPID'         //你的小程序的APPID 
			secret: '你的小程序秘钥secret',    //你的小程序秘钥secret
			js_code: code,                    //uni.login 登录成功后的code
			grant_type:'authorization_code'   // 固定写死的，不用变
		,
		success: (res) => {
			// console.log('获取信息',res);  // 换取成功后 暂存这些数据 留作后续操作
			this.openid=res.data.openid    //openid 用户唯一标识
			this.session_key=res.data.session_key    //session_key  会话密钥
            // 把这些信息存起来即可
			})
		}
	});

获取头像：                                                                                                                       

<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">授权头像</button>
onChooseAvatar(e) {
        this.showing = true
        let that = this
        that.imgurl = e.detail.avatarUrl
}

这步就是通过 chooseAvatar 方法获取到用户头像信息，同时也可以选取相册照片当头像，e.detail.avatarUrl就是微信头像的临时地址，通过uni.uploadFile方法储存到服务器上