微信登录介绍

注：下面为作者，学习是笔记收录，如有错误还望包涵

前期准备

注册开发者账号

微信开放平台

提交网站应用审核

填写过后，还有有一个页面需要填写，提交一份纸质版申请书扫描件（会提供模板，我们下载再来填写后，需盖章，签名），配置回调域名（扫码登录后会跳转的页面）等。
　　之后提交审核即可，等微信审核通过，我们即可获得我们需要的网页应用的appid和AppSecret，并配置后回调的域名了（这三样是我们开发所必须的）。

授权流程说明

微信官方文档

微信OAuth2.0授权登录让微信用户使用微信身份安全登录第三方应用或网站，在微信用户授权登录已接入微信OAuth2.0的第三方应用后，第三方可以获取到用户的接口调用凭证（access_token），通过access_token可以进行微信开放平台授权关系接口调用，从而可实现获取微信用户基本开放信息和帮助用户实现基础开放功能等。 微信OAuth2.0授权登录目前支持authorization_code模式，适用于拥有server端的应用授权。

该模式整体流程为：

1. 第三方发起微信授权登录请求，微信用户允许授权第三方应用后，微信会拉起应用或重定向到第三方网站，并且带上授权临时票据code参数；
2. 通过code参数加上AppID和AppSecret等，通过API换取access_token；
3. 通过access_token进行接口调用，获取用户基本数据资源或帮助用户实现基本操作。
   获取access_token时序图：
   

具体开发流程

1、在配置文件中配置相关内容

注：回调地址这里因为本地调试的原因使用内网穿透技术，配置本地的服务和端口号
如果不知道内网穿透的小伙伴，建议先看看 Sunny-Ngrok 内网穿透的使用

#应用唯一标识，在微信开放平台提交应用审核通过后获得
wx.open.app_id=
#应用密钥AppSecret，在微信开放平台提交应用审核通过后获得
wx.open.app_secret=
#回调地址(此处地址，为扫描成功后，跳转的地址，在测试时，最好改成本地的地址)
wx.open.redirect_url=http://localhost:8160/api/ucenter/wx/callback
#前端项目的地址
yygh.baseUrl=http://localhost:3000

2、添加配置类

/**
 * 在主启动类启动时初始化配置文件中的内容
 * <p>
 * 创建时间: 2022-03-22 21:57
 *
 * @author fuxshen
 * @version v1.0.0
 * @since v1.0.0
 */
@Component
public class ConstantWxPropertiesUtils implements InitializingBean {
    
    

	@Value("${wx.open.app_id}")
	private String appId;

	@Value("${wx.open.app_secret}")
	private String appSecret;

	@Value("${wx.open.redirect_url}")
	private String redirectUrl;

	@Value("${yygh.baseUrl}")
	private String yyghBaseUrl;


	public static String WX_OPEN_APP_ID;
	public static String WX_OPEN_APP_SECRET;
	public static String WX_OPEN_REDIRECT_URL;
	public static String YYGH_BASE_URL;


	@Override
	public void afterPropertiesSet() throws Exception {
    
    
		WX_OPEN_APP_ID = appId;
		WX_OPEN_APP_SECRET = appSecret;
		WX_OPEN_REDIRECT_URL = redirectUrl;
		YYGH_BASE_URL = yyghBaseUrl;
	}
}

3、添加httpclient工具类

映入依赖

            <dependency>
                <groupId>org.apache.httpcomponents</groupId>
                <artifactId>httpclient</artifactId>
                <version>4.5.1</version>
            </dependency>

import org.apache.commons.io.IOUtils;
import org.apache.commons.lang.StringUtils;
import org.apache.http.Consts;
import org.apache.http.HttpEntity;
import org.apache.http.HttpResponse;
import org.apache.http.NameValuePair;
import org.apache.http.client.HttpClient;
import org.apache.http.client.config.RequestConfig;
import org.apache.http.client.config.RequestConfig.Builder;
import org.apache.http.client.entity.UrlEncodedFormEntity;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.conn.ConnectTimeoutException;
import org.apache.http.conn.ssl.SSLConnectionSocketFactory;
import org.apache.http.conn.ssl.SSLContextBuilder;
import org.apache.http.conn.ssl.TrustStrategy;
import org.apache.http.conn.ssl.X509HostnameVerifier;
import org.apache.http.entity.ContentType;
import org.apache.http.entity.StringEntity;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.impl.conn.PoolingHttpClientConnectionManager;
import org.apache.http.message.BasicNameValuePair;

import javax.net.ssl.SSLContext;
import javax.net.ssl.SSLException;
import javax.net.ssl.SSLSession;
import javax.net.ssl.SSLSocket;
import java.io.IOException;
import java.net.SocketTimeoutException;
import java.security.GeneralSecurityException;
import java.security.cert.CertificateException;
import java.security.cert.X509Certificate;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import java.util.Map.Entry;
import java.util.Set;

/**
 * 请求工具类（模拟浏览器请求和响应）
 * <p>
 * 创建时间: 2022-03-23 20:28
 *
 * @author fuxshen
 * @version v1.0.0
 * @since v1.0.0
 */
public class HttpClientUtils {
    
    
	public static final int connTimeout=10000;
	public static final int readTimeout=10000;
	public static final String charset="UTF-8";
	private static HttpClient client = null;

	static {
    
    
		PoolingHttpClientConnectionManager cm = new PoolingHttpClientConnectionManager();
		cm.setMaxTotal(128);
		cm.setDefaultMaxPerRoute(128);
		client = HttpClients.custom().setConnectionManager(cm).build();
	}

	public static String postParameters(String url, String parameterStr) throws ConnectTimeoutException, SocketTimeoutException, Exception{
    
    
		return post(url,parameterStr,"application/x-www-form-urlencoded",charset,connTimeout,readTimeout);
	}

	public static String postParameters(String url, String parameterStr,String charset, Integer connTimeout, Integer readTimeout) throws ConnectTimeoutException, SocketTimeoutException, Exception{
    
    
		return post(url,parameterStr,"application/x-www-form-urlencoded",charset,connTimeout,readTimeout);
	}

	public static String postParameters(String url, Map<String, String> params) throws ConnectTimeoutException,
			SocketTimeoutException, Exception {
    
    
		return postForm(url, params, null, connTimeout, readTimeout);
	}

	public static String postParameters(String url, Map<String, String> params, Integer connTimeout,Integer readTimeout) throws ConnectTimeoutException,
			SocketTimeoutException, Exception {
    
    
		return postForm(url, params, null, connTimeout, readTimeout);
	}

	public static String get(String url) throws Exception {
    
    
		return get(url, charset, null, null);
	}

	public static String get(String url, String charset) throws Exception {
    
    
		return get(url, charset, connTimeout, readTimeout);
	}

	/**
	 * 发送一个 Post 请求, 使用指定的字符集编码.
	 *
	 * @param url
	 * @param body RequestBody
	 * @param mimeType 例如 application/xml "application/x-www-form-urlencoded" a=1&b=2&c=3
	 * @param charset 编码
	 * @param connTimeout 建立链接超时时间,毫秒.
	 * @param readTimeout 响应超时时间,毫秒.
	 * @return ResponseBody, 使用指定的字符集编码.
	 * @throws ConnectTimeoutException 建立链接超时异常
	 * @throws SocketTimeoutException  响应超时
	 * @throws Exception
	 */
	public static String post(String url, String body, String mimeType,String charset, Integer connTimeout, Integer readTimeout)
			throws ConnectTimeoutException, SocketTimeoutException, Exception {
    
    
		HttpClient client = null;
		HttpPost post = new HttpPost(url);
		String result = "";
		try {
    
    
			if (StringUtils.isNotBlank(body)) {
    
    
				HttpEntity entity = new StringEntity(body, ContentType.create(mimeType, charset));
				post.setEntity(entity);
			}
			// 设置参数
			RequestConfig.Builder customReqConf = RequestConfig.custom();
			if (connTimeout != null) {
    
    
				customReqConf.setConnectTimeout(connTimeout);
			}
			if (readTimeout != null) {
    
    
				customReqConf.setSocketTimeout(readTimeout);
			}
			post.setConfig(customReqConf.build());

			HttpResponse res;
			if (url.startsWith("https")) {
    
    
				// 执行 Https 请求.
				client = createSSLInsecureClient();
				res = client.execute(post);
			} else {
    
    
				// 执行 Http 请求.
				client = HttpClientUtils.client;
				res = client.execute(post);
			}
			result = IOUtils.toString(res.getEntity().getContent(), charset);
		} finally {
    
    
			post.releaseConnection();
			if (url.startsWith("https") && client != null&& client instanceof CloseableHttpClient) {
    
    
				((CloseableHttpClient) client).close();
			}
		}
		return result;
	}


	/**
	 * 提交form表单
	 *
	 * @param url
	 * @param params
	 * @param connTimeout
	 * @param readTimeout
	 * @return
	 * @throws ConnectTimeoutException
	 * @throws SocketTimeoutException
	 * @throws Exception
	 */
	public static String postForm(String url, Map<String, String> params, Map<String, String> headers, Integer connTimeout,Integer readTimeout) throws ConnectTimeoutException,
			SocketTimeoutException, Exception {
    
    

		HttpClient client = null;
		HttpPost post = new HttpPost(url);
		try {
    
    
			if (params != null && !params.isEmpty()) {
    
    
				List<NameValuePair> formParams = new ArrayList<NameValuePair>();
				Set<Map.Entry<String, String>> entrySet = params.entrySet();
				for (Map.Entry<String, String> entry : entrySet) {
    
    
					formParams.add(new BasicNameValuePair(entry.getKey(), entry.getValue()));
				}
				UrlEncodedFormEntity entity = new UrlEncodedFormEntity(formParams, Consts.UTF_8);
				post.setEntity(entity);
			}

			if (headers != null && !headers.isEmpty()) {
    
    
				for (Map.Entry<String, String> entry : headers.entrySet()) {
    
    
					post.addHeader(entry.getKey(), entry.getValue());
				}
			}
			// 设置参数
			RequestConfig.Builder customReqConf = RequestConfig.custom();
			if (connTimeout != null) {
    
    
				customReqConf.setConnectTimeout(connTimeout);
			}
			if (readTimeout != null) {
    
    
				customReqConf.setSocketTimeout(readTimeout);
			}
			post.setConfig(customReqConf.build());
			HttpResponse res = null;
			if (url.startsWith("https")) {
    
    
				// 执行 Https 请求.
				client = createSSLInsecureClient();
				res = client.execute(post);
			} else {
    
    
				// 执行 Http 请求.
				client = HttpClientUtils.client;
				res = client.execute(post);
			}
			return IOUtils.toString(res.getEntity().getContent(), "UTF-8");
		} finally {
    
    
			post.releaseConnection();
			if (url.startsWith("https") && client != null
					&& client instanceof CloseableHttpClient) {
    
    
				((CloseableHttpClient) client).close();
			}
		}
	}

	/**
	 * 发送一个 GET 请求
	 */
	public static String get(String url, String charset, Integer connTimeout,Integer readTimeout)
			throws ConnectTimeoutException,SocketTimeoutException, Exception {
    
    

		HttpClient client = null;
		HttpGet get = new HttpGet(url);
		String result = "";
		try {
    
    
			// 设置参数
			Builder customReqConf = RequestConfig.custom();
			if (connTimeout != null) {
    
    
				customReqConf.setConnectTimeout(connTimeout);
			}
			if (readTimeout != null) {
    
    
				customReqConf.setSocketTimeout(readTimeout);
			}
			get.setConfig(customReqConf.build());

			HttpResponse res = null;

			if (url.startsWith("https")) {
    
    
				// 执行 Https 请求.
				client = createSSLInsecureClient();
				res = client.execute(get);
			} else {
    
    
				// 执行 Http 请求.
				client = HttpClientUtils.client;
				res = client.execute(get);
			}

			result = IOUtils.toString(res.getEntity().getContent(), charset);
		} finally {
    
    
			get.releaseConnection();
			if (url.startsWith("https") && client != null && client instanceof CloseableHttpClient) {
    
    
				((CloseableHttpClient) client).close();
			}
		}
		return result;
	}

	/**
	 * 从 response 里获取 charset
	 */
	@SuppressWarnings("unused")
	private static String getCharsetFromResponse(HttpResponse ressponse) {
    
    
		// Content-Type:text/html; charset=GBK
		if (ressponse.getEntity() != null  && ressponse.getEntity().getContentType() != null && ressponse.getEntity().getContentType().getValue() != null) {
    
    
			String contentType = ressponse.getEntity().getContentType().getValue();
			if (contentType.contains("charset=")) {
    
    
				return contentType.substring(contentType.indexOf("charset=") + 8);
			}
		}
		return null;
	}

	/**
	 * 创建 SSL连接
	 * @return
	 * @throws GeneralSecurityException
	 */
	private static CloseableHttpClient createSSLInsecureClient() throws GeneralSecurityException {
    
    
		try {
    
    
			SSLContext sslContext = new SSLContextBuilder().loadTrustMaterial(null, new TrustStrategy() {
    
    
				public boolean isTrusted(X509Certificate[] chain, String authType) throws CertificateException {
    
    
					return true;
				}
			}).build();

			SSLConnectionSocketFactory sslsf = new SSLConnectionSocketFactory(sslContext, new X509HostnameVerifier() {
    
    

				@Override
				public boolean verify(String arg0, SSLSession arg1) {
    
    
					return true;
				}

				@Override
				public void verify(String host, SSLSocket ssl)
						throws IOException {
    
    
				}

				@Override
				public void verify(String host, X509Certificate cert)
						throws SSLException {
    
    
				}

				@Override
				public void verify(String host, String[] cns,
				                   String[] subjectAlts) throws SSLException {
    
    
				}
			});
			return HttpClients.custom().setSSLSocketFactory(sslsf).build();

		} catch (GeneralSecurityException e) {
    
    
			throw e;
		}
	}
}

4、添加接口

@Controller
@RequestMapping("/api/ucenter/wx")
public class WeixinApiController {
    
    

   /**
	 * 微信扫码后进行回调的方法
	 */
	@GetMapping("/callback")
	@Transactional(rollbackFor = Exception.class)
	public String callback(String code, String state) {
    
    
		//第一步 获取临时票据 code
		log.info("临时票据code:" + code);
		//第二步 拿着code和微信id和秘钥，请求微信固定地址 ，得到两个值
		//使用code和appid以及appscrect换取access_token
		StringBuffer baseAccessTokenUrl = new StringBuffer()
				.append("https://api.weixin.qq.com/sns/oauth2/access_token")
				.append("?appid=%s")
				.append("&secret=%s")
				.append("&code=%s")
				.append("&grant_type=authorization_code");
		String accessTokenUrl = String.format(
				baseAccessTokenUrl.toString(), 
				ConstantWxPropertiesUtils.WX_OPEN_APP_ID, 
				ConstantWxPropertiesUtils.WX_OPEN_APP_SECRET, 
				code);

		try {
    
    
			//使用httpclient请求这个地址
			String accessTokenInfo = HttpClientUtils.get(accessTokenUrl);
			log.info("请求微信返回信息accessTokenInfo:" + accessTokenInfo);

			//从返回字符串获取两个值 openid  和  access_token (将json转换为对象)
			JSONObject jsonObject = JSONObject.parseObject(accessTokenInfo);
			String access_token = jsonObject.getString("access_token");
			String openid = jsonObject.getString("openid");

            //判断数据库是否存在微信的扫描人信息
			//根据openid判断
			UserInfo userInfo = userInfoService.selectWxInfoOpenId(openid);

			//第三步 拿着openid  和  access_token请求微信地址，得到扫描人信息
			String baseUserInfoUrl = "https://api.weixin.qq.com/sns/userinfo" +
					"?access_token=%s" +
					"&openid=%s";
			String userInfoUrl = String.format(baseUserInfoUrl, access_token,openid);
			String resultInfo = HttpClientUtils.get(userInfoUrl);
			log.info("请求微信返回信息resultInfo:"+resultInfo);

			JSONObject userInfoObject = JSONObject.parseObject(resultInfo);
			//解析用户信息
			//用户昵称
			String nickname = userInfoObject.getString("nickname");
			//用户头像
			String headimgurl = userInfoObject.getString("headimgurl");

           //此处if-else中的步骤非必要步骤
			if (ObjectUtils.isEmpty(userInfo)){
    
    
				//获取扫描人信息添加数据库
				userInfo = new UserInfo();
				userInfo.setNickName(nickname);
				userInfo.setOpenid(openid);
				userInfo.setStatus(1);
				userInfoService.save(userInfo);
			}else {
    
    
				userInfoService.updateUserInfo(openid,nickname);
			}

			//返回name和token字符串
			Map<String,String> map = new HashMap<>();
			String name = userInfo.getName();
			if(StringUtils.isEmpty(name)) {
    
    
				name = userInfo.getNickName();
			}
			if(StringUtils.isEmpty(name)) {
    
    
				name = userInfo.getPhone();
			}
			map.put("name", name);

			//判断userInfo是否有手机号，如果手机号为空，返回openid
			//如果手机号不为空，返回openid值是空字符串
			//前端判断：如果openid不为空，绑定手机号，如果openid为空，不需要绑定手机号
			if(StringUtils.isEmpty(userInfo.getPhone())) {
    
    
				map.put("openid", userInfo.getOpenid());
			} else {
    
    
				map.put("openid", "");
			}
			//使用jwt生成token字符串
			String token = JwtHelper.createToken(userInfo.getId(), name);
			map.put("token", token);

			//跳转到前端页面
			return "redirect:" + ConstantWxPropertiesUtils.YYGH_BASE_URL + "/weixin/callback?token="+map.get("token")+
					"&openid="+map.get("openid")+"&name="+URLEncoder.encode(map.get("name"),"utf-8");

		} catch (Exception e) {
    
    
			e.printStackTrace();
		}
		return null;
	}

	/**生成微信二维码的接口*/
	@GetMapping("/getLoginParam")
	@ResponseBody
	public Result getLoginParam(){
    
    
		try {
    
    
			Map<String, Object> map = new HashMap<>();
			map.put("appid", ConstantWxPropertiesUtils.WX_OPEN_APP_ID);
			map.put("scope","snsapi_login");
			String wxOpenRedirectUrl = ConstantWxPropertiesUtils.WX_OPEN_REDIRECT_URL;
			wxOpenRedirectUrl = URLEncoder.encode(wxOpenRedirectUrl, "utf-8");
			map.put("redirect_uri",wxOpenRedirectUrl);
			map.put("state",System.currentTimeMillis()+"");
			return Result.success(map);
		} catch (UnsupportedEncodingException e) {
    
    
			e.printStackTrace();
			return null;
		}
	}
}

5、整合前端部分内容

引入微信js

 //页面渲染之后执行
  mounted() {
    
    
    //初始化微信js
    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'
    document.body.appendChild(script)

    // 微信登录回调处理
    let self = this;
    window["loginCallback"] = (name, token, openid) => {
    
    
      // debugger
      self.loginCallback(name, token, openid);
    }
}

封装api请求

import request from '@/utils/request'

//定义一个常量（公共访问路径）
const api_name = `/api/ucenter/wx`

export default {
    
    

  getLoginParam() {
    
    
    return request({
    
    
      url: `${
      
      api_name}/getLoginParam`,//请求地址
      method: `get`//请求类型
    })
  }
}

此处为点击跳转到扫码登录的事件

           <div class="bottom">
              <div class="wechat-wrapper" @click="weixinLogin()">
                <span class="iconfont icon"></span>
              </div>
              <span class="third-text"> 第三方账号登录 </span>
            </div>

生成扫码登录二维码的方法（重点）

weixinLogin() {
    
    
        //此处为非必做项，本人因为结合了手机验证码登录的方法
        //为了进行切换所以改变type
      this.dialogAtrr.showLoginType = 'weixin'

      //调用接口
      weixinApi.getLoginParam().then(response => {
    
    
      //下面内容可以参考开放平台官方文档
        var obj = new WxLogin({
    
    
          self_redirect: true,
          id: 'weixinLogin', // 需要显示的容器id(就是页面中显示的div的id)
          appid: response.data.appid, // 公众号appid wx*******
          scope: response.data.scope, // 网页默认即可
          redirect_uri: response.data.redirect_uri, // 授权成功后回调的url
          state: response.data.state, // 可设置为简单的随机数加session用来校验
          style: 'black', // 提供"black"、"white"可选。二维码的样式
          href: '' // 外部css文件url，需要https
        })
      })

回调返回页面

<template>
  <!-- header -->
  <div>

  </div>
  <!-- footer -->
</template>

<script>
export default {
      
      
  layout: "empty",

  data() {
      
      
    return {
      
      

    }
  },

  //在页面渲染之后进行操作
  mounted() {
      
      
    let token = this.$route.query.token
    let name = this.$route.query.name
    let openid = this.$route.query.openid

    // 调用父vue方法
    window.parent['loginCallback'](name, token, openid)
  }
}
</script>

父组件定义回调方法

methods: {
    
    
 loginCallback(name, token, openid) {
    
    
      // 打开手机登录层，绑定手机号，改逻辑与手机登录一致
      if (openid != '') {
    
    
        this.userInfo.openid = openid

        this.showLogin()
      } else {
    
    
        this.setCookies(name, token)
      }
    },
    // 绑定登录，点击显示登录层
    showLogin() {
    
    
      this.dialogUserFormVisible = true

      // 初始化登录层相关参数
      this.dialogAtrr = {
    
    ...defaultDialogAtrr}
    },
      setCookies(name, token) {
    
    
      cookie.set('token', token, {
    
    domain: 'localhost'})
      cookie.set('name', name, {
    
    domain: 'localhost'})
      window.location.reload()
    },
}