一、准备工作
通过以下官网获得相应AppID和AppSecret以及对应的回调地址。
QQ登录官网：https://connect.qq.com
微信登录官网：https://open.weixin.qq.com
二、授权登录
授权登录时序图
1.请求CODE
（1）在页面中先引入如下JS文件（支持https）
<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
（2）在需要使用微信登录的地方实例以下JS对象
var obj = new WxLogin({
id:"login_container",
appid: "",
scope: "",
redirect_uri: "",
state: "",
style: "",
href: ""
});
·参数说明
|
参数 |
是否必须 |
说明 |
|
id |
是 |
第三方页面显示二维码的容器id |
|
appid |
是 |
应用唯一标识，在微信开放平台提交应用审核通过后获得 |
|
scope |
是 |
应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login即可 |
|
redirect_uri |
是 |
重定向地址，需要进行UrlEncode |
|
state |
否 |
用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验 |
|
style |
否 |
提供"black"、"white"可选，默认为黑色文字描述。详见文档底部FAQ |
|
href |
否 |
自定义样式链接，第三方可根据实际需求覆盖默认样式。详见文档底部FAQ |
2. 通过code获取access_token
（1）调用
请求方式：GET
请求地址：https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
·参数说明
|
参数 |
是否必须 |
说明 |
|
appid |
是 |
应用唯一标识，在微信开放平台提交应用审核通过后获得 |
|
secret |
是 |
应用密钥AppSecret，在微信开放平台提交应用审核通过后获得 |
|
code |
是 |
填写第一步获取的code参数 |
|
grant_type |
是 |
填authorization_code |
（2）获得反馈—--验证登录是否成功
//这是获取到的正确反馈
{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE",
"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}
//这是获取的错误反馈
{"errcode":40029,"errmsg":"invalid code"}
·参数说明
|
参数 |
说明 |
|
access_token |
接口调用凭证 |
|
expires_in |
access_token接口调用凭证超时时间，单位（秒） |
|
refresh_token |
用户刷新access_token |
|
openid |
授权用户唯一标识 |
|
scope |
用户授权的作用域，使用逗号（,）分隔 |
|
unionid |
当且仅当该网站应用已获得该用户的userinfo授权时，才会出现该字段。 |
（3）刷新access_token有效期
1）access_token有效期和refresh_token
access_token是调用授权关系接口的调用凭证，但access_token有效期（目前为2个小时）较短，当access_token超时后，可以使用refresh_token进行刷新
①若access_token已超时，那么进行refresh_token会获取一个新的access_token，新的超时时间；
②若access_token未超时，那么进行refresh_token不会改变access_token，但超时时间会刷新，相当于续期access_token
refresh_token拥有较长的有效期（30天），当refresh_token失效的后，需要用户重新授权。
2）请求方法
获取code后，请求以下链接进行refresh_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参数 |
正确的返回：
{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE"
}
·参数说明
|
参数 |
说明 |
|
access_token |
接口调用凭证 |
|
expires_in |
access_token接口调用凭证超时时间，单位（秒） |
|
refresh_token |
用户刷新access_token |
|
openid |
授权用户唯一标识 |
|
scope |
用户授权的作用域，使用逗号（,）分隔 |
3. 通过access_token调用接口——获取后续用户信息
http请求方式：GET
http请求地址：https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID
·参数说明
|
参数 |
是否必须 |
说明 |
|
access_token |
是 |
调用凭证 |
|
openid |
是 |
普通用户的标识，对当前开发者帐号唯一 |
|
lang |
否 |
国家地区语言版本，zh_CN 简体，zh_TW 繁体，en 英语，默认为zh-CN |
正确的Json返回结果：
{
"openid":"OPENID",
"nickname":"NICKNAME",
"sex":1,
"province":"PROVINCE",
"city":"CITY",
"country":"COUNTRY",
"headimgurl": "http://wx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/0",
"privilege":[
"PRIVILEGE1",
"PRIVILEGE2"
],
"unionid": " o6_bmasdasdsad6_2sgVt7hMZOPfL"
}
参数说明
|
参数 |
说明 |
|
openid |
普通用户的标识，对当前开发者帐号唯一 |
|
nickname |
普通用户昵称 |
|
sex |
普通用户性别，1为男性，2为女性 |
|
province |
普通用户个人资料填写的省份 |
|
city |
普通用户个人资料填写的城市 |
|
country |
国家，如中国为CN |
|
headimgurl |
用户头像，最后一个数值代表正方形头像大小（有0、46、64、96、132数值可选，0代表640*640正方形头像），用户没有头像时该项为空 |
|
privilege |
用户特权信息，json数组，如微信沃卡用户为（chinaunicom） |
|
unionid |
用户统一标识。针对一个微信开放平台帐号下的应用，同一用户的unionid是唯一的。 |