微信网站扫一扫登录

标签（空格分隔）： wechat

科普微信授权原理

前端的打开方式

前端有两种打开方式

通过重定向到微信的页面然后用户扫描二维码授权，再重定向回第三方网站

通过js直接显示二维码登录，不用跳转微信页面

第一种方式是通过后台重定向过去的所以前端只需要写个链接就行了，第二种方式是在页面上直接显示二维码登录减少了跳页面的时间，这种方式需要在网页上用js实现，一般第二种用的比较多

使用js显示微信扫一扫二维码的打开方式

步骤1：在页面中先引入如下JS文件（支持https）：

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

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

var obj = new WxLogin({
     id:"login_container", // 需要显示的容器id
     appid: "",  // 公众号appid wx*******
     scope: "snsapi_login",  // 网页默认即可
     redirect_uri: "", // 授权成功后回调的url
     state: "", // 可设置为简单的随机数加session用来校验
     style: "black", // 提供"black"、"white"可选。二维码的样式
     href: "" // 外部css文件url，需要https
});

参数说明

参数	是否必须	说明
self_redirect	否	true：手机点击确认登录后可以在 iframe 内跳转到 redirect_uri，false：手机点击确认登录后可以在 top window 跳转到 redirect_uri。默认为 false。
id	是	第三方页面显示二维码的容器id
appid	是	应用唯一标识，在微信开放平台提交应用审核通过后获得
scope	是	应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login即可
redirect_uri	是	重定向地址，需要进行UrlEncode
state	否	用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验
style	否	提供”black”、”white”可选，默认为黑色文字描述
href	否	自定义样式链接，第三方可根据实际需求覆盖默认样式

用户点击确认授权后网页会自动跳转redirect_uri

后端的打开方式

重定向到微信页面的打开方式

登录你的网站应用
https://xxx.xxx.com/wechat/login.do
打开后需要重定向至微信的地址并带上必要的参数

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

这里需要变的参数是appid和redirect_url

访问以上链接微信开发平台会重定向到redirect_uri的网址上，并且带上code和state参数，如果用户没有授权就不会有code参数，仅会带上state参数

后台根据code获取用户信息封装

获取用户信息的步骤

通过code获取access_token

通过access_token调用接口

这里使用了weixin-java-tools工具来获取用户信息
github地址传送门

public WxMpUser getWxUser(String code) {
        if (code == null) {
            return null;
        }
        WxMpOAuth2AccessToken wxMpOAuth2AccessToken = null;
        WxMpUser wxMpUser = null;
        try {
            wxMpOAuth2AccessToken = wxMpService.oauth2getAccessToken(code);
            wxMpOAuth2AccessToken = wxMpService.oauth2refreshAccessToken(wxMpOAuth2AccessToken.getRefreshToken());
            wxMpUser = wxMpService.oauth2getUserInfo(wxMpOAuth2AccessToken, null);
        } catch (WxErrorException e) {
            return null;
        }

        return wxMpUser;
    }

微信扫一扫登录