最近项目中需要微信登录拿到用户信息的功能，于是在微信开放文档中学习了一下
developers.weixin.qq./doc/offiaount/OA_Web_Apps/Wechat_webpage_authorization.html#0
下面简单介绍一下功能实现的步骤，具体可以看微信的文档
1 第一步：用户同意授权，获取code
2 第二步：通过code换取网页授权aess_token
3 第三步：拉取用户信息(需scope为 snsapi_userinfo)
第一步，得到用户授权的code
发起授权请求，open.weixin.qq./connect/oauth2/authorize?appid=你的公众号APPID&redirect_uri=重定向后的地址&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect
以下是定义授权方法以及拿到code后请求后端代码的操作
mounted() {if (window.location.href.indexOf("code") > -1) {axios.get("housesafe.nnkcy./outapis/WXLogin.php", ,}).then((res) => {console.log("数据是:", res);this.$router.replace("/");}).catch((e) => {console.log(e);alert("获取数据失败");});}},methods: {login() {window.location.href = `open.weixin.qq./connect/oauth2/authorize?appid=APPID&redirect_uri=您的地址，也可以为当前页&response_type=code&scope=snsapi_userinfo`;},
}获取地址栏参数的方法
getQueryVariable(variable) {var query = window.location.search.substring(1);var vars = query.split("&");for (var i = 0; i < vars.length; i++) {var pair = vars[i].split("=");if (pair[0] == variable) {return pair[1];}}return false;}
重定向地址出现https变为http的现象时，只需在地址末尾加上 / 即可
第二步，通过code拿到aess_token，此步骤需放在服务端操作
为何要放在服务端呢，由于公众号的secret和获取到的aess_token安全级别都非常高，必须只保存在服务器，不允许传给客户端。后续刷新aess_token、通过aess_token获取用户信息等步骤，也必须从服务器发起。
获取code后，请求以下链接获取aess_token：
api.weixin.qq./sns/oauth2/aess_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
正确时返回的JSON数据包如下：
{"aess_token":"ACCESS_TOKEN","expires_in":7200,"refresh_token":"REFRESH_TOKEN","openid":"OPENID","scope":"SCOPE"
}正确返回值后得到json数据，拿到aess_token就可以获取用户信息了
第三步：拉取用户信息(需scope为 snsapi_userinfo)
如果网页授权作用域为snsapi_userinfo，则此时开发者可以通过aess_token和openid拉取用户信息了。
请求方法
api.weixin.qq./sns/userinfo?aess_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN
参数说明
返回说明
正确时返回的JSON数据包如下：
{ "openid":" OPENID","nickname": NICKNAME,"sex":"1","province":"PROVINCE","city":"CITY","country":"COUNTRY","headimgurl": "thirdwx.qlogo./mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46","privilege":[ "PRIVILEGE1" "PRIVILEGE2" ],"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}列一下后端代码 ，仅供参考，php实现
public function getUserAessToken($code) {$url = "api.weixin.qq./sns/oauth2/aess_token?appid=$this->appId&secret=$this->appSecret&code=$code&grant_type=authorization_code";$res = json_decode($this->httpGet($url));$aess_token = $res->aess_token;if ($aess_token) {$data = array("aess_token" => $aess_token,"openid" => $res->openid);$userinfo = $this->getUser($aess_token,$res->openid);}else{return $res;}return $userinfo;}
public function getUser($aess_token,$openid) {$url = "api.weixin.qq./sns/userinfo?aess_token=$aess_token&openid=$openid&lang=zh_CN";$res = json_decode($this->httpGet($url));$nickname = $res->nickname;if ($nickname) {$data = array("headimgurl"=> $res->headimgurl,"sex" => $res->sex,"city" => $res->city,"province" => $res->province,"country" => $res->country,"nickname" => $nickname,"unionid" =>$res->unionid);}else{return $res;}return $data;}
private function httpGet($url) {return file_get_contents($url);}下面列出一下可能会出现的错误码
获取code时
获取aess_token时（code无效，code使用一次后失效，再次调用需重新授权）
{"errcode":40029,"errmsg":"invalid code"}拉取用户信息时（openid无效）:
{"errcode":40003,"errmsg":" invalid openid "}
评论已关闭！