网站应用微信登录是基于oauth2.0协议标准构建的微信oauth2.0授权登录系统。
在进行微信oauth2.0授权登录接入之前，在微信开放平台注册开发者帐号，并拥有一个已审核通过的网站应用，并获得相应的appid和appsecret，申请微信登录且通过审核后，可开始接入流程。
注册帐号和申请应用都是免费的，必须要有一个线上的网站，才能审核通过使用微信登录
如果想使用微信支付的功能，就必须认证开发者资质（认证一次300块人民币）
微信oauth2.0授权登录让微信用户使用微信身份安全登录第三方应用或网站，在微信用户授权登录已接入微信oauth2.0的第三方应用后，第三方可以获取到用户的接口调用凭证（access_token）
通过access_token可以进行微信开放平台授权关系接口调用，从而可实现获取微信用户基本开放信息和帮助用户实现基础开放功能等。
微信oauth2.0授权登录目前支持authorization_code模式，适用于拥有server端的应用授权。该模式整体流程为：
第三方发起微信授权登录请求，微信用户允许授权第三方应用后，微信会拉起应用或重定向到第三方网站，并且带上授权临时票据code参数
通过code参数加上appid和appsecret等，通过api换取access_token
通过access_token进行接口调用，获取用户基本数据资源或帮助用户实现基本操作
3. 名词解释
oauth2.0协议：oauth(open authorization)协议就是为用户资源的授权提供了一个安全、开放、简易的标准。
oauth在第三方应用与服务提供商之间设置了一个授权层，第三方应用通过授权层获取令牌，再通过令牌获取信息。
令牌与密码的区别：令牌有作用范围，权限范围，有生命周期，是短期的，可以被数据拥有者撤销，一般只读令牌比读写令牌安全性更高，而密码一般是完整权限
授权模式：授权码模式（功能最完整、流程最严密的授权模式）、密码模式 、简化模式
、客户端模式
appid：应用的id，是唯一标识
appsecret：应用的密钥
code：授权的临时凭证
access_token：接口调用凭证（例如：真正的身份证，虎符，令牌）
vue项目安装
微信官方提供的生成二维码的js:
npm install vue-wxlogin
页面引入
第三方使授权的用网站应用授权登录前请注意已获取相应网页授权作用域（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
若提示“该链接无法访问”，请检查参数是否填写错误，如redirect_uri的域名与审核时填写的授权域名不一致或scope不为snsapi_login。
<col>
参数
是否必须
说明
appid
是
应用唯一标识
redirect_uri
请使用urlencode对链接进行处理
response_type
填code
scope
应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login
state
否
用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验
修改host文件
文件位置：c:\windows\system32\drivers\etc\hosts
回调默认指定的是80端口，别忘记将tomcat的8003端口修改成80
127.0.0.1 www.pinzhi365.com
引入依赖
<!-- 需要使用httpservletrequest获得参数 --><dependency>
<groupid>javax.servlet</groupid>
<artifactid>servlet-api</artifactid>
<version>2.4</version>
<scope>provided</scope>
</dependency>
<!-- 需要使用httpclient发出请求 -->
<dependency>
<groupid>org.apache.httpcomponents</groupid>
<artifactid>httpclient</artifactid>
<version>4.5.12</version>
封装httpclient
定义从微信返回的数据对象
token对象
通过code获取access_token
参数说明
应用唯一标识，在微信开放平台提交应用审核通过后获得
secret
应用密钥appsecret，在微信开放平台提交应用审核通过后获得
code
填写第一步获取的code参数
grant_type
填authorization_code
返回说明
返回参数说明
access_token
接口调用凭证
expires_in
access_token接口调用凭证超时时间，单位（秒）
refresh_token
用户刷新access_token
openid
授权用户唯一标识
用户授权的作用域，使用逗号（,）分隔
unionid
当且仅当该网站应用已获得该用户的userinfo授权时，才会出现该字段。
用户信息对象wxuser
获取用户个人信息（unionid机制）: 此接口用于获取用户个人信息。开发者可通过openid来获取和保存用户基本信息。
同一用户，对同一个微信开放平台下的不同应用，unionid是相同且唯一的。
在用户修改微信头像后，旧的微信头像url将会失效，因此开发者应该自己在获取用户信息后，将头像图片保存下来，避免微信头像url失效后的异常情况。
请求说明
调用凭证
普通用户的标识，对当前开发者帐号唯一
lang
国家地区语言版本，zh_cn 简体，zh_tw 繁体，en 英语，默认为en
错误的json返回示例:
nickname
普通用户昵称
sex
普通用户性别，1为男性，2为女性
province
普通用户个人资料填写的省份
city
普通用户个人资料填写的城市
country
国家，如中国为cn
headimgurl
用户头像，最后一个数值代表正方形头像大小（有0、46、64、96、132数值可选，0代表640*640正方形头像），用户没有头像时该项为空
privilege
用户特权信息，json数组，如微信沃卡用户为（chinaunicom）
用户统一标识。针对一个微信开放平台帐号下的应用，同一用户的unionid是唯一的。
回调函数controller
应用业务逻辑
解决二维码在谷歌浏览器的bug
刷新access_token有效期
access_token是调用授权关系接口的调用凭证，由于access_token有效期（目前为2个小时）较短，当access_token超时后，可以使用refresh_token进行刷新，access_token刷新结果有两种：
refresh_token拥有较长的有效期（30天），当refresh_token失效的后，需要用户重新授权。
请求方法
获取第一步的code后，请求以下链接进行refresh_token：
填refresh_token
填写通过access_token获取到的refresh_token参数
第三步：通过access_token调用接口
获取access_token后，进行接口调用，有以下前提：<code>1. access_token有效且未超时； 2. 微信用户已授权给第三方应用帐号相应接口作用域（scope）。</code>
对于接口作用域（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
获取用户个人信息
f.a.q
什么是授权临时票据（code）？ 答：第三方通过code进行获取access_token的时候需要用到，code的超时时间为10分钟，一个code只能成功换取一次access_token即失效。code的临时性和一次保障了微信授权登录的安全性。第三方可通过使用https和state参数，进一步加强自身授权登录的安全性。
什么是授权作用域（scope）？ 答：授权作用域（scope）代表用户授权给第三方的接口权限，第三方应用需要向微信开放平台申请使用相应scope的权限后，使用文档所述方式让用户进行授权，经过用户授权，获取到相应access_token后方可对接口进行调用。
网站内嵌二维码微信登录js代码中style字段作用？ 答：第三方页面颜色风格可能为浅色调或者深色调，若第三方页面为浅色背景，style字段应提供"black"值（或者不提供，black为默认值），则对应的微信登录文字样式为黑色。相关效果如下：
若提供"white"值，则对应的文字描述将显示为白色，适合深色背景。相关效果如下：
4.网站内嵌二维码微信登录js代码中href字段作用？ 答：如果第三方觉得微信团队提供的默认样式与自己的页面样式不匹配，可以自己提供样式文件来覆盖默认样式。举个例子，如第三方觉得默认二维码过大，可以提供相关css样式文件，并把链接地址填入href字段
通过code获取access_token的接口。
正确的返回：
错误返回样例：
1. 若access_token已超时，那么进行refresh_token会获取一个新的access_token，新的超时时间；
2. 若access_token未超时，那么进行refresh_token不会改变access_token，但超时时间会刷新，相当于续期access_token。
refresh_token拥有较长的有效期（30天），当refresh_token失效的后，需要用户重新授权，所以，请开发者在refresh_token即将过期时（如第29天时），进行定时的自动刷新并保存好它。
使用/sns/oauth2/access_token接口获取到的refresh_token进行以下接口调用：
检验授权凭证（access_token）是否有效
调用接口凭证
普通用户标识，对该公众帐号唯一
正确的json返回结果：
调用频率限制
接口名
频率限制
通过code换取access_token
1万/分钟
刷新access_token
5万/分钟
获取用户基本信息
oauth(open authorization)协议就是为用户资源的授权提供了一个安全、开放、简易的标准。
oauth在第三方应用与服务提供商之间设置了一个授权层，第三方应用通过授权层获取令牌，再
通过令牌获取信息。
比如：皇宫大院，并不是每一块区域你都可以去溜达的。一个小奴才专门负责打扫后宫的寝室卫
生，后宫门口有n多带刀侍卫，每次进门工作。都要问皇上，因为想进入到后宫内院，只有皇帝
一个人说的算，皇帝让谁进，谁才能进。但是每次问皇上呢，又太累，所以“令牌”出现了，皇上
命人制作了一些令牌，给打扫卫生的小太监每人一个，想进去，出示令牌给侍卫即可。这就是“宫
廷版oauth协议”。
玩抖音，发视频，抖音需要访问你相册的授权，话筒的授权，地理位置的授权等等
一句话，我不想帐号密码给第三方应用，但我还想用他们的功能，而他们的功能需要我的部分数据
来协助。ok，咱玩令牌。
令牌与密码的作用都可以进入系统，但是有三点差异：
1、令牌是短期的，到期会自动失效，用户自己无法修改。密码一般长期有效，用户不修改，
就不会发生变化。
2、令牌可以被数据所有者撤销，会立即失效。以上例而言，屋主可以随时取消快递员的令
牌。密码一般不允许被他人撤销
3、令牌有权限范围，比如只能进小区的二号门。对于网络服务来说，只读令牌就比读写令牌
更安全。密码一般是完整权限。
上面这些设计，保证了令牌既可以让第三方应用获得权限，同时又随时可控，不会危及系统安全。
oauth的四种授权模式：
1、授权码模式（功能最完整、流程最严密的授权模式）
说白了，授权码模式，不再client和user之间商量授权，而是client想要被授权，所以
client去找了一个和事佬大妈，大妈将client和user叫到了一起（认证服务器），给大妈
个面子，这事就这么定了。就是这样的一个过程，全程中认证服务器会发布一个认证码
贯穿始终。
2、密码模式 - 了解
3、简化模式 - 了解
4、客户端模式 - 了解
应用id，唯一标识（身份证号）
2.3 appsecret
应用的密钥（密码）
2.4 code
授权的临时凭证（例如：临时身份证）
2.5 access_token
接口调用凭证（例如：真正的身份证，虎符，令牌）
其中snsapi_base属于基础接口，若应用已拥有其它scope权限，则默认拥有snsapi_base的权限。使用snsapi_base可以让移动端网页授权绕过跳转授权登录页请求用户授权的动作，直接跳转第三方网页带上授权临时票据（code），但会使得用户已授权作用域（scope）仅为snsapi_base，从而导致无法获取到需要用户授权才允许获得的数据和基础功能。接口调用方法可查阅
《微信授权关系接口调用指南》
什么是授权临时票据（code）？答：第三方通过code进行获取access_token的时候需要用到，code的超时时间为10分钟，一个code只能成功换取一次access_token即失效。code的临时性和一次保障了微信授权登录的安全性。第三方可通过使用https和state参数，进一步加强自身授权登录的安全性。
什么是授权作用域（scope）？答：授权作用域（scope）代表用户授权给第三方的接口权限，第三方应用需要向微信开放平台申请使用相应scope的权限后，使用文档所述方式让用户进行授权，经过用户授权，获取到相应access_token后方可对接口进行调用。
网站内嵌二维码微信登录js代码中style字段作用？答：第三方页面颜色风格可能为浅色调或者深色调，若第三方页面为浅色背景，style字段应提供"black"值（或者不提供，black为默认值），则对应的微信登录文字样式为黑色。相关效果如下：