引言
用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑。
步骤
具体而言,网页授权流程分为四步:
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.封装获取地址栏参数的方法
1 | function getUrlCode (name) { |
2.截取 url 中的 code
1 | function getCode () { |
参数说明:
参数 | 是否必填 | 说明 |
---|---|---|
appid | 是 | 公众号唯一标识 |
redirect_url | 是 | 授权后重定向的回调链接地址, 请使用 urlEncode 对链接进行处理 |
response_type | 是 | 返回类型,请填写code |
scope | 是 | 应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且, 即使在未关注的情况下,只要用户授权,也能获取其信息 ) |
state | 否 | 重定向后会带上state参数,开发者可以填写a-zA-Z0-9的参数值,最多128字节 |
#wechat_redirect | 是 | 无论直接打开还是做页面302重定向时候,必须带此参数 |
3.拿到 code 之后,就可以调用后台的接口去进行后续操作了
因为项目中,可能会根据有没有授权以及是否绑定手机号等需求来跳转不同的页面,所以,微信授权判断这些,可以单独写一个 js 文件,然后在 main.js 文件中引入。
最后附上完整代码
1 | import login from '../api/login-api' |
参考文档:网页授权
公众号配置可以参考我上一篇文章:微信公众号开发(一)准备工作
如果有 h5 跳转小程序的需求,可以参考我下一篇文章:h5 跳转小程序