微信授权获取用户信息
前言:之前没有用过微信授权登陆这块,所以就了解一下,看了很多片文章,总结了其中的步骤;
一、前期准备:
1、需要有自己的服务器,虚拟机也可以;
2、需要有微信公众号、订阅号也可以,但是订阅号只能测试,没有注册的去注册,根据步骤就可以,这里不多说。
二、获取AppID和AppSecret
使用的AppId和AppSecret在开发者中心-开发者ID中,可以找到;因为我是订阅号,所以需要去公众平台测试账号申请测试账号,这样就可以获取到测试的AppId和AppSecret;
三、配置授权回调页面域名
一开始这我也考虑也好久是不是需要自己买个服务,搞一下,但是后来发现有虚拟机就算了,如果没有的小伙伴,可以放在公司的测试服务器或者自己的服务器也可以。
这里的授权回调域名配置规范为全域名并且不带http,比如需要网页授权的域名为:www.qq.com,配置以后此域名下面的页面http://www.qq.com/music.html 、 http://www.qq.com/login.html 都可以进行OAuth2.0鉴权。但http://pay.qq.com 、 http://music.qq.com 、 http://qq.com无法进行OAuth2.0鉴权,我相信看了很多文章差不多都知道了,这就不去多说。
如果你的网址没有被列入过黑名单,就会在下面出现
四、用户授权并获取code,直接上代码
let AppId = AppId ;
let code = getQueryString('code');
let local = window.location.href;
if (code == null || code === '') {
window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + AppId + "&redirect_uri=" + encodeURIComponent(local) + "&response_type=code&scope=snsapi_userinfo&state=1&connect_redirect=1#wechat_redirect"
} else {
getUserInfo(code)
$('#code').text(code)
}
//getQueryString的方法,可以百度下,就是获取页面路径的某个字段所对应的参数。
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
}
上面这样就可以拿到对应code了,如果只是为了看效果,可以直接用连接在微信上打开就可以
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
参数 | 必须 | 说明 |
---|---|---|
appid | 是 | 公众号的唯一标识 |
redirect_uri | 是 | 授权后重定向的回调链接地址 |
response_type | 是 | 返回类型,请填写code |
scope | 是 | 应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且,即使在未关注的情况下,只要用户授权,也能获取其信息) |
state | 否 | 重定向后会带上state参数,开发者可以填写任意参数值 |
#wechat_redirect | 否 | 直接在微信打开链接,可以不填此参数。做页面302重定向时候,必须带此参数 |
scope应用授权作用域:由于snsapi_base只能拿到openid,意义不大,所以我们使用snsapi_userinfo。回调地址:填写为刚才上传后的oauth2.php的文件地址;
state参数:随便一个数字,这里填1
微信上打开就可以这个页面,
点击同意,这个时候回自动回调当前页面,把code作为参数拼接到链接后面,这个时候就成功得到了code了
这里我遇到了一个错误:redirect_uri不正确,说明配置的回调域和文件不在一个回调域下;
五、根据code,获取assess_token;
可以是看效果可以使用链接的方式,我这里是去掉了后台的接口,只需要把上一步获取的code传给后台就可以
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
let AppId = '';
let code = getQueryString('code');
let local = window.location.href;
if (code == null || code === '') {
window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + AppId + "&redirect_uri=" + encodeURIComponent(local) + "&response_type=code&scope=snsapi_userinfo&state=1&connect_redirect=1#wechat_redirect"
} else {
getUserInfo(code)
$('#code').text(code)
}
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
}
function getUserInfo(code) {
console.log(1);
$.ajax({
type: 'GET',
url: url,
data:{
code: code
},
success:function (res) {
console.log(res);
},
error:function (err) {
console.log(err);
}
})
}
可以在浏览器中直接执行这条链接
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
参数说明:
参数 | 是否必须 | 说明 |
---|---|---|
appid | 是 | 公众号的唯一标识 |
secret | 是 | 公众号的appsecret |
code | 是 | 填写第一步获取的code参数 |
grant_type | 是 | 填写为authorization_code |
成功之后回返回一个json对象
{
"access_token": "OezXcEiiBSKSxW0eoylIeAsR0GmYd1awCffdHgb4fhS_KKf2CotGj2cBNUKQQvj-G0ZWEE5-uBjBz941EOPqDQy5sS_GCs2z40dnvU99Y5AI1bw2uqN--2jXoBLIM5d6L9RImvm8Vg8cBAiLpWA8Vw",
"expires_in": 7200,
"refresh_token": "OezXcEiiBSKSxW0eoylIeAsR0GmYd1awCffdHgb4fhS_KKf2CotGj2cBNUKQQvj-G0ZWEE5-uBjBz941EOPqDQy5sS_GCs2z40dnvU99Y5CZPAwZksiuz_6x_TfkLoXLU7kdKM2232WDXB3Msuzq1A",
"openid": "oLVPpjqs9BhvzwPj5A-vTYAX3GLc",
"scope": "snsapi_userinfo,"
}
数据格式解读如下:
参数 | 描述 |
---|---|
access_token | 网页授权接口调用凭证,注意:此access_token与基础支持的access_token不同 |
expires_in | access_token接口调用凭证超时时间,单位(秒) |
refresh_token | 用户刷新access_token |
openid | 用户唯一标识,请注意,在未关注公众号时,用户访问公众号的网页,也会产生一个用户和公众号唯一的OpenID |
scope | 用户授权的作用域,使用逗号(,)分隔 |
这样就成功的通过code换取到了access_token,以及refresh_token:可以查看微信公众平台开发文档https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183;
六:通过access_token、openid获取用户信息
请求方式还是链接,我这里是后来返回的
https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID
参数说明:
参数 | 描述 |
---|---|
access_token | 网页授权接口调用凭证,注意:此access_token与基础支持的access_token不同 |
openid | 用户的唯一标识 |
在浏览器中访问,成功之后返回一个json数据
{
"openid":"o8OKMwcUu_cBgB2Sn_woVtLjnZMM",
"nickname":"爱果者",
"sex":1,
"language":"zh_CN",
"city":"徐州",
"province":"江苏",
"country":"中国",
"headimgurl":"http:\/\/thirdwx.qlogo.cn\/mmopen\/vi_32\/Q0j4TwGTfTLcic0Lv68KM9ib8icHaqDzSic5ceBT0GrP2Ehst17acvk21lsYiaHZFVVrC4pnHribDpPpHVdc94JHwoeQ\/132",
"privilege":[],
"unionid":"o_UNX1H7n3LJrtVctDVvJhxtuyIU"
}
参数说明:
参数 | 描述 |
---|---|
openid | 用户的唯一标识 |
nickname | 用户昵称 |
sex | 用户的性别,值为1时是男性,值为2时是女性,值为0时是未知 |
province | 用户个人资料填写的省份 |
city | 普通用户个人资料填写的城市 |
country | 国家,如中国为CN |
headimgurl | 用户头像,最后一个数值代表正方形头像大小(有0、46、64、96、132数值可选,0代表640*640正方形头像),用户没有头像时该项为空 |
privilege | 用户特权信息,json 数组,如微信沃卡用户为(chinaunicom) |
这样就可以拿到用户的信息就完成了,中间遇到好多问题,就是需要不断的尝试,慢慢试一试就懂了