基于Springboot微信授权登录（内嵌二维码）

我与产品经理的“恩怨情仇”，在最近一次需求中，需要给用户提供微信快捷登录。
先科普一下，微信开放平台提供了两种二维码的展示方式，一种是跳转页面，还有一种是内嵌在自己的网站中，可以直接在网站内就能完成登录，无需跳转到微信域下登录后再返回，提升微信登录的流畅性与成功率，详细可看微信开放平台文档。
公司也是考虑到了用户体验，故采用内嵌的方式。

第一步

需要在微信开发平台创建网站应用，得到AppID，AppSecret，申请过程非常简单，这里就不做过多演示。

调用前请详细阅读：微信开放平台网站应用接口文档

第二步（application.properties配置）

AppID: 微信开放平台创建的网站应用的AppID

AppSecret: 微信开放平台创建的网站应用的AppSecret

scope: snsapi_login #用户授权的作用域

#内嵌方式不需要配置回调地址
#redirect_url: 微信开放平台授权回调域

后端

@Controller
public class ZgWeChatController {@Value("${AppID}")private String appid;@Value("${scope}")private String scope;@Value("${AppSecret}")private String appsecret;@RequestMapping("getRedirect") /*主管微信登录回调*/public void getRedirect(HttpServletRequest request, HttpServletResponse response) throws IOException {String code = request.getParameter("code");//String state = request.getParameter("state");//通过code获取access_tokenString token_url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code";token_url =  token_url.replace("APPID",appid).replace("SECRET",appsecret).replace("CODE",code);String res_token = ZgWeChatController.interfaceUtil(token_url);JSONObject res_json = JSONObject.fromObject(res_token);/*微信openid*/String openid = (String) res_json.get("openid");//根据openid判断是否要绑定账号。if (){/*绑定账号*/response.sendRedirect("xxx?openid="+openid);}else {/*逻辑处理*//*直接登录*/response.sendRedirect("index");}}/*调取微信接口封装*/public static String interfaceUtil(String path) {try {URL url = new URL(path);//打开和url之间的连接HttpURLConnection conn = (HttpURLConnection) url.openConnection();PrintWriter out = null;//请求方式
//          conn.setRequestMethod("POST");
//           //设置通用的请求属性conn.setRequestProperty("accept", "*/*");conn.setRequestProperty("connection", "Keep-Alive");conn.setRequestProperty("user-agent", "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)");//设置是否向httpUrlConnection输出，设置是否从httpUrlConnection读入，此外发送post请求必须设置这两个//最常用的Http请求无非是get和post，get请求可以获取静态页面，也可以把参数放在URL字串后面，传递给servlet，//post与get的 不同之处在于post的参数不是放在URL字串里面，而是放在http请求的正文内。conn.setDoOutput(true);conn.setDoInput(true);//获取URLConnection对象对应的输出流out = new PrintWriter(conn.getOutputStream());//发送请求参数即数据//out.print(data);//缓冲数据out.flush();//获取URLConnection对象对应的输入流InputStream is = conn.getInputStream();//构造一个字符流缓存BufferedReader br = new BufferedReader(new InputStreamReader(is));String str = "";while ((str = br.readLine()) != null) {//System.out.println(str);return str;}//关闭流is.close();//断开连接，最好写上，disconnect是在底层tcp socket链接空闲时才切断。如果正在被其他线程使用就不切断。//固定多线程的话，如果不disconnect，链接会增多，直到收发不出信息。写上disconnect后正常一些。conn.disconnect();//System.out.println("完整结束");} catch (Exception e) {e.printStackTrace();}return null;}
}

前端

<div id="login_container"></div>
<script  type="text/javascript">var state = Math.ceil(Math.random()*1000);var obj = new WxLogin({self_redirect:false,  //这里有个坑，如果为true的话，最终效果会是后台跳转的页面会在容器中显示，而不会改变页面。id:"login_container", //容器的id，最终二维码会展示指定的容器中appid: "AppID值",scope: "snsapi_login", //推荐使用snsapi_login，用户需要授权redirect_uri: encodeURIComponent("http://"+window.location.host+"/getRedirect"),state:  state,style: "black",href:"data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O30NCi5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJveCAuaW5mbyB7d2lkdGg6IDIwMHB4O30NCi5pbXBvd2VyQm94IC5pbmZvIHtkaXNwbGF5OiBub25lO30NCi5zdGF0dXNfaWNvbiB7ZGlzcGxheTogbm9uZX0NCi5pbXBvd2VyQm94IC5zdGF0dXMge3RleHQtYWxpZ246IGxlZnQ7fSA="});
</script>

href属性为自定义样式，不填则为默认样式，推荐使用站长工具进行base64加密。
作者使用的样式：

.impowerBox .qrcode {width: 200px;}
.impowerBox .title {display: none;}
.impowerBox .info {width: 200px;}
.impowerBox .info {display: none;}
.status_icon {display: none}
.impowerBox .status {text-align: left;}

最终效果

非常干净的二维码: