企业微信扫码登录

概述

企业微信提供了OAuth的扫码登录授权方式，可以让企业的网站在浏览器内打开时，引导成员使用企业微信扫码登录授权，从而获取成员的身份信息，免去登录的环节。

在进行企业微信授权登录之前，需要先在企业的管理端后台创建一个具备“企业微信授权登录”能力的应用。

开启网页接入

在企业的管理端后台，进入需要开启的目标应用，点击企业微信授权登录的“设置”，进入如下页面

然后点击 “设置授权回调域”，输入回调域名，点击“保存”。

授权流程说明
企业微信授权登录目前支持authorization_code模式，适用于拥有server端的应用授权。该模式整体流程为：

1. 企业发起授权登录请求，企业微信用户允许授权后，企业微信会重定向到企业网站，并且带上授权临时票据code参数；
2. 然后企业应用通过 corpid 和 corpsecret 获取access_token；
3. 企业应用通过 access_token 和 code 获取用户身份，进入相应的系统。

时序图如下：

使用介绍 :

步骤一：请求code

第一种方式:

需要接入企业微信网页登录授权的页面加入一个跳转链接引导，链接地址如下：

https://open.work.weixin.qq.com/wwopen/sso/qrConnect?appid=ww100000a5f2191&agentid=1000000&redirect_uri=http%3A%2F%2Fwww.oa.com&state=web_login@gyoss9

若提示“该链接无法访问”，请检查参数是否填写错误，如redirect_uri的域名与网页应用的可信域名不一致

参数说明

参数	必须	说明
appid	是	企业微信的CorpID，在企业微信管理端查看
agentid	是	授权方的网页应用ID，在具体的网页应用中查看
redirect_uri	是	重定向地址，需要进行UrlEncode
state	否	用于保持请求和回调的状态，授权请求后原样带回给企业。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议企业带上该参数，可设置为简单的随机数加session进行校验

返回说明

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

redirect_uri?code=CODE&state=STATE

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

redirect_uri?state=STATE

第二种方式:

现在大多数需要将二维码内嵌到页面上, 这里介绍第二种请求code的方式

1 在页面上引入js

<script src="<c:url value="http://rescdn.qqmail.com/node/ww/wwopenmng/js/sso/wwLogin-1.0.0.js" />" type="text/javascript"></script>

2 创建一个装二维码的容器

<div id="wx_reg"></div>

3 实例化js对象

window.WwLogin({
"id" : "wx_reg",
"appid" : "wx23ed5347320b93b9",
"agentid" : "1000005",
"redirect_uri" :"http%3A%2F%2Ftangqian.tunnel.qydev.com/sso/wechatlogin/pageLogin",
"state" : "web_login@gyoss9",
"href" : "",
});

参数说明

参数	必须	说明
id	是	企业页面显示二维码的容器id
appid	是	企业微信的CorpID，在企业微信管理端查看
agentid	是	授权方的网页应用ID，在具体的网页应用中查看
redirect_uri	是	重定向地址，需要进行UrlEncode
state	否	用于保持请求和回调的状态，授权请求后原样带回给企业。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议企业带上该参数，可设置为简单的随机数加session进行校验
href	否	自定义样式链接，企业可根据实际需求覆盖默认样式。用于控制二维码大小 .详见文档底部FAQ

href作用:

如果企业觉得企业微信团队提供的默认样式与自己的页面样式不匹配，可以自己提供样式文件来覆盖默认样式。举个例子，如企业觉得默认二维码过大，可以提供相关css样式文件，并把链接地址填入href字段（只支持https协议的资源地址）

.impowerBox .qrcode {width: 200px;}
.impowerBox .title {display: none;}
.impowerBox .info {width: 200px;}
.status_icon {display：none  !important}
.impowerBox .status {text-align: center;}

后台代码

/**
     * 浏览器内登录
     * @param model
     * @param code
     * @param request
     * @return
     */
    @RequestMapping("/wechatlogin/pageLogin")
    public String pageLogin(Model model, String code, HttpServletRequest request){
        try {
            System.out.println(code);
            String access_token = WeixinUtil.getAccessToken();
            JSONObject userMsg = WeixinUtil.getUserMsg(access_token, code);     //根据access_token和code获取用户ticket

            String userid = userMsg.getString("UserId");
            JSONObject jsonUser = WeixinUtil.getUserByUserid(access_token, userid);        //根据userid获取用户信息

            String mobile = jsonUser.getString("mobile");                   //获取用户的手机
            BASE64Encoder encoder = new BASE64Encoder();
            String enMobile = encoder.encode(mobile.getBytes());            //使用base64加密手机号码

            return "redirect:/sso/wechatlogin/"+enMobile;           //跳转到登录接口
        } catch (Exception e) {
            e.printStackTrace();
            return "/admin/index/404";
        }
    }

WeixinUtil工具类在我资源下载里面, 需要的关注后去资源下载

注:获取access_token那个方法我是配置在全局配置文件中的, 没有的可以直接做成常量直接用. 建议也弄成全局配置文件