引言
用户在微信客户端中访问第三方网页，公众号可以通过微信网页授权机制，来获取用户基本信息，进而实现业务逻辑。
步骤
具体而言，网页授权流程分为四步：
1、引导用户进入授权页面同意授权，获取 code
2、通过 code 换取网页授权 access_token（与基础支持中的 access_token 不同）
3、如果需要，开发者可以刷新网页授权 access_token ，避免过期
4、通过网页授权 access_token 和 openid 获取用户基本信息（支持 UnionID 机制）
一、用户同意授权，获取code
引导关注者打开如下页面：
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 若提示“该链接无法访问”，请检查参数是否填写错误，是否拥有 scope 参数对应的授权作用域权限。
尤其注意：由于授权操作安全等级较高，所以在发起授权请求时，微信会对授权链接做正则强匹配校验，如果链接的参数顺序不对，授权页面将无法正常访问。后续步骤，协同后台参照官方文档处理即可。
具体代码如下：
1.封装获取地址栏参数的方法
function getUrlCode (name) {
const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`, 'i')
const r = window.location.search.substr(1).match(reg)
if (r != null) {
return decodeURIComponent(r[2])
}
return null
}
2.截取 url 中的 code
function getCode () {
// 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
const code = getUrlCode('code')
// 分环境打包配置中的 appID,从公众号中找appId
const appId = process.env.appid
// 分环境打包配置中的 url , 此处的url需要添加 http:// 或 https://
const local = process.env.url
console.log(code)
console.log(appId)
if (code == null || code === '') {
console.log('获取code')
location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appId + '&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect'
} else {
console.log('接口调用')
getUnitCode(code)
}
}
3.拿到 code 之后，就可以调用后台的接口去进行后续操作了
因为项目中，可能会根据有没有授权以及是否绑定手机号等需求来跳转不同的页面，所以，微信授权判断这些，可以单独写一个 js 文件，然后在 main.js 文件中引入。
最后附上完整代码
import login from '../api/login-api'
import router from '../router/index'
(function () {
/**
* 获取地址栏携带的参数
* @param name
* @returns {string}
*/
function getUrlCode (name) {
const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`, 'i')
const r = window.location.search.substr(1).match(reg)
if (r != null) {
return decodeURIComponent(r[2])
}
return null
}
function getCode () {
const code = getUrlCode('code') // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
const appId = process.env.appid
const local = process.env.url
console.log(code)
console.log(appId)
if (code == null || code === '') {
console.log('获取code')
location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appId + '&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect'
} else {
console.log('接口调用')
getUnitCode(code)
}
}
function getUnitCode (code) {
const data = {
code: code,
userType: sessionStorage.getItem('userType'),
userCode: sessionStorage.getItem('userCode')
}
login.getLogin(data).then(res => {
// 业务逻辑，根据返回的信息，进行不同页面的跳转
})
}
getCode()
})()
参考文档：网页授权
公众号配置可以参考我上一篇文章：微信公众号开发（一）准备工作
如果有 h5 跳转小程序的需求，可以参考我下一篇文章：h5 跳转小程序
网友评论