一、前言
很多时候，我们都会看到访问一些公众号，然后就会问你是否允许授权获取个人信息，这个功能实怎么做的呢？且看下面一一分解。
二、在测试号页面找到授权第三方网页获取个人信息的接口
在这个页面往下翻
图1-1
我们可以找到一堆接口简介，如下图1-2
图1-2
我们不妨可以点击进去看看文档怎么写的，我简单总结出来就是：
这里要注意的是，redirect_uri在测试号的必备条件是http或者https而且要是80端口的域名，而且是经过urlEncode处理的url回调地址，最好就可以使用内网穿透（比如ngrok，免费的）去配置了
回调地址有什么用处呢？就是微信服务器判断成功后，会去到你回调的地址那里，并且往地址后面加上?code=xxxx，这个时候你就可以获取到code了
2.配置测试号对应的授权回调地址。
回到下图这个页面
点击修改，出现下图
填写完成后，我们可以进入下一步了
3.可以测试一下第一步代码是否成功了，这里要打开微信开发者工具，然后输入自己的前端网址（我的是lzy123.front.com）
具体代码如下
4.当你发现页面跳到你希望回调的页面当中时，那就成功一半了！接下来，就是通过跳转的地址后面跟着的参数code，拿到这个code去请求access_token
注意！！！access_token有效期是2小时7200秒，所以我这里使用了redis存储，并设置了失效时间，失效后会重新请求微信服务器上图的链接重新获取，获取方式如下
5.通过第3步的openid获取到用户信息
后面的4，5步都比较简单，只是api接口的调用，这里就不细说了。
最后上一些关键的代码：
- 前端页面
这是我的登录页
<template>
<div>
<!-- 点击按钮进行微信快捷登录，获取个人信息 -->
<van-button type="primary" @click="goToAuth">微信登录</van-button>
</div>
</template><script>
export default {
methods: {
/**
* @description 跳转url获取code
* redirectUrl——拿到code的回调函数，必须要把对应的url进行encode
* scope要写snsapi_userinfo才能拿到用户的信息
* state可以随便乱填写
* @author lvzhiyuan
* @date 2020/5/6
*/
goToAuth () {
const redirectUrl = 'http%3a%2f%2flzy2.wxfront.com%2fauth';
location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?` +
`appid=${process.env.VUE_APP_APPID}&redirect_uri=${redirectUrl}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`;
}
}
};
</script>- 这是授权页
<script>
export default {
created() {
/**
* @description 因为这里是微信帮你回调到的页面了，它还会为你在url后面加上参数code
* 通过code可以获取access_token
*/
const code = this.$route.query.code;
this.getAccessToken(code);
},
methods: {
/**
* @description 获取微信网页授权的token
* 通过code获取对应的access_token
*/
async getAccessToken (code) {
try {
const { data } = await axios.get(`http://lzy123.free.idcfengye.com/user/authToken?code=${code}`);
if (data.code === 200) {
this.getUserInfo(data.data);
}
} catch (e) {
console.log(`src/views/auth/index.vue-getAccessToken getAccessToken error: ${e}`);
}
},
/**
* @description 根据token和openid获取对应的用户信息
* 通过token获取对应的
* @author lvzhiyuan
* @date 2020/5/5
*/
async getUserInfo (obj) {
try {
const { data } = await axios.get(`http://lzy123.free.idcfengye.com/user/info?`
+ `access_token=${obj.access_token}&openid=${obj.openid}&lang=zh_CN`);
if (data.code === 200) {
this.userInfo = data.data;
}
} catch (e) {
console.log(`src/views/auth/index.vue-getUserInfo error: ${e}`);
}
}
}
};
</script>
