微信开放平台开发——网页微信扫码登陆（OAuth2.0）

微信开放平台开发——网页微信扫码登陆（OAuth2.0）

一、OAuth2.0

　　OAuth（开放受权）是一个开放标准，容许用户让第三方应用访问该用户在某一网站上存储的私密的资源（如照片，视频，联系人列表），而无需将用户名和密码提供给第三方应用。

　　容许用户 提供一个令牌， 而不是用户名和密码来访问他们存放在特定服务提供者的数据。每个令牌受权一个特定的网站（例如，视频编辑网站)在特定的时段（例如，接下来的2小时内）内访问特定的资源（例如仅仅是某一相册中的视频）。这样，OAuth容许用户受权第三方网站访问他们存储在另外的服务提供者上的信息，而不须要分享他们的访问许可或他们数据的全部内容。

二、目标

　　咱们这里主要模拟使用OAuth2.0，用户经过扫描咱们网页应用的二维码并进行受权登陆来获取用户的基本信息的过程。详细的接口相关信息能够在微信开放平台上查看： https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&lang=zh_CN

三、前期准备（获取微信开发者权限）

　　咱们这里主要讲的是网站（Web）应用，网站应用微信登陆是基于OAuth2.0协议标准构建的微信OAuth2.0受权登陆系统(即上面的协议)。在微信客户端受权登陆(获取用户信息）的能够查看: http://www.cnblogs.com/0201zcr/p/5131602.html

　　在进行微信OAuth2.在进行微信OAuth2.0受权登陆接入以前，在微信开放平台注册开发者账号，并拥有一个已审核经过的网站应用，并得到相应的AppID和AppSecret，申请微信登陆且经过审核后，可开始接入流程。

3.一、注册开发者帐号

　　能够在 https://open.weixin.qq.com/ 这里申请开发的帐号。因为是腾讯的网页，这里能够直接经过 QQ号进行登陆。

3.二、提交网站应用审核

　　在已经登陆的界面中选择“管理中心”——》网站应用——》建立网站应用

 　　将会弹出下面的界面

　　填写事后，还有有一个页面须要填写，提交一份纸质版申请书扫描件（会提供模板，咱们下载再来填写后，需盖章，签名），配置回调域名（扫码登陆后会跳转的页面）等。

　　以后提交审核便可，等微信审核经过，咱们便可得到咱们须要的网页应用的 appid和AppSecret，并配置后回调的域名了（这三样是咱们开发所必须的）。

3.三、开发者资质认证

　　因为咱们这里要使用微信登陆的接口，因此咱们还须要向微信提出认证，只有认证了才能使用微信那些高级的接口。未认证的以下图所示

 　　认证以后是这样子的：

 　  我如今暂时没有找到能够向公众帐号那样子的测试帐号的申请。若是有知道怎么能够申请到测试帐号的高手，但愿能赐教一下。

　　接下来，咱们就能够开始咱们的网页微信扫码登陆开发了。

四、受权流程说明

　　微信OAuth2.0受权登陆让微信用户使用微信身份安全登陆第三方应用或网站，在微信用户受权登陆已接入微信OAuth2.0的第三方应用后，第三方能够获取到用户的接口调用凭证（access_token），经过access_token能够进行微信开放平台受权关系接口调用，从而可实现获取微信用户基本开放信息和帮助用户实现基础开放功能等。

　　微信OAuth2.0受权登陆目前支持authorization_code模式，适用于拥有server端的应用受权。该模式总体流程为：

1. 第三方发起微信受权登陆请求，微信用户容许受权第三方应用后，微信会拉起应用或重定向到第三方网站，而且带上受权临时票据code参数；
2. 经过code参数加上AppID和AppSecret等，经过API换取access_token；
3. 经过access_token进行接口调用，获取用户基本数据资源或帮助用户实现基本操做。

 　　获取access_token时序图：

 

五、获取网页的二维码

　　当咱们经过微信的认证，获取到了 appid和AppSecret，并配置了回调的域名。咱们就已经能够获取属于咱们网页的二维码了，获取的方式很简单，只需打开一个微信的连接，加上咱们的appid和回调域名便可在网页上面打开二维码，用户用微信客户端扫码并受权登陆以后即会跳转到咱们配置的回调域名下。

注意：

一、这里填写的是域名（是一个字符串），而不是URL，所以请勿加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鉴权

5.一、请求url说明

　　第三方使用网站应用受权登陆前请注意已获取相应网页受权做用域（scope=snsapi_login），则能够经过在PC端打开如下连接：

https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

 

 参数说明

参数	是否必须	说明
appid	是	应用惟一标识（前面认证网页应用中得到）
redirect_uri	是	重定向地址，须要进行UrlEncode（前面认证网页应用中得到）
response_type	是	填code
scope	是	应用受权做用域，拥有多个做用域用逗号（,）分隔，网页应用目前仅填写snsapi_login便可
state	否	用于保持请求和回调的状态，受权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验

 返回说明

 　　用户容许受权后，将会重定向到redirect_uri的网址上，而且带上code和state参数

redirect_uri?code=CODE&state=STATE

 　　若用户禁止受权，则重定向后不会带上code参数，仅会带上state参数

redirect_uri?state=STATE

5.二、事例：

　　一号店的微信二维码连接以下：

https://open.weixin.qq.com/connect/qrconnect?appid=wxbdc5610cc59c1631&redirect_uri=https%3A%2F%2Fpassport.yhd.com%2Fwechat%2Fcallback.do&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e#wechat_redirect

 　　将其复制到浏览器中打开便可得到一号店的二维码，二维码页面以下：

　　经过使用微信客户端的扫一扫功能，扫描该二维码，即会跳转到上面填写redirect_uri所在的地址上。假如用户赞成受权，这里就得到了微信返回的code参数了。

六、获取用户信息

　　假如前面已经得到code。咱们能够经过code参数去获取用户openid和access_token,进而得到用户的信息。

6.一、经过code参数获取access_token

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

返回说明

正确的返回：

{ 
"access_token":"ACCESS_TOKEN", 
"expires_in":7200, 
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID", 
"scope":"SCOPE",
"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}

参数	说明
access_token	接口调用凭证
expires_in	access_token接口调用凭证超时时间，单位（秒）
refresh_token	用户刷新access_token
openid	受权用户惟一标识
scope	用户受权的做用域，使用逗号（,）分隔
unionid	当且仅当该网站应用已得到该用户的userinfo受权时，才会出现该字段。

错误返回样例：

{"errcode":40029,"errmsg":"invalid code"}

注意：

• code参数的超时时间是5分钟，且每次请求的code参数的值都不同。
• access_token的超时时间是32分钟。

6.二、经过access_token获取用户的基本信息

获取的前提条件

• access_token有效且为超时；
• 微信用户已受权给第三方应用帐号相应接口做用域（scope)【在二维码生成链接那里填写】

对于接口做用域（scope），能调用的接口有如下：

受权做用域（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	获取用户我的信息

 

　　使用snsapi_base做用域的受权是扫码以后无需用户点击受权，扫码后直接跳转，用户感受不到受权了，但这种受权方式能获取的数据量有限，这里咱们要获取用户的基本信息，咱们须要使用snsapi_userinfo受权。使用snsapi_userinfo受权，扫码后出现相似于下面的受权界面

　　此接口用于获取用户我的信息。开发者可经过OpenID来获取用户基本信息。特别须要注意的是， 若是开发者拥有多个移动应用、网站应用和公众账号，可经过获取用户基本信息中的unionid来区分用户的惟一性，由于只要是同一个微信开放平台账号下的移动应用、网站应用和公众账号，用户的unionid是惟一的。换句话说，同一用户，对同一个微信开放平台下的不一样应用，unionid是相同的。请注意，在用户修改微信头像后，旧的微信头像URL将会失效，所以开发者应该本身在获取用户信息后，将头像图片保存下来，避免微信头像URL失效后的异常状况。

　　

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、4六、6四、9六、132数值可选，0表明640*640正方形头像），用户没有头像时该项为空
privilege	用户特权信息，json数组，如微信沃卡用户为（chinaunicom）
unionid	用户统一标识。针对一个微信开放平台账号下的应用，同一用户的unionid是惟一的。

错误的Json返回示例:

{ 
"errcode":40003,"errmsg":"invalid openid"
}

七、总结 

　　最近着手开发了微信网页扫码登陆和公众号受权登陆收获颇丰，二者的开发很相似。如下是我我的摸索过程当中发现的二者的异同：

• 二者均可以经过微信客户端扫码受权的方式，让第三方页面得到微信用户的一些基本信息（昵称、性别、所在地、在微信惟一标示等……）。他们都是经过提供一个连接让用户受权的方式。但网页版须要在页面打开二维码以后受权，而公众号则须要用户先关注了咱们的公众号，而后点开公众号里面的连接，确认受权便可。
• 网页扫码登陆须要将受权的连接（二维码连接）在网页中打开、而公众号受权登陆的连接必需要微信客户端中打开。
• 不管网页扫码登陆仍是在公众号中受权登陆，都是经过受权的方式得到一个code参数，以后经过code参数获取access_token和openid和经过access_token和openid去获取用户的基本信息的请求连接是同样的。
• 在开发公众号受权登陆的过程当中，我发现了有测试帐号的提供，足以知足咱们的测试和开发，但在开发网页扫码时，暂时未发现哪里能获取测试帐号，我是经过申请获取的。（但愿知道哪里有测试帐号的请求高手赐教）。

 公众帐号受权登陆：http://www.cnblogs.com/0201zcr/p/5131602.html

微信公众号群发消息：http://www.cnblogs.com/0201zcr/p/5866296.html