82. 微信H5授权登录

H5端微信登录

简介

公众号H5端网页的微信授权登录

根据开发者文档，大致可分为四步。

1 第一步：用户同意授权，获取code

2 第二步：通过code换取网页授权access_token

3 第三步：刷新access_token（如果需要）

4 第四步：拉取用户信息(需scope为 snsapi_userinfo)

完整的流程需要上述四步，但是前端页面只实现第一步和第四部，即获取code和使用code获取用户信息

官方文档： https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

获取code

首先从后台获取我们需要的appid以及回调的重定向url，重定向后用户code会成为url的参数之一

// 获取授权参数
        getParams(){
            const vm = this
            let url = vm.webApi.login.getAuthInfo
			let postData = {}
			return vm.ajax.post(url,postData)
			.then((res) => {
                let _data = res.data?res.data:{}
                let _params = _data
                localStorage.setItem("params", JSON.stringify(_params));