微信登录

微信登录

1. 前端根据AppID、AppSecret生成登录二维码。
2. 用户确认登录，跳转到定义的回调函数(携带微信返回的临时code)。
3. 后端回调函数取出code，加上appid、appSecret发送请求，得到access_token。
4. 最后发送access_token得到个人信息。

1.登录授权时序图

• AppID：应用唯一标识，在微信开放平台提交应用审核通过后获得

• AppSecret：秘钥

• code：微信官方平台返回的临时身份信息。

• access_token：开发者将提交AppID、AppSecret、加上先前返回的临时code，得到token。

• 最后发送token、获取用户的身份信息。

2.前端部分

2.1 安装js,引入组件

//微信官方提供的生成二维码的js
npm install vue-wxlogin

import wxlogin from "vue-wxlogin"; // 引入

export default {
   
  name: "Header",
  components: {
   
    wxlogin // 声明引用的组件
  },

2.2 搭载二维码、声明变量

• 搭载二维码

<!-- 二维码 -->
<wxlogin id="wxLoginForm" style="display:none"
 :appid="appid" :scope="scope" :redirect_uri="redirect_uri">
</wxlogin>

• data中声明变量

data() {
   
	return {
   
		appid:"wx????", // 应用唯一标识，在微信开放平台提交应用审核通过后获得
		scope:"snsapi_login", // 应用授权作用域，网页应用目前仅填写snsapi_login即可
		redirect_uri:"http://www.xxx.com/wxlogin", //重定向地址，(回调地址)};
},

• 注意！在这，我修改了hosts文件，将回调地址映射到本机。
• 注意！：回调的端口默认为 80 端口。

127.0.0.1 www.xxx.com

3. 后端部分

3.1 相关依赖

<!-- 需要使用HttpServletRequest获得参数 -->
<dependency>
   <groupId>javax.servlet</groupId>
        <artifactId>servlet-api</artifactId>
        <version>2.4</version>
        <scope>provided</scope>
  </dependency>
        <!-- 需要使用HttpClient发出请求 -->
<dependency>
      <groupId>org.apache.httpcomponents</groupId>
       <artifactId>httpclient</artifactId>
        <version>4.5.12</version>
</dependency>

3.2 客户端发送请求HttpClient

• 此工具类用来在客户端发送请求，并接受响应参数。

/**
 * @author Zoe
 * * @date 2021/5/7
 * 发送请求
 */
public class HttpClientUtil {
   
    /**
     * 无参请求。重载
     */
    public static String doGet(String url) {
   
        return doGet(url, null);
    }

    /**
     * 有参请求
     * 发送get请求
     * @param url   请求地址
     * @param param 参数
     * @return 响应字符串
     */
    public static String doGet(String url, Map<String, String> param) {
   
        //1.创建httpClient对象
        CloseableHttpClient httpClient = HttpClients.createDefault();
        	// 定义返回的字符串信息、响应对象
        	String resultString = null;
        	CloseableHttpResponse response = null;
        //2.创建url
        try {
   
            URIBuilder builder = new URIBuilder(url);
            if (param != null) {
   
                //在url后面拼接请求参数
                for (String key : param.