oauth2.0微信扫码登录

本文通过实现微信扫码登录来阐述oauth2.0的逻辑,下面是官方提供的扫码登录流程图:

wechat-oauth2.0

可以看到,从中间一栏“第三方应用”到“微信开放平台”有3个向右的箭头,这恰恰代表扫码登录分三个步骤:

一、扫描二维码获取code

所有的行为都是从用户开始扫描第三方应用提供的微信二维码开始的,通过在微信开放平台上注册并认证之后,微信官方会提供AppID、AppSecret和授权回调网址,通过这些参数,可以获取二维码登录网址:

1
https://open.weixin.qq.com/connect/qrconnect?appid=wx_appid&redirect_uri=http://domain.cn/login/wechat&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect

除了调整到上面的二维码登录网址之外,微信还给了另外一个个性化定制的选择,即生成一个二维码图片嵌入自己的网页中:

1
2
3
4
5
6
7
8
9
var obj = new WxLogin({
id: 'login_container', // 放置微信二维码图片的容器id,例如<div id="login_container"></div>
appid: 'wx_appid',
scope: 'snsapi_login',
redirect_uri: 'http://domain.cn/login/wechat',
state: 'STATE',
style: 'black',
href: ''
})

不管是哪种方式,只要用户扫描了二维码,在用户的界面上就会出现确认登录的提示,当用户点击同意,此时包含此二维码的页面就会重定向到redirect_uri上面,并带上参数:

1
redirect_uri?code=CODE&state=STATE

二、根据code登录获取access token

通过步骤一就可以在redirect_uri拿到code了,有了code就可以去请求access token了,注意code只能被使用1次,也就是说下面的请求只能发一次:

1
https://api.weixin.qq.com/sns/oauth2/access_token?appid=wx_appid&secret=SECRET&code=CODE&grant_type=authorization_code

返回结果如下:

1
2
3
4
5
6
7
8
9
10
11
12
// 正确返回
{
"access_token":"ACCESS_TOKEN", // 接口调用凭证
"expires_in":7200, // 超时时间
"refresh_token":"REFRESH_TOKEN", //刷新access_token
"openid":"OPENID", //用户唯一标识
"scope":"SCOPE" //授权的作用域
}
// code无效返回
{"errcode":40029,"errmsg":"invalid code"}
// code多次使用返回
{ errcode: 40163,errmsg: 'code been used, hints: [ req_id: Ax0055th55 ]' }

到这一步就意味着这个用户的微信登录授权已经成功。

三、通过access_token获取用户信息

第二步获取的access_token可用于获取用户基本信息:

1
https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID

返回结果:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 正确
{
"openid":"OPENID", //用户id
"nickname":"NICKNAME", //昵称
"sex":1, //性别,1为男性,2为女性
"province":"PROVINCE", //省份
"city":"CITY", //城市
"country":"COUNTRY", //国家
"headimgurl": "http://wx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/0", //头像
"privilege":[
"PRIVILEGE1",
"PRIVILEGE2"
], //用户特权信息
"unionid": " o6_bmasdasdsad6_2sgVt7hMZOPfL" //用户统一标识
}
//错误
{"errcode":40003,"errmsg":"invalid openid"}

这里有两点需要说明:

  • 头像尺寸:最后一个数值代表正方形头像大小(有0、46、64、96、132数值可选,0代表640*640正方形头像),用户没有头像时该项为空
  • 特权用户:json数组,如微信沃卡用户为(chinaunicom)

到此,登录授权就完成了,第三方应用就可以把微信用户的头像和昵称显示在页面上了。不过需要注意的是,access_token有效期(目前为2个小时)较短,如果过期了,就要用access_token来刷新:

1
https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=wx_appid&grant_type=refresh_token&refresh_token=REFRESH_TOKEN

返回结果:

1
2
3
4
5
6
7
8
9
10
// 正确
{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE"
}
// 错误
{"errcode":40030,"errmsg":"invalid refresh_token"}
  • access_token已超时,refresh_token会获取一个新的access_token,新的超时时间;
  • access_token未超时,refresh_token会刷新超时时间,相当于续期access_token

总结

整个微信oauth2.0授权有下面几个接口:

授权作用域(scope) 接口 接口说明
snsapi_base /sns/oauth2/access_token 通过code换取access_token、refresh_token和已授权scope
/sns/oauth2/refresh_token 刷新或续期access_token使用
/sns/auth 检查access_token有效性
snsapi_userinfo /sns/userinfo 获取用户个人信息

最后再用一张图来回顾一下oauth2.0授权的三个步骤:

oauth2.0