前端微信native扫码登录

1.注册开发者账号

https://open.weixin.qq.com/

2.提交网站审核

点击"管理中心"–>“网站应用”–>“创建网站应用”

会弹出这个页面

填写过后–>下一步，还有一个页面需要填写，提交一份纸质版申请书扫描件，配置回调域名等。

之后提交审核即可，等微信审核通过，可获得我们需要的网页应用的appid和AppSecret，并配置后回调的域名了

3.开发者资质认证

点击"账号中心"–>“开发者资质认证”

4.开始请求网页二维码

第一步：请求code

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进行校验
lang	否	界面语言，支持cn（中文简体）与en（英文），默认为cn

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

redirect_uri?code=CODE&state=STATE

若用户禁止授权，则不会发生重定向,不会带上code参数

将微信登录二维码内嵌到自己的页面
1.在页面中引入这个js文件(支持https)

http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js

2.在需要使用微信登录的地方实例以下JS对象：

 var obj = new WxLogin({
     self_redirect:true,
     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"可选，默认为黑色文字描述
href	否	自定义样式链接，第三方可根据实际需求覆盖默认样式

第二步：通过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有效期目前2个小时。
• refresh_token拥有较长的有效期（30天），当refresh_token失效的后，需要用户重新授权。

第三步：通过access_token获取用户的基本信息

获取的前提条件:
1.access_token有效且为超时
2.微信用户已授权给第三方应用账号相应接口作用域（scope)【在二维码生成连接那里填写】

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

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

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

参数说明

参数	是否必须	说明
access_token	是	调用凭证
openid	是	普通用户的标识，对当前开发者账号唯一
lang	否	国家地区语言版本，zh_CN 简体，zh_TW 繁体，en 英语，默认为en

返回说明

正确的Json返回结果：

{
"openid":"OPENID",
"nickname":"NICKNAME",
"sex":1,
"province":"PROVINCE",
"city":"CITY",
"country":"COUNTRY",
"headimgurl": "https://xxx.xxx.cn/xxx",
"privilege":[
"PRIVILEGE1",
"PRIVILEGE2"
],
"unionid": "xxx"
}

参数	说明
openid	普通用户的标识，对当前开发者账号唯一
nickname	普通用户昵称
sex	普通用户性别，1为男性，2为女性
province	普通用户个人资料填写的省份
city	普通用户个人资料填写的城市
country	国家，如中国为CN
headimgurl	用户头像，最后一个数值代表正方形头像大小（有0、46、64、96、132数值可选，0代表640*640正方形头像），用户没有头像时该项为空
privilege	用户特权信息，json数组，如微信沃卡用户为（chinaunicom）
unionid	用户统一标识。针对一个微信开放平台账号下的应用，同一用户的unionid是唯一的。

错误的返回实例:

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

授权流程总结:

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