小伙伴们有各种疑问可以去参考官方文档进行详细的学习下 微信开发文档 ，此次介绍的将是前后端不分离的微信扫码登录

微信登录开发流程：

1. 申请微信接入
2. 生成登录二维码
3. 用户扫码并授权
4. 调用回调方法
5. 通过code去获取用户信息带到页面展示

官方流程图：

1. 申请微信接入：

先提醒下各位：申请微信接入很麻烦，本人因为公司业务需要，用的是公司申请好的。还没自己去申请过。

先去到 微信开放平台 https://open.weixin.qq.com

申请一个网站应用 (要审核通过之后才能用)

注：

1. appid和appSecret就是调用微信接口的凭证
2. 授权回调域：调用微信接口生成的二维码地址，用户扫码并授权后，会重定向到回调地址
3. 因为在本地localhost进行测试，如果回调地址为localhost第三方微信将无法进行跳转。原因是外网访问不到本地，怎么办?解决办法：那就使用 ngrok 内网穿透把本地项目服务映射到公网，所以在测试时填写的回调地址是内网穿透时的访问域名
4. 如果不知道内网穿透的小伙伴，建议先看看 Sunny-Ngrok 内网穿透的使用

如果不知道内网穿透的小伙伴，建议先看看 Sunny-Ngrok 内网穿透的使用

启动 Sunny-Ngrok 内网穿透的客户端，先将本地服务映射到公网。

2. 项目环境搭建：

下面正式开始代码部分，创建SpringBoot项目并导入所需Jar包：
环境：JDK1.8，SpringBoot2.3.5.RELEASE

<dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.apache.httpcomponents</groupId><artifactId>httpclient</artifactId><version>4.5.13</version></dependency><dependency><groupId>org.json</groupId><artifactId>json</artifactId><version>20200518</version></dependency>
</dependencies>

yaml文件：
因为所需要这4个参数，所以直接配置在yaml文件中，使用时直接在类中直接通过@Value注解引入即可

1. appid：
2. appsecret：
3. scope: snsapi_login
4. callBack：

server:port: 80spring:thymeleaf:prefix: classpath:/templates/suffix: .htmlmvc:static-path-pattern: classpath:/static/wechat:#微信接口的AppID：appid: #微信接口的AppSecret：appsecret: #应用授权作用域(网站应用目前的固定写法就是snsapi_login)scope: snsapi_login#扫码之后的回调地址：callBack: http://wechatlogin.free.idcfengye.com/callBack

这里需要一个工具类HttpRequestUtils ，用于发起http请求。可以将代码直接复制过去用

package com.login.utils;import org.apache.http.client.config.RequestConfig;
import org.apache.http.client.methods.CloseableHttpResponse;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.impl.conn.PoolingHttpClientConnectionManager;import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;/*** @author: libo* @date: 2020/11/21  20:49* @motto: 即使再小的帆也能远航*/
public class HttpRequestUtils {private static CloseableHttpClient httpClient;static {PoolingHttpClientConnectionManager cm = new PoolingHttpClientConnectionManager();cm.setMaxTotal(100);cm.setDefaultMaxPerRoute(20);cm.setDefaultMaxPerRoute(50);httpClient = HttpClients.custom().setConnectionManager(cm).build();}public static String httpGet(String url) {CloseableHttpResponse response = null;BufferedReader in = null;String result = "";try {HttpGet httpGet = new HttpGet(url);RequestConfig requestConfig = RequestConfig.custom().setConnectTimeout(30000).setConnectionRequestTimeout(30000).setSocketTimeout(30000).build();httpGet.setConfig(requestConfig);httpGet.setConfig(requestConfig);httpGet.addHeader("Content-type", "application/json; charset=utf-8");httpGet.setHeader("Accept", "application/json");response = httpClient.execute(httpGet);in = new BufferedReader(new InputStreamReader(response.getEntity().getContent()));StringBuffer sb = new StringBuffer("");String line = "";String NL = System.getProperty("line.separator");while ((line = in.readLine()) != null) {sb.append(line + NL);}in.close();result = sb.toString();} catch (IOException e) {e.printStackTrace();} finally {try {if (null != response) {response.close();}} catch (IOException e) {e.printStackTrace();}}return result;}
}

3.后端Controller接口：

package com.login.controller;import com.login.utils.HttpRequestUtils;
import org.json.JSONObject;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;import java.io.UnsupportedEncodingException;
import java.net.URLEncoder;
import java.util.Map;/*** @author: libo* @date: 2020/11/21  21:32* @motto: 即使再小的帆也能远航*/
@Controller
@CrossOrigin
@SuppressWarnings("unchecked")
public class weChatController {@Value(value = "${wechat.appid}")private String appid;@Value(value = "${wechat.appsecret}")private String appsecret;@Value(value = "${wechat.scope}")private String scope;@Value(value = "${wechat.callback}")private String callBack;/*生产二维码链接进行扫码登录*/@RequestMapping("/login")public String index(Model model) throws Exception {String oauthUrl = "https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect";String redirect_uri = URLEncoder.encode(callBack, "utf-8");oauthUrl = oauthUrl.replace("APPID", appid).replace("REDIRECT_URI", redirect_uri).replace("SCOPE", scope);model.addAttribute("oauthUrl", oauthUrl);return "login";}/*生成自定义二维码*/@RequestMapping("/custom")public String custom(Model model) throws UnsupportedEncodingException {String redirect_uri = URLEncoder.encode(callBack, "utf-8");model.addAttribute("appid", appid);model.addAttribute("scope", scope);model.addAttribute("redirect_uri", redirect_uri);return "custom";}/*回调方法*/@RequestMapping("/callBack")public String callBack(String code,Map<String,Object> map) {//1.通过code获取access_tokenString url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code";url = url.replace("APPID", appid).replace("SECRET", appsecret).replace("CODE", code);String tokenInfoStr = HttpRequestUtils.httpGet(url);JSONObject tokenInfoObject = new JSONObject(tokenInfoStr);//2.通过access_token和openid获取用户信息String userInfoUrl = "https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID";userInfoUrl = userInfoUrl.replace("ACCESS_TOKEN", tokenInfoObject.getString("access_token")).replace("OPENID", tokenInfoObject.getString("openid"));String userInfoStr = HttpRequestUtils.httpGet(userInfoUrl);map.put("token", tokenInfoStr);/*转为JSON*/JSONObject user = new JSONObject(userInfoStr);/*只获取openid并返回,openid是微信用户的唯一标识,userInfoStr里面有用户的全部信息*/String openid = user.getString("openid");map.put("openid", openid);/*获取用户头像url*/String headimgurl = user.getString("headimgurl");map.put("headimgurl", headimgurl);/*获取用户昵称*/String nickname = user.getString("nickname");map.put("nickname", nickname);/*获取用户性别*/int sex = user.getInt("sex");map.put("sex", sex);/*获取用户国家*/String country = user.getString("country");map.put("country", country);/*获取用户省份*/String province = user.getString("province");map.put("province", province);/*获取用户城市*/String city = user.getString("city");map.put("city", city);return "callBack";}}

4.HTML页面代码：

1.点击生成二维码页面：我这里是嵌入了一张微信的Logo图片，点击a标签跳转 weChatLogin.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>wechat登录</title>
</head>
<body><a th:href="${oauthUrl}"><img src="../static/wechat_logo.png" alt="微信登录"></a>
</body>
</html>

2.回调方法后返回用户信息页面 callBack.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>授权结果页</title>
</head>
<body><h2>用戶,授权成功!</h2><br><h3>通过code获取access_token 结果:</h3><p th:text="${token}"></p><h3>通过access_token获取用户信息 结果:</h3>头像：<img th:src="${headimgurl}" alt="用户头像"><br/>openid：<span th:text="${openid}"></span><br/>昵称：<span th:text="${nickname}"></span><br/>性别：<span th:text="${sex}"></span><br/>国家：<span th:text="${country}"></span><br/>省份：<span th:text="${province}"></span><br/>城市：<span th:text="${city}"></span></body>
</html>

3.内嵌(自定义二维码) custom.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>内嵌(自定义二维码)</title>
</head>
<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
<body><center><div id="login_container"></div></center>
<script th:inline="javascript">var obj = new WxLogin({self_redirect:true,id:"login_container",appid: [[${appid}]],scope: [[${scope}]],redirect_uri: [[${redirect_uri}]],state: "",style: "",href: ""});
</script>
</body>
</html>

5.测试结果：

使用内网穿透的域名来访问接口哦，因为已经在公网映射到本地项目了

1. 访问login接口，点击logo图标
   

2. 扫码测试

4. 授权后调用回调方法，拿到用户信息放到页面展示
   注：openid是微信用户的唯一id

6.补充说明：

到这里呢微信登录SpringBoot前后端不分离就差不多了，在这里想给大家提一下如果是前后端分离怎么做？

1.回调地址一般是网站的主页对吧，例如：www.abc.com
2.前端按钮通过appid和回调地址生成二维码
3.用户扫码授权之后，微信接口会再通过回调地址重定向回主页 www.abc.com。在这是会有一个名为code的参数
4.此时前端拥有code之后，传到后端接口方法中去，后端通过code获取用户信息。再返回前端

总结为一句话：1.www.adc.com主页生成二维码，2.扫码授权登录，3.拿code参数去获取用户信息

如果我们有再三思考的机会，几乎没有一件事情是不能被简化的。