第三方登录之微信扫码登录

微信登录开发流程&＃xff1a;

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

官方流程图&＃xff1a;

1. 申请微信接入&＃xff1a;

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

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

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

注&＃xff1a;

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

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

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

2. 项目环境搭建&＃xff1a;

下面正式开始代码部分&＃xff0c;创建SpringBoot项目并导入所需Jar包&＃xff1a;
环境&＃xff1a;JDK1.8&＃xff0c;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文件&＃xff1a;
因为所需要这4个参数&＃xff0c;所以直接配置在yaml文件中&＃xff0c;使用时直接在类中直接通过&＃64;Value注解引入即可

1. appid&＃xff1a;
2. appsecret&＃xff1a;
3. scope: snsapi_login
4. callBack&＃xff1a;

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


这里需要一个工具类HttpRequestUtils &＃xff0c;用于发起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;/*** &＃64;author: libo* &＃64;date: 2020/11/21 20:49* &＃64;motto: 即使再小的帆也能远航*/
public class HttpRequestUtils {private static CloseableHttpClient httpClient;static {PoolingHttpClientConnectionManager cm &＃61; new PoolingHttpClientConnectionManager();cm.setMaxTotal(100);cm.setDefaultMaxPerRoute(20);cm.setDefaultMaxPerRoute(50);httpClient &＃61; HttpClients.custom().setConnectionManager(cm).build();}public static String httpGet(String url) {CloseableHttpResponse response &＃61; null;BufferedReader in &＃61; null;String result &＃61; "";try {HttpGet httpGet &＃61; new HttpGet(url);RequestConfig requestConfig &＃61; RequestConfig.custom().setConnectTimeout(30000).setConnectionRequestTimeout(30000).setSocketTimeout(30000).build();httpGet.setConfig(requestConfig);httpGet.setConfig(requestConfig);httpGet.addHeader("Content-type", "application/json; charset&＃61;utf-8");httpGet.setHeader("Accept", "application/json");response &＃61; httpClient.execute(httpGet);in &＃61; new BufferedReader(new InputStreamReader(response.getEntity().getContent()));StringBuffer sb &＃61; new StringBuffer("");String line &＃61; "";String NL &＃61; System.getProperty("line.separator");while ((line &＃61; in.readLine()) !&＃61; null) {sb.append(line &＃43; NL);}in.close();result &＃61; sb.toString();} catch (IOException e) {e.printStackTrace();} finally {try {if (null !&＃61; response) {response.close();}} catch (IOException e) {e.printStackTrace();}}return result;}
}

3.后端Controller接口&＃xff1a;

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

4.HTML页面代码&＃xff1a;

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

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


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

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


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

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


5.测试结果&＃xff1a;

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

1. 访问login接口&＃xff0c;点击logo图标
   

2. 扫码测试

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

6.补充说明&＃xff1a;

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

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

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