微信扫码登录

• 微信登录之前还需要了解OAuth2知识
  
• 前期准备
  
  
  
  • 注册微信开放平台
    
  • 邮箱激活
    
  • 完善开发者资料（暂不支持个体用户）
    
  • 开发者资质认证：营业执照、1-2个工作如审批、300元
    
  • 网站应用：最好是已经部署到服务器上的项目，7个工作日审批
    
  
  
• 审核通过之后会有AppID和AppSecret两个值
  
  
  
  • AppID: 申请的ID
    
  • AppSecret: 申请的Secret
    
  
  
• 说明：微信登录二维码是以弹出层的形式打开，所以前端需要做一些引入
  
  
  
  • 在页面中引入js文件：https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js
    
  • 在需要使用微信登录的地方实例js对象
    
  
  

1. var obj = new WxLogin(
2.         {
3.           self_redirect: true,
4.           id: "放置二维码的容器id",
5.           appid: "",
6.           scope: "",
7.           redirect_uri: "",
8.           state: "",
9.           style: "",
10.           href: ""
11.         }
12. );

复制代码

• 整个过程
  
  
  
  • 通过调用后端的接口，将上面js对象所需要的参数返回给前端页面
    
  • 前端页面获取到所需要的参数即可生成二维码
    
  • 用户扫描二维码重定向（回调）到当前后端返回的redirect_uri
    
  • 回调成功则微信登录成功
    
  
  
• 从这个过程中发现微信登录过程中至少需要两个接口
  
• SpringBoot实现
  
  
  
  • application.properties添加微信登录的一些配置，其中redirect_uri应该是在申请微信登录的时候会存在一个映射关系（这里博主也不是很懂），
    目前微信登录支持localhost，端口应该是尚硅谷老师设定了（有可能是博主的映射关系(狗头)），后面的映射路径就是回调接口的映射路径
    
  
  

1. wx.open.app_id=上面提供的AppID
2. wx.open.app_secret=上面提供的AppSecret
3. wx.open.redirect_uri=http://localhost:8160/api/user/wx/callback
4. web.base_url=http://localhost:3000

复制代码

• 新建常量类，读取配置文件中微信的配置信息
  

1. import org.springframework.beans.factory.InitializingBean;
2. import org.springframework.beans.factory.annotation.Value;
3. import org.springframework.stereotype.Component;
5. @Component
6. public class WxConstantProperties implements InitializingBean {
7.     @Value("${wx.open.app_id}")
8.     private String appId;
9.     @Value("${wx.open.app_secret}")
10.     private String appSecret;
11.     @Value("${wx.open.redirect_uri}")
12.     private String redirectUrl;
13.     @Value("${web.base_url}")
14.     private String yyghBaseUrl;
16.     public static String WX_OPEN_APP_ID;
17.     public static String WX_OPEN_APP_SECRET;
18.     public static String WX_OPEN_REDIRECT_URL;
19.     public static String WEB_BASE_URL;
21.     @Override
22.     public void afterPropertiesSet() throws Exception {
23.         WX_OPEN_APP_ID = appId;
24.         WX_OPEN_APP_SECRET = appSecret;
25.         WX_OPEN_REDIRECT_URL = redirectUrl;
26.         WEB_BASE_URL = yyghBaseUrl;
27.     }
28. }

复制代码

• 第一个接口：返回前端生成二维码的参数
  

1. import java.util.HashMap;
3. @Controller
4. @RequestMapping("/api/user/wx")
5. public class WxApiController {
7.     @GetMapper("/getWxParam")
8.     @ResponseBody
9.     public Result<Map<String, Object>> getParam() {
10.         try {
11.             Map<String, Object> map = new HashMap<>();
12.             map.put("appid", WxConstantProperties.WX_OPEN_APP_ID);
13.             // 固定值
14.             map.put("scope", "snsapi_login");
15.             String wxOpenRedirectUrl = WxConstantProperties.WX_OPEN_REDIRECT_URL;
16.             // 应微信开放平台要求，需要使用URLEncoder规范url
17.             wxOpenRedirectUrl = URLEncoder.encode(wxOpenRedirectUrl, "utf-8");
18.             map.put("redirect_uri", wxOpenRedirectUrl);
19.             // 随意值
20.             map.put("state", System.currentTimeMillis() + "");
21.             return Result.ok(map);
22.         } catch (Exception e) {
23.             e.printStackTrace();
24.             return Result.fail();
25.         }
26.     }
27. }

复制代码

• 前端创建两个文件
  
  
  
  • 请求后端接口的js文件
    
  
  

1. import request from '@/utils/request'
2. export default {
3.     getWxParam() {
4.         return request({
5.             url: `/api/user/wx/getWxParam`,
6.             method: 'get'
7.         })
8.     }
9. }

复制代码

• 当前登录页面的vue组件
  

1. [/code]
2. [list]
3. [*]在编写第二个接口前，需要了解一个服务端向另一个服务端发送请求，往往是需要一个工具类
4. [/list][code]import org.apache.commons.io.IOUtils;
5. import org.apache.commons.lang.StringUtils;
6. import org.apache.http.Consts;
7. import org.apache.http.HttpEntity;
8. import org.apache.http.HttpResponse;
9. import org.apache.http.NameValuePair;
10. import org.apache.http.client.HttpClient;
11. import org.apache.http.client.config.RequestConfig;
12. import org.apache.http.client.config.RequestConfig.Builder;
13. import org.apache.http.client.entity.UrlEncodedFormEntity;
14. import org.apache.http.client.methods.HttpGet;
15. import org.apache.http.client.methods.HttpPost;
16. import org.apache.http.client.methods.HttpRequestBase;
17. import org.apache.http.conn.ssl.SSLConnectionSocketFactory;
18. import org.apache.http.conn.ssl.X509HostnameVerifier;
19. import org.apache.http.entity.ContentType;
20. import org.apache.http.entity.StringEntity;
21. import org.apache.http.impl.client.CloseableHttpClient;
22. import org.apache.http.impl.client.HttpClients;
23. import org.apache.http.impl.conn.PoolingHttpClientConnectionManager;
24. import org.apache.http.message.BasicNameValuePair;
25. import org.apache.http.ssl.SSLContextBuilder;
26. import org.apache.http.ssl.TrustStrategy;
28. import javax.net.ssl.SSLContext;
29. import javax.net.ssl.SSLException;
30. import javax.net.ssl.SSLSession;
31. import javax.net.ssl.SSLSocket;
32. import java.io.IOException;
33. import java.nio.charset.StandardCharsets;
34. import java.security.GeneralSecurityException;
35. import java.security.cert.CertificateException;
36. import java.security.cert.X509Certificate;
37. import java.util.ArrayList;
38. import java.util.List;
39. import java.util.Map;
40. import java.util.Map.Entry;
41. import java.util.Set;
43. public class HttpClientUtils {
44.     public static final int CONN_TIMEOUT = 10000;
45.     public static final int READ_TIMEOUT = 10000;
46.     public static final String CHARSET = "UTF-8";
47.     public static final String CONTENT_TYPE = "application/x-www-form-urlencoded";
48.     private static HttpClient client;
50.     static {
51.         PoolingHttpClientConnectionManager cm = new PoolingHttpClientConnectionManager();
52.         cm.setMaxTotal(128);
53.         cm.setDefaultMaxPerRoute(128);
54.         client = HttpClients.custom().setConnectionManager(cm).build();
55.     }
57.     public static String postParameters(String url, String params) throws Exception {
58.         return post(url, params, CONTENT_TYPE, CHARSET, CONN_TIMEOUT, READ_TIMEOUT);
59.     }
61.     public static String postParameters(String url, String params, String charset, Integer connTimeout, Integer readTimeout) throws Exception {
62.         return post(url, params, CONTENT_TYPE, charset, connTimeout, readTimeout);
63.     }
65.     public static String postParameters(String url, Map<String, String> params) throws Exception {
66.         return postForm(url, params, null, CONN_TIMEOUT, READ_TIMEOUT);
67.     }
69.     public static String postParameters(String url, Map<String, String> params, Integer connTimeout, Integer readTimeout) throws Exception {
70.         return postForm(url, params, null, connTimeout, readTimeout);
71.     }
73.     public static String get(String url) throws Exception {
74.         return get(url, CHARSET, null, null);
75.     }
77.     public static String get(String url, String charset) throws Exception {
78.         return get(url, charset, CONN_TIMEOUT, READ_TIMEOUT);
79.     }
81.     /**
82.      * 发送一个get请求
83.      * @param url 请求地址
84.      * @param charset 字符集编码
85.      * @param connTimeout 连接超时时间
86.      * @param readTimeout 响应超时时间
87.      * @return String
88.      * @throws Exception ConnectTimeoutException、SocketTimeoutException等其他异常
89.      */
90.     public static String get(String url, String charset, Integer connTimeout, Integer readTimeout) throws Exception {
91.         HttpClient client = null;
92.         HttpGet get = new HttpGet(url);
93.         String result = "";
94.         try {
95.             // 设置参数
96.             getHttpRequestBase(get, connTimeout, readTimeout);
98.             // 获取响应信息
99.             HttpResponse res = getHttpResponse(url, get, client);
101.             result = IOUtils.toString(res.getEntity().getContent(), charset);
102.         }finally {
103.             get.releaseConnection();
104.             if (url.startsWith("https") && client instanceof CloseableHttpClient) {
105.                 ((CloseableHttpClient) client).close();
106.             }
107.         }
108.         return result;
109.     }
111.     /**
112.      * 发送一个post请求
113.      * @param url 请求地址
114.      * @param body 请求体
115.      * @param mimeType 类似于Content-Type
116.      * @param charset 字符集编码
117.      * @param connTimeout 连接超时时间
118.      * @param readTimeout 响应超时时间
119.      * @return String
120.      * @throws Exception ConnectTimeoutException、SocketTimeoutException等其他异常
121.      */
122.     public static String post(String url, String body, String mimeType, String charset, Integer connTimeout, Integer readTimeout) throws Exception {
123.         HttpClient client = null;
124.         HttpPost post = new HttpPost(url);
125.         String result = "";
126.         try {
127.             if(!StringUtils.isEmpty(body)) {
128.                 HttpEntity entity = new StringEntity(body, ContentType.create(mimeType, charset));
129.                 post.setEntity(entity);
130.             }
131.             // 设置参数
132.             getHttpRequestBase(post, connTimeout, readTimeout);
134.             // 获取响应信息
135.             HttpResponse res = getHttpResponse(url, post, client);
137.             result = IOUtils.toString(res.getEntity().getContent(), charset);
138.         } finally {
139.             post.releaseConnection();
140.             if (url.startsWith("https") && client instanceof CloseableHttpClient) {
141.                 ((CloseableHttpClient) client).close();
142.             }
143.         }
144.         return result;
145.     }
147.     /**
148.      * form表单提交方式请求
149.      * @param url 请求地址
150.      * @param params 表单参数
151.      * @param headers 请求头
152.      * @param connTimeout 连接超时时间
153.      * @param readTimeout 响应超时时间
154.      * @return String
155.      * @throws Exception ConnectTimeoutException、SocketTimeoutException等其他异常
156.      */
157.     public static String postForm(String url, Map<String, String> params, Map<String, String> headers, Integer connTimeout, Integer readTimeout) throws Exception {
158.         HttpClient client = null;
159.         HttpPost post = new HttpPost(url);
160.         try {
161.             if (params != null && !params.isEmpty()) {
162.                 List<NameValuePair> formParams = new ArrayList<>();
163.                 Set<Entry<String, String>> entrySet = params.entrySet();
164.                 for (Entry<String, String> entry : entrySet) {
165.                     formParams.add(new BasicNameValuePair(entry.getKey(), entry.getValue()));
166.                 }
167.                 UrlEncodedFormEntity entity = new UrlEncodedFormEntity(formParams, Consts.UTF_8);
168.                 post.setEntity(entity);
169.             }
170.             if (headers != null && !headers.isEmpty()) {
171.                 for (Entry<String, String> entry : headers.entrySet()) {
172.                     post.addHeader(entry.getKey(), entry.getValue());
173.                 }
174.             }
175.             // 设置参数
176.             getHttpRequestBase(post, connTimeout, readTimeout);
178.             // 获取响应信息
179.             HttpResponse res = getHttpResponse(url, post, client);
181.             return IOUtils.toString(res.getEntity().getContent(), String.valueOf(StandardCharsets.UTF_8));
182.         }finally {
183.             post.releaseConnection();
184.             if (url.startsWith("https") && client instanceof CloseableHttpClient) {
185.                 ((CloseableHttpClient) client).close();
186.             }
187.         }
188.     }
190.     /**
191.      * 设置参数
192.      * @param base 协议请求对象
193.      * @param connTimeout 连接超时时间
194.      * @param readTimeout 响应超时时间
195.      */
196.     private static void getHttpRequestBase(HttpRequestBase base, Integer connTimeout, Integer readTimeout) {
197.         Builder customReqConf = RequestConfig.custom();
198.         if(connTimeout != null) customReqConf.setConnectTimeout(connTimeout);
199.         if(readTimeout != null) customReqConf.setSocketTimeout(readTimeout);
200.         base.setConfig(customReqConf.build());
201.     }
203.     /**
204.      * 获取响应信息
205.      * @param url 请求地址
206.      * @param base 协议请求对象
207.      * @return HttpResponse
208.      * @throws Exception 异常信息
209.      */
210.     private static HttpResponse getHttpResponse(String url, HttpRequestBase base, HttpClient client) throws Exception{
211.         if (url.startsWith("https")) {
212.             // 执行 Https 请求.
213.             client = createSSLInsecureClient();
214.         } else {
215.             // 执行 Http 请求.
216.             client = HttpClientUtils.client;
217.         }
218.         return client.execute(base);
219.     }
221.     /**
222.      * 创建SSL连接供https协议请求
223.      * @return CloseableHttpClient
224.      * @throws GeneralSecurityException 安全异常
225.      */
226.     private static CloseableHttpClient createSSLInsecureClient() throws GeneralSecurityException {
227.         try {
228.             SSLContext sslContext = new SSLContextBuilder().loadTrustMaterial(null, new TrustStrategy() {
229.                 @Override
230.                 public boolean isTrusted(X509Certificate[] x509Certificates, String s) throws CertificateException {
231.                     return true;
232.                 }
233.             }).build();
235.             SSLConnectionSocketFactory sslConnectionSocketFactory = new SSLConnectionSocketFactory(sslContext, new X509HostnameVerifier() {
236.                 @Override
237.                 public void verify(String s, SSLSocket sslSocket) throws IOException {}
239.                 @Override
240.                 public void verify(String s, X509Certificate x509Certificate) throws SSLException {}
242.                 @Override
243.                 public void verify(String s, String[] strings, String[] strings1) throws SSLException {}
245.                 @Override
246.                 public boolean verify(String s, SSLSession sslSession) {
247.                     return true;
248.                 }
249.             });
250.             return HttpClients.custom().setSSLSocketFactory(sslConnectionSocketFactory).build();
251.         } catch (GeneralSecurityException e) {
252.             throw e;
253.         }
254.     }
256.     /**
257.      * 从 response 里获取 charset
258.      * @param response  响应信息
259.      */
260.     @SuppressWarnings("unused")
261.     private static String getCharsetFromResponse(HttpResponse response) {
262.         // Content-Type:text/html; charset=GBK
263.         if (response.getEntity() != null  && response.getEntity().getContentType() != null && response.getEntity().getContentType().getValue() != null) {
264.             String contentType = response.getEntity().getContentType().getValue();
265.             if (contentType.contains("charset=")) {
266.                 return contentType.substring(contentType.indexOf("charset=") + 8);
267.             }
268.         }
269.         return null;
270.     }
271. }

复制代码

• 第二个接口：处理扫码之后的接口（一般是获取当前扫码用户的信息）
  

1. @Controller
2. @RequestMapping("/api/user/wx")
3. public class WxApiController {
4.     @GetMapping("/callback")
5.     public String callback(String code, String state) {
6.         // 根据临时票据code和微信id及密钥请求微信固定地址，获取两个值（access_token和openid）
7.         StringBuffer baseAccessTokenUrl = new StringBuffer()
8.                 .append("https://api.weixin.qq.com/sns/oauth2/access_token")
9.                 .append("?appid=%s").append("&secret=%s")
10.                 .append("&code=%s").append("&grant_type=authorization_code");
11.         String accessTokenUrl = String.format(
12.                 baseAccessTokenUrl.toString(), ConstantWxPropertiesUtils.WX_OPEN_APP_ID,
13.                 ConstantWxPropertiesUtils.WX_OPEN_APP_SECRET, code);
14.         
15.         try {
16.             // 使用HttpClientUtils工具类请求地址
17.             String accessTokenInfo = HttpClientUtils.get(accessTokenUrl);
18.             JSONObject jsonObject = JSONObject.parseObject(accessTokenInfo);
19.             String accessToken = jsonObject.getString("access_token");
20.             String openid = jsonObject.getString("openid");
21.             // 如果数据库表中存在openid值，
22.             UserInfo userInfo = userInfoService.selectWxInfoOpenId(openid);
23.             if(userInfo == null) {
24.                 // 根据access_token和openid获取扫码人信息
25.                 String baseUserInfoUrl = "https://api.weixin.qq.com/sns/userinfo" +
26.                         "?access_token=%s" + "&openid=%s";
27.                 String userInfoUrl = String.format(baseUserInfoUrl, accessToken, openid);
28.                 String userInfoResult = HttpClientUtils.get(userInfoUrl);
29.                 JSONObject userObject = JSONObject.parseObject(userInfoResult);
30.                 String nickname = userObject.getString("nickname");
31.                 String headImageUrl = userObject.getString("headimgurl");
32.                
33.                 // 信息保存到数据库中（省略）
34.             }
35.             // 最后重定向到前端某一个页面，期间可以随带一些重要的信息
36.             return "redirect:" + WxConstantProperties.WEB_BASE_URL + "/weixin/callback?token=" +
37.                     token + "&openid=" + openid + "&name=" + URLEncoder.encode(name, "utf-8");
38.         } catch (Exception e) {
39.             e.printStackTrace();
40.             return null;
41.         }
42.     }
43. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！