微信扫码登录应用网站

准备工作

网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统。
在进行微信OAuth2.0授权登录接入之前，在微信开放平台注册开发者帐号，并拥有一个已审核通过的网站应用，并获得相应的AppID和AppSecret，申请微信登录且通过审核后，可开始接入流程。

1. 注册开发者账号，地址：微信开放平台
2. 提交网站应用审核，在已经登录的界面中：管理中心 => 网站应用 => 创建网站应用。等微信审核通过，我们即可获得我们需要的网页应用的 appId 和 appSecret
3. 完成开发者资质认证，只有认证了才能使用微信那些高级的接口。开放平台完成开发者资质认证指引

微信官方文档

第一步：请求CODE

第三方使用网站应用授权登录前请注意已获取相应网页授权作用域（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的网址上，并且带上code和state参数；若用户禁止授权，则重定向后不会带上code参数，仅会带上state参数

vue 使用 wxlogin 插件

1、安装

 npm install vue-wxlogin --save-dev

2、引入

 import wxlogin from 'vue-wxlogin';
Vue.component('my-component', {
    components: {
        wxlogin
    }
});

3、使用

<wxlogin   appid="wx"
           scope="snsapi_login"
           :redirect_uri='encodeURIComponent("https://xxx")' >
        </wxlogin>

第二步：通过code获取access_token

http请求方式: GET
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&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调用获取用户信息接口

http请求方式: GET
https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID

返回示列：

{
"openid":"OPENID",
"nickname":"NICKNAME",
"sex":1,
"province":"PROVINCE",
"city":"CITY",
"country":"COUNTRY",
"headimgurl": "https://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/0",
"privilege":[
"PRIVILEGE1",
"PRIVILEGE2"
],
"unionid": " o6_bmasdasdsad6_2sgVt7hMZOPfL"

}

第四步：将 openid 与应用账号绑定，用于记录微信用户的用户数据；保存 unionid 用于微信用户在同一开发者账号下不同应用之间的数据互通。