java springboot+redis+WebSocket实现微信扫码登录

最新推荐文章于 2024-08-13 10:18:58 发布
置顶 最新推荐文章于 2024-08-13 10:18:58 发布
阅读量888 收藏 3
点赞数 2
分类专栏： springboot java 微信对接 文章标签： java spring boot 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_39698303/article/details/108403979
版权
java 同时被 3 个专栏收录
23 篇文章 0 订阅
订阅专栏
springboot
19 篇文章 0 订阅
订阅专栏
微信对接
1 篇文章 0 订阅
订阅专栏

微信扫码登录网站

代码篇

在这里插入图片描述

maven

		<!--XML解析-->
        <dependency>
            <groupId>org.dom4j</groupId>
            <artifactId>dom4j</artifactId>
            <version>2.1.1</version>
        </dependency>
        <!--websocket-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
            <version>2.3.3.RELEASE</version>
        </dependency>

application.yml

#微信配置
wechat:
  appId: wx5**********756
  appSecret: 21ca23************70403
  token: 1******a
  sceneId: 1****
  accessTokenUrl: https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=%s&secret=%s
  ticketUrl: https://api.weixin.qq.com/cgi-bin/qrcode/create?access_token=%s
  qrCodeUrl: https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=%s
  shortUrl: https://api.weixin.qq.com/cgi-bin/shorturl?access_token=%s
  userInfoUrl: https://api.weixin.qq.com/cgi-bin/user/info?access_token=%s&openid=%s&lang=zh_CN

WeChatProperties.java

package com.qcn.common.config;

import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;

/**
 * 读取微信配置文件
 */
@Component
@ConfigurationProperties("wechat")
public class WeChatProperties {
    /**
     * 开发者id
     */
    private String appId;

    /**
     * 开发者密码
     */
    private String appSecret;

    /**
     * 微信公众号校验自定义设置的token
     */
    private String token;

    /**
     * 临时二维码场景值id,32位非0整型
     */
    private Integer sceneId;

    /**
     * 获取accessToken的url
     */
    private String accessTokenUrl;

    /**
     * 获取ticket的url
     */
    private String ticketUrl;

    /**
     * 获取二维码url
     */
    private String qrCodeUrl;

    /**
     * 长链接转短连接url
     */
    private String shortUrl;

    /**
     * 获取用户信息
     */
    private String userInfoUrl;

    public String getAppId() {
        return appId;
    }

    public void setAppId(String appId) {
        this.appId = appId;
    }

    public String getAppSecret() {
        return appSecret;
    }

    public void setAppSecret(String appSecret) {
        this.appSecret = appSecret;
    }

    public String getToken() {
        return token;
    }

    public void setToken(String token) {
        this.token = token;
    }

    public String getAccessTokenUrl() {
        return accessTokenUrl;
    }

    public void setAccessTokenUrl(String accessTokenUrl) {
        this.accessTokenUrl = accessTokenUrl;
    }

    public String getTicketUrl() {
        return ticketUrl;
    }

    public void setTicketUrl(String ticketUrl) {
        this.ticketUrl = ticketUrl;
    }

    public String getQrCodeUrl() {
        return qrCodeUrl;
    }

    public void setQrCodeUrl(String qrCodeUrl) {
        this.qrCodeUrl = qrCodeUrl;
    }

    public String getShortUrl() {
        return shortUrl;
    }

    public void setShortUrl(String shortUrl) {
        this.shortUrl = shortUrl;
    }

    public String getUserInfoUrl() {
        return userInfoUrl;
    }

    public void setUserInfoUrl(String userInfoUrl) {
        this.userInfoUrl = userInfoUrl;
    }

    public Integer getSceneId() {
        return sceneId;
    }

    public void setSceneId(Integer sceneId) {
        this.sceneId = sceneId;
    }
}

SHA1.java

package com.qcn.framework.api.wechat;

import java.security.MessageDigest;

/**
 * 加密
 */
public class SHA1 {

    private static final char[] HEX_DIGITS = {'0', '1', '2', '3', '4', '5',
            '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'};

    private static String getFormattedText(byte[] bytes) {
        int len = bytes.length;
        StringBuilder buf = new StringBuilder(len * 2);
        for (int j = 0; j < len; j++) {
            buf.append(HEX_DIGITS[(bytes[j] >> 4) & 0x0f]);
            buf.append(HEX_DIGITS[bytes[j] & 0x0f]);
        }
        return buf.toString();
    }

    public static String encode(String str) {
        if (str == null) {
            return null;
        }
        try {
            MessageDigest messageDigest = MessageDigest.getInstance("SHA1");
            messageDigest.update(str.getBytes());
            return getFormattedText(messageDigest.digest());
        } catch (Exception e) {
            throw new RuntimeException(e);
        }
    }
}

WeChatUtils.java

package com.qcn.framework.api.wechat;

import org.dom4j.Document;
import org.dom4j.Element;
import org.dom4j.io.SAXReader;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import javax.servlet.http.HttpServletRequest;
import java.io.*;
import java.net.ConnectException;
import java.net.SocketTimeoutException;
import java.net.URL;
import java.net.URLConnection;
import java.util.Arrays;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class WeChatUtils {
    private static final Logger log = LoggerFactory.getLogger(WeChatUtils.class);
    /**
     * 向指定 URL 发送GET方法的请求
     * @param url 发送请求的完整URL,应该是 http://127.0.0.1?name1=value1&name2=value2 的形式
     * @return
     */
    public static String sendGet(String url)
    {
        StringBuilder result = new StringBuilder();
        BufferedReader in = null;
        try
        {
            log.info("开始get请求： {}", url);
            URL realUrl = new URL(url);
            URLConnection connection = realUrl.openConnection();
            connection.setRequestProperty("accept", "*/*");
            connection.setRequestProperty("connection", "Keep-Alive");
            connection.setRequestProperty("user-agent", "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1;SV1)");
            connection.connect();
            in = new BufferedReader(new InputStreamReader(connection.getInputStream(), "UTF-8"));
            String line;
            while ((line = in.readLine()) != null)
            {
                result.append(line);
            }
            log.info("get请求成功 ： {}", result);
        }
        catch (ConnectException e)
        {
            log.error("调用WeChatUtils.sendGet ConnectException, url=" + url, e);
        }
        catch (SocketTimeoutException e)
        {
            log.error("调用WeChatUtils.sendGet SocketTimeoutException, url=" + url, e);
        }
        catch (IOException e)
        {
            log.error("调用WeChatUtils.sendGet IOException, url=" + url, e);
        }
        catch (Exception e)
        {
            log.error("调用WeChatUtils.sendGet Exception, url=" + url, e);
        }
        finally
        {
            try
            {
                if (in != null)
                {
                    in.close();
                }
            }
            catch (Exception ex)
            {
                log.error("调用in.close Exception, url=" + url, ex);
            }
        }
        return result.toString();
    }

    /**
     * 向指定 URL 发送POST方法的请求
     *
     * @param url 发送请求的 URL
     * @param param 请求参数，请求参数应该是 name1=value1&name2=value2 的形式。
     * @return 所代表远程资源的响应结果
     */
    public static String sendPost(String url, String param)
    {
        PrintWriter out = null;
        BufferedReader in = null;
        StringBuilder result = new StringBuilder();
        try
        {
            String urlNameString = url;
            log.info("开始post请求： {}", urlNameString);
            URL realUrl = new URL(urlNameString);
            URLConnection conn = realUrl.openConnection();
            conn.setRequestProperty("accept", "*/*");
            conn.setRequestProperty("connection", "Keep-Alive");
            conn.setRequestProperty("user-agent", "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1;SV1)");
            conn.setRequestProperty("Accept-Charset", "utf-8");
            conn.setRequestProperty("contentType", "utf-8");
            conn.setDoOutput(true);
            conn.setDoInput(true);
            out = new PrintWriter(conn.getOutputStream());
            out.print(param);
            out.flush();
            in = new BufferedReader(new InputStreamReader(conn.getInputStream(), "utf-8"));
            String line;
            while ((line = in.readLine()) != null)
            {
                result.append(line);
            }
            log.info("post请求成功 ： {}", result);
        }
        catch (ConnectException e)
        {
            log.error("调用WeChatUtils.sendPost ConnectException, url=" + url + ",param=" + param, e);
        }
        catch (SocketTimeoutException e)
        {
            log.error("调用WeChatUtils.sendPost SocketTimeoutException, url=" + url + ",param=" + param, e);
        }
        catch (IOException e)
        {
            log.error("调用WeChatUtils.sendPost IOException, url=" + url + ",param=" + param, e);
        }
        catch (Exception e)
        {
            log.error("调用WeChatUtils.sendPost Exception, url=" + url + ",param=" + param, e);
        }
        finally
        {
            try
            {
                if (out != null)
                {
                    out.close();
                }
                if (in != null)
                {
                    in.close();
                }
            }
            catch (IOException ex)
            {
                log.error("调用in.close Exception, url=" + url + ",param=" + param, ex);
            }
        }
        return result.toString();
    }

    /**
     * xml解析
     * @param request
     * @return
     * @throws Exception
     */
    public static Map<String, String> parseXml(HttpServletRequest request) throws Exception {
        Map<String, String> map = new HashMap<>();
        InputStream inputStream = request.getInputStream();
        SAXReader reader = new SAXReader();
        Document document = reader.read(inputStream);
        Element root = document.getRootElement();
        List<Element> elementList = root.elements();
        for (Element e : elementList)
            map.put(e.getName(), e.getText());
        inputStream.close();
        return map;
    }

    /**
     * 校验签名
     * @param signature
     * @param timestamp
     * @param nonce
     * @param token
     * @return
     */
    public static boolean checkSignature(String signature, String timestamp, String nonce, String token) {
        String[] str = new String[]{token, timestamp, nonce};
        //排序
        Arrays.sort(str);
        //拼接字符串
        StringBuffer buffer = new StringBuffer();
        for (int i = 0; i < str.length; i++) {
            buffer.append(str[i]);
        }
        //进行sha1加密
        String temp = SHA1.encode(buffer.toString());
        //与微信提供的signature进行匹对
        return signature.equals(temp);
    }
}

WebSocketConfig.java

package com.qcn.framework.api.websocket;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**
 * 配置websocket
 */
@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

WebSocketService.java

package com.qcn.framework.api.websocket;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.util.Map;
import java.util.Objects;
import java.util.concurrent.ConcurrentHashMap;

/**
 * webSocket服务
 */
@Component
@ServerEndpoint(value = "/webSocket/{socketKey}")
public class WebSocketService {
    private static Logger log = LoggerFactory.getLogger(WebSocketService.class);


    private static int onlineCount = 0;
    private static Map<String, WebSocketService> clients = new ConcurrentHashMap<>();
    private Session session;
    private String socketKey;

    @OnOpen
    public void onOpen(@PathParam("socketKey") String socketKey, Session session) {
        this.socketKey = socketKey;
        this.session = session;
        WebSocketService.onlineCount++;
        clients.put(socketKey, this);
        log.info("【websocket有新的连接】, 总数:{}", onlineCount);
    }

    @OnClose
    public void onClose() {
        clients.remove(socketKey);
        WebSocketService.onlineCount--;
        log.info("【websocket连接断开】总数:{}", onlineCount);
    }

    @OnMessage
    public void onMessage(String message) {
        log.info("【websocket收到来自 {} 消息】： {}",socketKey, message);
    }

    @OnError
    public void onError(Session session, Throwable throwable) {
        log.error("【websocket发生错误】： {}",throwable.getMessage());
    }

    public void sendMessage(String message,String socketKey) {
        String prefix=socketKey.split("_")[0];
        if("admin".equals(prefix)){
            //向admin端所有客户端推送消息
            for (WebSocketService item : clients.values()) {
                if(Objects.equals(item.socketKey.split("_")[0],"admin")){
                    item.session.getAsyncRemote().sendText(message);
                }
            }
        }else{
            //只向pc端扫码登录的客户端推送消息
            for (WebSocketService item : clients.values()) {
                if(Objects.equals(item.socketKey,socketKey)){
                    item.session.getAsyncRemote().sendText(message);
                }
            }
        }
    }
}

WeChatService.java

package com.qcn.framework.api.wechat;

import com.alibaba.fastjson.JSONObject;
import com.qcn.common.config.WeChatProperties;
import com.qcn.common.constant.CardConstants;
import com.qcn.common.constant.Constants;
import com.qcn.common.core.redis.RedisCache;
import com.qcn.common.utils.StringUtils;
import com.qcn.common.utils.sign.Md5Utils;
import com.qcn.framework.api.websocket.WebSocketService;
import com.qcn.framework.web.service.CardLoginService;
import com.qcn.system.domain.card.CardUser;
import com.qcn.system.service.api.ICardUserInfoService;
import com.qcn.system.service.api.ICardUserService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;

import java.io.UnsupportedEncodingException;
import java.net.URLEncoder;
import java.util.HashMap;
import java.util.Map;
import java.util.Objects;
import java.util.concurrent.TimeUnit;

/**
 * 微信服务处理
 */
@Component
public class WeChatService {
    private static final Logger log = LoggerFactory.getLogger(WeChatService.class);
    @Autowired
    private RedisCache redisCache;
    @Autowired
    private WeChatProperties weChatProperties;
    @Autowired
    private WebSocketService webSocketService;
    @Autowired
    private ICardUserService userService;
    @Autowired
    private ICardUserInfoService iCardUserInfoService;
    @Autowired
    private CardLoginService cardLoginService;

    /**
     * 获取AccessToken，写入redis，比官方失效时间expires_in提前10分钟
     *
     * @return
     */
    public String getAccessToken() {
        String accessToken = redisCache.getCacheObject(CardConstants.ACCESS_TOKEN_KEY);
        if (StringUtils.isBlank(accessToken)) {
            String url = String.format(weChatProperties.getAccessTokenUrl(), weChatProperties.getAppId(), weChatProperties.getAppSecret());
            String result = WeChatUtils.sendGet(url);
            JSONObject jsonObject = JSONObject.parseObject(result);
            accessToken = jsonObject.getString("access_token");
            Integer expiresIn = jsonObject.getInteger("expires_in");
            redisCache.setCacheObject(CardConstants.ACCESS_TOKEN_KEY, accessToken, expiresIn - 600, TimeUnit.SECONDS);
        }
        return accessToken;
    }

    /**
     * 获取二维码
     *
     * @return 二维码url，二维码失效时间，webSocket的socketKey
     */
    public Map<String, Object> getQrCodeUrl() {
        Map<String, Object> map = new HashMap<>();
        String qrCodeUrl = "";
        String encodeTicket = "";
        //----获取的二维码ticket----
        String accessToken = getAccessToken();
        String url = String.format(weChatProperties.getTicketUrl(), accessToken);
        //{"expire_seconds": 604800, "action_name": "QR_SCENE", "action_info": {"scene": {"scene_id": 123}}}
        JSONObject params = new JSONObject();
        params.put("expire_seconds", 300);//二维码有效时间(秒),最大不能超过30天
        params.put("action_name", "QR_SCENE");//二维码类型，QR_SCENE为临时的整型参数值
        JSONObject action_info = new JSONObject();//二维码详细信息
        JSONObject scene = new JSONObject();
        scene.put("scene_id", weChatProperties.getSceneId());//场景值ID
        action_info.put("scene", scene);
        params.put("action_info", action_info);
        String result = WeChatUtils.sendPost(url, params.toJSONString());
        JSONObject jsonObject = JSONObject.parseObject(result);
        String ticket = jsonObject.getString("ticket");
        //---凭借此ticket可以在有效时间内换取二维码, https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=TICKET,TICKET记得进行UrlEncode
        try {
            encodeTicket = URLEncoder.encode(ticket, "UTF-8");
            String longUrl = String.format(weChatProperties.getQrCodeUrl(), encodeTicket);
            qrCodeUrl = getShortUrl(accessToken, longUrl);
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        map.put("qrCodeUrl", qrCodeUrl);
        map.put("socketKey", Md5Utils.hash(encodeTicket));
        map.put("expireSeconds", jsonObject.getInteger("expire_seconds"));//该二维码有效时间，以秒为单位
        return map;
    }

    /**
     * 长链接转短连接，提升扫码速度
     *
     * @param accessToken
     * @param longUrl
     * @return
     */
    private String getShortUrl(String accessToken, String longUrl) {
        if (StringUtils.isNotBlank(accessToken) && StringUtils.isNotBlank(longUrl)) {
            String url = String.format(weChatProperties.getShortUrl(), accessToken);
            JSONObject params = new JSONObject();
            params.put("action", "long2short");//固定值
            params.put("long_url", longUrl);
            String result = WeChatUtils.sendPost(url, params.toJSONString());
            JSONObject jsonObject = JSONObject.parseObject(result);
            if (jsonObject.getInteger("errcode") == 0) {
                return jsonObject.getString("short_url");
            }
        }
        return longUrl;
    }

    /**
     * 扫码登录处理
     *
     * @param openId
     */
    public void login(String openId, String socketKey) {
        if (StringUtils.isNotBlank(openId)) {
            String url = String.format(weChatProperties.getUserInfoUrl(), getAccessToken(), openId);
            String result = WeChatUtils.sendGet(url);
            JSONObject jsonObject = JSONObject.parseObject(result);
            log.info("【获取微信用户信息】 {}", jsonObject);
            if (jsonObject.getInteger("subscribe").compareTo(1) == 0) {
                String subscribe_scene = jsonObject.getString("subscribe_scene");
                //关注的渠道来源，ADD_SCENE_SEARCH 公众号搜索(微信扫码登录用这个)
                if ("ADD_SCENE_QR_CODE".equals(subscribe_scene) || "ADD_SCENE_SEARCH".equals(subscribe_scene)) {
                    Map<String, Object> map = new HashMap<>();
                    String weChatNickname = jsonObject.getString("nickname");
                    CardUser user = userService.loginByOpenId(openId);
                    String msg;
                    String code;
                    if (Objects.isNull(user)) {
                        log.info("【微信扫码登录】系统新用户");
                        code = "204";
                        msg = "授权成功，请绑定用户信息，以便下次直接扫码登录";
                    } else {
                        if ("0".equals(user.getStatus())) {
                            log.info("【微信扫码登录成功】系统老用户");
                            code = "200";
                            msg = "登录成功";
                            map.put(Constants.TOKEN, cardLoginService.login(user.getMobile(), "CUSTOM_LOGIN_OPENID"));
                            map.put("data", iCardUserInfoService.findAllInfo(user.getId()));
                            if (!weChatNickname.equals(user.getNickName())) {
                                //更新微信昵称
                                iCardUserInfoService.updateWeChatInfo(user.getId(), null, weChatNickname);
                            }
                        } else {
                            log.info("【微信扫码登录失败】系统老用户账号异常");
                            code = "201";
                            msg = "登录失败，请阅读【用户协议】24小时后提供手机号联系客服";
                        }
                    }
                    map.put("code", code);
                    map.put("msg", msg);
                    map.put("openId", openId);
                    map.put("weChatNickname", weChatNickname);
                    webSocketService.sendMessage(JSONObject.toJSONString(map), socketKey);
                }
            }
        }
    }
}

ApiWeChatController.java

package com.qcn.web.controller.api;

import com.qcn.common.config.WeChatProperties;
import com.qcn.common.core.domain.AjaxResult;
import com.qcn.common.utils.sign.Md5Utils;
import com.qcn.framework.api.wechat.WeChatService;
import com.qcn.framework.api.wechat.WeChatUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.io.UnsupportedEncodingException;
import java.util.Map;

/**
 * 微信相关接口
 */
@RestController
@RequestMapping("/weChat")
public class ApiWeChatController {

    private static final Logger log = LoggerFactory.getLogger(ApiWeChatController.class);
    @Autowired
    private WeChatProperties weChatProperties;
    @Autowired
    private WeChatService weChatService;

    /**
     * token校验
     *
     * @param request
     * @param response
     * @throws UnsupportedEncodingException
     */
    @GetMapping("/msgCallback")
    public void login(HttpServletRequest request, HttpServletResponse response) throws UnsupportedEncodingException {
        log.debug("开始校验token……");
        request.setCharacterEncoding("UTF-8");
        String signature = request.getParameter("signature");//微信加密签名，signature结合了开发者填写的token参数和请求中的timestamp参数、nonce参数。
        String timestamp = request.getParameter("timestamp");//时间戳
        String nonce = request.getParameter("nonce");//随机数
        String echoStr = request.getParameter("echostr");//随机字符串
        PrintWriter out = null;
        try {
            out = response.getWriter();
            if (WeChatUtils.checkSignature(signature, timestamp, nonce, weChatProperties.getToken())) {
                out.write(echoStr);//校验成功原数据返回
            }
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            out.close();
        }
    }

    /**
     * 消息回调
     *
     * @param request
     * @throws Exception
     */
    @PostMapping("/msgCallback")
    public void scanCodeCallback(HttpServletRequest request) throws Exception {
        request.setCharacterEncoding("UTF-8");
        Map<String, String> map = WeChatUtils.parseXml(request);
        String openId = map.get("FromUserName");//发送方帐号（一个OpenID）
        String event = map.get("Event");//事件类型，未关注：subscribe；已关注：SCAN
        String eventKey = map.get("EventKey");//未关注：事件KEY值，qrscene_为前缀，后面为二维码的参数值；已关注：事件KEY值，是一个32位无符号整数，即创建二维码时的二维码scene_id
        String ticket = map.get("Ticket");//二维码的ticket，可用来换取二维码图片
        //不管新关注还是已关注进入，都处理微信授权登录
        log.info("【扫码成功】 ticket：{}",ticket);
        if ("subscribe".equals(event)) {
            eventKey=eventKey.split("_")[1];
        }
        if(weChatProperties.getSceneId().compareTo(Integer.valueOf(eventKey))==0){
            log.info("【微信消息】开始处理微信授权登录……");
            weChatService.login(openId, Md5Utils.hash(ticket));
        }
    }

    /**
     * 获取二维码
     * @return
     */
    @GetMapping("/getQrCodeUrl")
    public AjaxResult getQrCodeUrl() {
        log.debug("开始获取二维码url……");
        Map<String,Object> map = weChatService.getQrCodeUrl();
        log.debug("获取二维码结果：" + map);
        return AjaxResult.success(map);
    }
}

案例-本地&生产环境部署测试

这里使用了内网穿透做本地测试

1.把内网穿透域名地址配置在微信公众号【开发】-【基本设置】，其它配置与yml文件配置一直即可
2.把HTML页面的ip地址也改为这个内网穿透域名
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
1.新建一个静态页面

<!DOCTYPE html>
<html xmlns:v-if="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .body{
            background-image: url("backpic.jpg");
            background-repeat: no-repeat;
            background-size: cover;
        }
        .qrcodeimg {
            width: 200px;
            height: 200px;
        }
        .maindiv {
            width: 400px;
            height: 400px;
            margin-top: 200px;
            float: right;
        }
        .infoinput {
            width: 200px;
            display: block;
        }
        .infoBox {
            width: 220px;
            height: 220px;
            max-height: 220px;
        }
    </style>
</head>
<body class="body">
<div id="app" class="maindiv">
    <div v-if="qrcodeLogin" class="infoBox">
        <div class="block" v-if="qrcodeLogin">
            <el-image :src="src" class="qrcodeimg">
                <div slot="placeholder" class="image-slot">
                    加载中<span class="dot">...</span>
                </div>
            </el-image>
        </div>
       
    </div>


</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                qrcodeLogin: true,
                src: "",
                ipaddr: "25*******e.cc",
                enableSSL: ""
            }
        },
        mounted: function () {
            console.log("页面加载完成!");
            this.getQrcode();
        },
        methods: {
            getQrcode(){//获取带参二维码，并设置到页面
                console.log("设置二维码");
                //请求二维码
                const that = this;
                this.$http.get("http" + that.enableSSL + "://" + that.ipaddr + "/weChat/getQrCodeUrl").then(function(data){
                    console.log("function1:返回结果");
                    console.log(data.body.data);
                    //二维码图片地址
                    that.src = data.body.data.qrCodeUrl;
                    //ticket
                    that.websocketLink(data.body.data.socketKey);
                },function(res){
                    console.log("function2");
                    console.log(res);
                });
            },
            websocketLink(userId) {
                var that = this;
                if ("WebSocket" in window) {
                    console.log("您的浏览器支持 WebSocket!");
                    // 打开一个 web socket
                    var ws = new WebSocket("ws" + that.enableSSL + "://" + that.ipaddr + "/webSocket/" + userId);
                    ws.onopen = function () {
                        // Web Socket 已连接上，使用 send() 方法发送数据
                        ws.send("pc端请求扫码登录，socketKey：" + userId);
						console.log("数据发送中...");
                    };
                    ws.onmessage = function (evt) {
                        console.log(evt.data);
                    var received_msg = JSON.parse(evt.data);
                    if (received_msg.code == 200) {
                    	alert(received_msg.message);
                    	console.log(evt.data);
                    } else if (received_msg.code == 201) {
                    	console.log(received_msg.message);
                    } else {
                        console.log("socket通道校验");
                    }
 
                    };
                    ws.onclose = function () {
                        // 关闭 websocket
                        console.log("连接已关闭...");
                    };
                } else {
                    // 浏览器不支持 WebSocket
                    console("您的浏览器不支持 WebSocket!");
                }
            }
        }
    })
</script>
</html>

2.修改yml配置文件

spring:
  resources:
    static-locations: classpath:static/

3.本地项目端口改为80，运行项目
在这里插入图片描述
4.访问本地，扫码测试
在这里插入图片描述

线上部署

nginx
在这里插入图片描述

location /prod-api/{
			proxy_pass http://localhost:7002/;
			proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header REMOTE-HOST $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_set_header Upgrade $http_upgrade;
			proxy_set_header Connection "upgrade";
		}

如果是域名是https请求，就一定要将login_vue.html的WebSocket连接改为wss:
在这里插入图片描述
部署后访问测试即可

详细讲解篇

官方文档

先吐槽一下，做过微信对接的人，看微信文档应都是口吐芬芳吧…………………………

获取access_token

https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html

生成带参数的二维码

https://developers.weixin.qq.com/doc/offiaccount/Account_Management/Generating_a_Parametric_QR_Code.html

长链接转短连接

https://developers.weixin.qq.com/doc/offiaccount/Account_Management/URL_Shortener.html

接收事件推送-扫描带参数二维码事件

https://developers.weixin.qq.com/doc/offiaccount/Message_Management/Receiving_event_pushes.html

微信公众平台接口调试工具

http://mp.weixin.qq.com/debug/

微信公众号配置

微信扫码登录有两种方式：
1.微信扫一扫直接登录（这里是通过微信开放平台实现，请看另一篇博文）
2.微信扫一扫关注公众号登录（这里通过微信公众号实现，就是这篇博文的实现方式）

正确配置最终图：

在这里插入图片描述
一步一步操作：
在这里插入图片描述
服务器配置：

  1. 启用
  2. 修改配置
  1. URL：项目的部署地址+controller的token校验方法路由，也就是token校验的完整访问路径
  2. Token：自定义字符，例如mytoken，一定要与项目yml配置保持一致即可
  3. EncodingAESKey：用默认的随机生成即可
  4. 加解密方式：明文（在熟练之后再改为加密吧）

在这里插入图片描述

测试

由于买的域名已被上线项目占用，所以买了内网穿透natapp 官网，可以直接在本地测试

获取二维码：http://你的域名/weChat/getQrCodeUrl

在这里插入图片描述

展示二维码，微信客户端扫一扫，关注公众号微信回调

在这里插入图片描述

至此，微信扫描微信公众号二维码实现登录已全部完成

夕颜以北
关注
专栏目录
实现手机扫描二维码页面登录，类似web微信-第四篇，服务器端
王老狮专栏
12-08 1万+
终于到了服务器端，第三篇的手机客户端如果已经下载了的话，没有服务器是不能正常运行的。 服务器端要做得事很多，虽然逻辑不是很复杂，但是我们必须要分析清楚我们要做哪些事，请看下图： 通过这张图，我们看出，服务器端的接口一共有6个，分别处理： 手机客户端登录首页二维码图片流long polling维持接收手机客户端已扫描的通知接收手机客户端已确认登录的通知 那么一个一个解决
SpringBoot+webSocket实现扫码登录功能
m0_70522111的博客
05-06 279
最近单位又有一个新Java项目。 涉及到扫码登录。之前项目使用的是 ajax轮询的方式。感觉太low了。 所以这次用webSocket的方式进行实现 好。废话不多说！咱们开始！！ 一、首先咱们需要一张表 这表是干啥的呢？ 就是记录一下谁扫码了。谁登录了。 User_Token表 字段如下： uuid : 用于确保唯一性 userId ： 谁登录的 loginTime ： 登录时间 createTime ：创建时间 用于判断是否过期 state： 是否二维码失效  0有效
Java如何同步读取WebSocket 数据
weixin_44270183的博客
02-29 967
背景：在同步的web请求中，读取WebSocket 数据时，等待数据读取，并根据返回的结果，结束当前WebSocket连接。是 Java 中用于线程间通信和同步的工具之一，它允许一个或多个线程等待其他线程完成操作后再继续执行。这样可以确保在主线程中等待，直到所有的数据都被读取完毕，然后再继续执行其他操作。
若依实现微信小程序登录&APP登录(新用户表,新Token认证,与原有后台管理登录隔离)
最新发布
qq_40300227的博客
08-13 2158
若依实现小程序&APP登录，新用户表，新认证流程，与原有后台管理登录认证隔离，代码清晰，流程清晰
基于 springBoot 实现webSocket方式的扫码登录
q826qq1878的博客
06-06 4413
最近单位又有一个新Java项目。 涉及到扫码登录。之前项目使用的是 ajax轮询的方式。感觉太low了。 所以这次用webSocket的方式进行实现 好。废话不多说！咱们开始！！ 一、首先咱们需要一张表 这表是干啥的呢？ 就是记录一下谁扫码了。谁登录了。 User_Token表 字段如下： 1、uuid : 用于确保唯一性 2、userId ： 谁登录的 3、loginTim...
spring boot高性能实现二维码扫码登录(下)——订阅与发布机制版
weixin_34356555的博客
03-26 226
 前言   　　基于之前两篇(《spring boot高性能实现二维码扫码登录(上)——单服务器版》和《spring boot高性能实现二维码扫码登录(中)——Redis版》)的基础，我们使用消息队列的订阅与发布来实现二维码扫码登录的效果。   一、实现原理   1.参考微信的二维码登录机制 首先，请求后端拿到二维码。然后通过http长连接请求后端，并获取登录认证信息。这时，...
Spring Boot + Web Socket 实现扫码登录，这种方式太香了！！
chinaherolts2008的博客
07-09 178
最近单位又vb.net教程有一个新Java项目。 涉及到扫码登录。之前项目c#教程使用的是 ajax轮询的方式。感觉太low了。 所以这次用webSocket的方式进行实现 好。废话不多说！咱们开始！！ 一、首先咱们需要一张表 这表是干啥的呢？就是记录一下谁扫码了。谁登录了。 User_Token表 字段如下： uuid : 用于确保唯一性 userId ：谁登录的 loginTime ：登录时间 createTime ：创建时间 用于判断是否过期 state：是否二维码失效 0
spring boot 实现微信扫码登录
想飞的鱼的博客
05-05 937
spring boot 实现微信扫码登录 微信扫码功能实现基于微信开放平台，但是这个申请账号是需要收费的。我们个人在做项目的过程中可以使用微信测试号来实现扫码登录功能。申请测试号需要去[微信公众平台]: https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login ，微信扫码登录就可以了。 扫码登录成功后，会直接分配一个appId和appsecret,这两个参数就是我们要用的。 首先，需要向微信申请一个用于登录的二维码： @GetMappin
基于java的订餐系统源码-SpringBoot-sell:这是一个用SpringBoot+JPA打造的基于微信服务号平台的点餐系统的后端，前
06-06
这是一个基于微信的点餐系统，所以还涉及许多微信相关的特性，如微信扫码登陆，微信模板消息推送和微信支付和退款。 项目设计 角色划分 买家（手机端）：由微信公众号提供的一个服务 卖家（PC端）：一个简单的商家...
基于websocket实现扫描小程序码登录web页面和微信小程序(双端登录)
it_ape的博客
12-02 2163
SpringBoot+WebSocket+Redis控制二维码失效时间 这里运用了github上基于微信SDK的更易用的SDK weixin-java-miniapp 第一步:导入需要的maven依赖 <!--springboot整合了websocket--> <dependency> <groupId>org.spr...
千锋Java高级教程+分布式+springcloud+微信支付课程
yangshuo0315的博客
12-06 1306
课程目录: ├─千锋Java高级教程-cas单点登录（完结-8集） │ 01单点登录介绍 │ 02cas介绍 │ 03tomcat搭建https │ 04cas server搭建 │ 05Cas 配置 jdbc 连接数据库 │ 06Cas 密码 MD5值 │ 07 Cas 整合shiro1 │ 07 Cas 整合shi...
Shiro + JWT + SpringBoot + MySQL + Redis(Jedis)实现无状态鉴权机制
10-17
Shiro + JWT + SpringBoot + MySQL + Redis(Jedis)实现无状态鉴权机制(Restful风格API)(改为数据库形式(MySQL)) 博客源码 附件
基于SpringBoot的微信订餐系统+源代码+文档说明
11-28
后端为前端提供**restful化**接口，接入微信**SDK**接口，用户通过微信扫码登录下单等，用**redis**存储**token**对用户进行识别与持久化，使用**AOP**技术验证卖家端登录身份信息，**websocket**实现消息推送实时...
SpringBoot搭建WebSocket初始化，实现扫码登录
weixin_47617631的博客
08-03 1620
这样才能自动调用@ServerEndpoint(“/test”)里面的方法。2.实例化ServerEndpointExporter对象，1.java后端的maven添加websocket依赖。3.创建一个类，该类的功能是提供websocket服务。前端测试发起请求连接websocket。创建了一个html,控制台输出结果。
掏出手机，扫一扫，即刻登录——SpringBoot实现二维码扫码登录
Dark_orange的博客
03-20 1352
二维码扫码登录是一种方便快捷的身份认证方式，可以为用户提供更好的登录体验。在SpringBoot中，可以使用QRCodeGenerator类生成二维码图片，使用WebSocket实现扫码登录功能，使用OAuth2RestTemplate实现客户端回调功能。通过以上的介绍，相信读者已经对二维码扫码登录的原理及SpringBoot的实现方式有了一定的了解。
WebSocket 分析与运用：扫码登录
GitChat
04-12 1851
WebSocket 介绍 WebSocket 原理 WebSocket 作用 WebSocket 简易扫码登录功能实现 WebSocket 运用场景
vue websocket 公众号扫描二维码登录PC端
zxo_apple的博客
06-10 890
首先使用的是websocket进行消息的传递，当我们在pc端请求到二维码图片后，打开微信扫一扫，扫描二维码后，就可以在websocket里接收到扫描消息，然后进行自己的业务逻辑处理，具体代码如下： websocketLink方法是在页面一开始就调用的 当用户扫完二维码后，就会进入function函数，user就是获取到到用户信息，需要的话要进行Json.parse(user.body)处理 这里有个巨坑的点是，在使用websocket时，前后端通过nginx代理的，有可能就会出现版本不一致的报错，会造
基于springBoot 实现webSocket方式的扫码登录
公众号-老炮说Java
10-19 238
点击上方蓝色字体，选择“标星公众号”优质文章，第一时间送达关注公众号后台回复pay或mall获取实战项目资料+视频https://blog.csdn.net/q826qq1878/arti...
SpringBoot+webSocket 实现扫码登录功能
民工哥的博客
12-28 711
最近单位又有一个新Java项目。涉及到扫码登录。之前项目使用的是 ajax轮询的方式。感觉太low了。所以这次用webSocket的方式进行实现好。废话不多说！咱们开始！！一、首先咱们需要...
使用springboot+redis实现微信好友添加功能
05-10
实现微信好友添加功能需要使用微信开发者工具和Redis数据库。以下是实现步骤： 1. 创建一个springboot项目，并添加微信开发者工具的依赖。 2. 在微信公众平台上创建一个公众号，并获取到AppID和AppSecret。 3. 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值