vue 微信登陆授权史上最强踩坑大合集

放个微信网页授权文档地址https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842，可以照着文档做

其次是本篇的主题，按照文档步骤过程中的各种踩坑

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

要确保微信公众账号拥有授权作用域（scope参数）的权限的前提下

使用所需放入的参数：appid，redirect_uri，scope

appid：有公众号平台就可拿到，scope：snsapi_base和snsapi_userinfo，我使用的是snsapi_userinfo（文档中找对应信息）

坑点redirect_uri：跳转回调，与如下图所设置的授权回调域名一致

否则，授权页面上或回调将返回如下图错误，因为第一次做，传入的参数与network上显示的传入参数不一致，导致后来将它打印出来才发现

以上都没错后，访问以下接口，就可拿到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参数对应的授权作用域权限。

  用户同意授权，页面将跳转至 redirect_uri/?code=CODE&state=STATE。

而这个地址存在code和state参数，如果你的代码不够严谨，那么可能就会出现一些bug，要么你有办法的话就把他们去除掉。

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

 获取access_token所需参数：appid，secret，code

appid：前面有了；secret：公众号的appsecret，code：第一步回调后在url中拿到

获取code后，请求以下链接获取access_token：  https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

因为在访问获取链接时遇到了跨域问题，经过在摆渡上的游走后，找到了以下的方法进行获取数据，这个方法是从https://www.cnblogs.com/jinzhenzong/p/9035809.html和https://www.cnblogs.com/nbpowerboy/p/3364786.html上面看来的，亲测可用，我展示的比较简单，想看详细的可以进去以上两个链接的博客进行了解学习

const url = 'https://api.weixin.qq.com/sns/oauth2/access_token?appid='+appid+'&secret='+secret+'&code='+code+'&grant_type=authorization_code';
        Axios.post('http://query.yahooapis.com/v1/public/yql',{
            q: "select * from json where url=\'"+url+"'",
            format:'json'
        }).then(function (res) {
            console.log(res)
        })

正确时返回的JSON数据包如下：

{ "access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE" }

access_token	网页授权接口调用凭证,注意：此access_token与基础支持的access_token不同
expires_in	access_token接口调用凭证超时时间，单位（秒）
refresh_token	用户刷新access_token
openid	用户唯一标识，请注意，在未关注公众号时，用户访问公众号的网页，也会产生一个用户和公众号唯一的OpenID
scope	用户授权的作用域，使用逗号（,）分隔

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

由于access_token拥有较短的有效期，当access_token超时后，可以使用refresh_token进行刷新，refresh_token有效期为30天，当refresh_token失效之后，需要用户重新授权。

获取第二步的refresh_token后，请求以下链接获取access_token：
https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN

参数	是否必须	说明
appid	是	公众号的唯一标识
grant_type	是	填写为refresh_token
refresh_token	是	填写通过access_token获取到的refresh_token参数

 返回的json数据包跟第二步一样

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

如果网页授权作用域为snsapi_userinfo，则此时开发者可以通过access_token和openid拉取用户信息了。

http：GET（请使用https协议） https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

参数	描述
access_token	网页授权接口调用凭证,注意：此access_token与基础支持的access_token不同
openid	用户的唯一标识
lang	返回国家地区语言版本，zh_CN 简体，zh_TW 繁体，en 英语

 

正确时返回的JSON数据包如下：

{    "openid":" OPENID",
" nickname": NICKNAME,
"sex":"1",
"province":"PROVINCE"
"city":"CITY",
"country":"COUNTRY",
"headimgurl":    "http://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46",
"privilege":[ "PRIVILEGE1" "PRIVILEGE2"     ],
"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}

参数	描述
openid	用户的唯一标识
nickname	用户昵称
sex	用户的性别，值为1时是男性，值为2时是女性，值为0时是未知
province	用户个人资料填写的省份
city	普通用户个人资料填写的城市
country	国家，如中国为CN
headimgurl	用户头像，最后一个数值代表正方形头像大小（有0、46、64、96、132数值可选，0代表640*640正方形头像），用户没有头像时该项为空。若用户更换头像，原有头像URL将失效。
privilege	用户特权信息，json 数组，如微信沃卡用户为（chinaunicom）
unionid	只有在用户将公众号绑定到微信开放平台帐号后，才会出现该字段。

 以上的步骤，出问题的基本在第一步骤了，只要第一步骤没问题，那么后面的就简单了。

而因为考虑了信息的安全行，如appid，appsecret等字段，选择了通过与后端的配合，由我们前端提供code，后端进行code之后的步骤来获取信息，然后再把信息抛给前端，这样提高了信息的安全性也减少了前端的工作量。拿到信息后就可以为所欲为了。