Java通过webSocket实现微信扫码后通过微信小程序授权登录Web端

已于 2022-06-15 18:08:25 修改
阅读量1.5k 收藏 10
点赞数 2
分类专栏： 开发日志 文章标签： 小程序 websocket 前端 微信 微信小程序
于 2022-06-15 11:37:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43019699/article/details/125274574
版权

 

1.web端向服务器发送请求获取二维码，服务器同时返回webSocket id

参考：JAVA获取小程码_qq_43019699的博客-CSDN博客

注意：本次返回返回的二维码，同时将webSocke ID一同给前端。

    /**
     * 获取二维码
     * @return 二维码字符串
     */
    public Map getQRCode() {
        Map map = new HashMap();
        String webSocketId = String.valueOf(System.currentTimeMillis());
        String accessToken = getCustomerAccessToken();
        String postUrl ="https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token="+accessToken;
        JSONObject jsonObject = new JSONObject();
        jsonObject.put("scene", webSocketId);     //将webSocketId 作为参数传给扫码跳转后页面
        jsonObject.put("page", "pages/weChat_login/weChat_login"); //扫码后跳转页面
        jsonObject.put("check_path", false); //是否检查跳转页面存不存在
        jsonObject.put("env_version", "develop"); //版本
        byte[] string = null;
        try {
            string = sendPostJsonImge(postUrl, jsonObject.toJSONString());
        } catch (IOException e) {
            logger.info(String.valueOf("获取二维码时出现异常"));
        }
        String base64Str = Base64.getEncoder().encodeToString(string);
        map.put("base64Str",base64Str);
        map.put("webSocketId",webSocketId);
        return map;
    }

2.前端接收到WebSocket ID时，开启WebSocket

 web端代码

// 获取二维码
    getSignQRCode() {
      ApiService.get(
        guaranteeLoginApi.getSignQRCode.url,
        {},
        ApiService.createBasicHeaders()
      ).then(response => {
        console.log(response);
        if (response.code === ResponseType.SUCCESS.code) {
          // const buffer = Buffer.from(response.data.base64Str, "base64");
          this.dataBuffer = "data:image/png;base64," + response.data.base64Str;
          this.webSocketId = response.data.webSocketId;
          this.initWebSocket();
        } else {
          this.$message.error(response.msg);
        }
      });
    },
    initWebSocket() {
      const wsurl = process.env.VUE_APP_WEBSOCKET_URL + this.webSocketId;
      this.websock = new WebSocket(wsurl);
      console.log(this.websock);
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onclose = this.websocketclose;
    },
    websocketonopen() {
      console.log("推送服务连接成功");
      // this.websocketsend('连接进行中', 'INITIAL');
    },
    websocketonerror() {
      // 错误
      // info(this, '推送服务连接失败');
      console.log("推送服务连接失败");
    },
    websocketonmessage(evt) {
      // 数据接收
      console.log(evt);
      const msg = eval("(" + evt.data + ")");
      console.log(msg);
      const params = {
        username: msg.unionid,
        password: msg.unionid,
        loginType: "web",
        authType: "4"
      };
      this.Login(params);
    },

3.手机端扫码跳转页面，并且获取到WebSocket ID

微信小程序页面代码

<template>
	<!-- <view class="content" :style="{backgroundImage: `url(${baseImgUrl}/static/img/login_b.png)`}"> -->
		<!-- 标头 -->
		<view class="content_header">
			<view class="avatar">
				<image style="width: 84rpx; height: 84rpx;" src="../../static/img/u192.png"></image>
			</view>
			<text style="font-size: 45rpx; color: #FFFFFF;margin-left: 20rpx;">xx服务平台</text>
		</view>
		<view class="wx_w">
			<view class="wx_w_v">
				<text class="szc-fw-5 szc-fs-30">申请获取以下权限</text>
			</view>
			<view class="wx_w_v">
				<text class="szc-fc-999 szc-fs-28">获取你的公开信息（昵称，头像等）</text>
			</view>
		</view>
		<!-- 微信登陆 -->
		<view class="wx_all">
			<button class="wx_v" @click.stop="$noMultipleClicks(wxLogin)" plain>
				<text class="szc-fs-30 szc-fc-white szc-fw-5">授权登陆</text>
			</button>
		</view>
		<!-- 弹出确认 -->
		<uni-popup ref="popup" type="success" :animation="false" :isMaskClick="false">
			<view class="popup_c">
				<view class="popup_c_t">
					<view class="t-icon-a-16x16_wancheng" style="width: 160rpx;height: 160rpx;"></view>
					<text class="szc-fs-36" style="margin-top: 20px;">授权成功</text>
				</view>
				<view class="popup_btn">
					<navigator open-type="exit" target="miniProgram" style="width: 550rpx;" class="popup_btn2 flex-center">确认</navigator>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { setAccessToken } from '../../service/auth.js'
	import ValidateUtil from '@/public/js/ValidateUtil.js'
	export default {
		data() {
			return {
				noClick: true,
				baseImgUrl: this.BASE_IMG_URL,
				code: '',
				scene: ''
			};
		},
		onLoad (query) {
			// scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene,webS
			this.scene = decodeURIComponent(query.scene);
			this.wxAuthorize();
		},
		methods: {
			// 获取用户信息
			wxAuthorize() {
				var _this = this
				uni.login({
					provider: 'weixin',
					onlyAuthorize: true,
					success(res) {
						if (res.code) {
							_this.code = res.code;
						}
					}
				})
			},
			// 微信登陆
			wxLogin() {
				uni.showLoading({
					title: "授权登录中",
					mask: true
				});
				this.WechatLogin();
			},
			WechatLogin() {
				var _this = this
				uni.getUserProfile({
					desc: '微信登录获取用户数据',
					success: async (obj) => {
						uni.setStorageSync('userInfo', JSON.stringify(obj.userInfo))
						// 调用 action ，请求登录接口
						const url = '/weChatApplet/getWxUserInfo';
						const query = {
							requestCode: _this.code,
							webSocketId: _this.scene
						}
						_this.$ApiService.get(url, query, {}).then(res => {
							if (res.data.code == '0000') {
								uni.hideLoading();
							    this.open();
							} else {
								uni.hideLoading();
								uni.showToast({
									icon: 'none',
									title: res.data.msg
								});
							}
						}).catch(err => {
							uni.hideLoading();
							uni.showToast({
								icon: 'none',
								title: err
							});
						});
					},
					fail: (err) => {
						uni.showToast({
							title: '登录已取消',
							icon: 'error',
							mask: true,
						});
					},
					complete: () => {}
				});
			},
			open() {
				this.$refs.popup.open('success');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-size: 100% 450rpx;
		background-repeat: no-repeat;
	}

	.avatar {
		background-color: #FFFFFF;
		border-radius: 10rpx;
		width: 96rpx;
		height: 96rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.content_header {
		width: 100%;
		height: 38vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.wx_w {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.wx_w_v {
		width: 85%;
		height: 5vh;
	}

	.wx_all {
		width: 100%;
		height: 12vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.wx_v {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80rpx;
		width: 85%;
		background-color: #339800;
		border-width: 0;
		border-radius: 50rpx;
	}
</style>

 4.点击【授权登录】之后调用后台，获取用户信息，再通过webSocket将用户信息发送到web端

 /**
     * 微信扫码获取用户信息
     * @param code
     * @param id
     * @return
     */
    @Override
    public ResponseEntity getWxUserInfo(String code, String id) {
        WxAuthorizeResponse wxWebAuthorizeResponse = null;
        BeanCopyUtils beanCopyUtils = SpringUtil.getBean(BeanCopyUtils.class);
        try {
            //通过 code,appid,appSecret获取 openid 和 unionid
            wxWebAuthorizeResponse = callApiForDecrypt(code,appid,appSecret);
        }catch (Exception e){
            log.error("微信登录凭证校验异常！appId：{}，code:{}", clientAppid, code, e);
            SysExceptionUtil.insert(e);
            throw new SystemServiceException(SystemStatus.CHECK_ERROR_EXCEPTION).reason("存在问题");
        }
        // 根据openid获取数据库中的用户信息
        CustomerUsers customerUsers = customerUsersMapper.findByApOpenId(wxWebAuthorizeResponse.getOpenid());
        if(customerUsers == null){
            throw new SystemServiceException(SystemStatusCode.PARAM_ERROR_EXCEPTION).reason("您尚未绑定微信账号。");
        }
        CustomerUsersRespVo customerUsersRespVo = beanCopyUtils.convertTo(customerUsers, CustomerUsersRespVo.class);
        //向webSocket发送用户信息
        try {
            WebSocketServer webSocketServer = SpringUtil.getBean("webSocketServer", WebSocketServer.class);
            webSocketServer.sendMessage(id, customerUsersRespVo);
        } catch (Exception e) {
            log.error("WebSocket消息提醒异常,消息内容为：{}", customerUsersRespVo, e);
            return ResponseEntity.Failure(BaseStatus.SERVICE_FAILURE, "未拿到webSocket中的uuid");
        }
        return ResponseEntity.Success(null).OK();
    }


import com.alibaba.fastjson.JSON;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.lang3.StringUtils;
import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.ConcurrentHashMap;

/**
 * @description: WebSocketServer
 * @author: 
 * @create: 
 **/

@Slf4j
//@ConditionalOnClass(value = WebSocketConfig.class)
@ServerEndpoint("/ws/{id}")
@Component
public class WebSocketServer {

    /**
     * 客户端ID
     */
    private String id = "";

    /**
     * 与某个客户端的连接会话，需要通过它来给客户端发送数据
     */
    private Session session;

    /**
     * 用来存储当前在线的客户端(此map线程安全)
     */
    private static ConcurrentHashMap<String, WebSocketServer> webSocketMap = new ConcurrentHashMap<>();


    /**
     * 连接建立成功后调用
     */
    @OnOpen
    public void onOpen(@PathParam(value = "id") String id, Session session) {
        this.session = session;
        // 接收到发送消息的客户端编号
        this.id = id;
        // 加入map中
        webSocketMap.put(id, this);
        log.info("用户连接：{}", this.id);

    }

    /**
     * 连接关闭时调用
     */
    @OnClose
    public void onClose() {
        // 从map中删除
        webSocketMap.remove(this);
        log.info("用户退出：{}", this.id);
    }

    /**
     * 收到客户端消息后调用
     *
     * @param message 客户端发送过来的消息<br/>
     *                消息格式：内容 - 表示群发，内容|X - 表示发给id为X的客户端
     * @param session 用户信息
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        log.info("用户消息：{}，报文：{}", this.id, message);
        String[] messages = message.split("[|]");
        try {
            if (messages.length > 1) {
                sendToUser(messages[0], messages[1]);
            } else {
                sendToAll(messages[0]);
            }
        } catch (IOException e) {
            log.error(e.getMessage(), e);
        }
    }

    /**
     * 发生错误时回调
     *
     * @param session 用户信息
     * @param error   错误
     */
    @OnError
    public void onError(Session session, Throwable error) {
        log.error("用户错误：{}，原因：{}", this.id, error.getMessage());
        error.printStackTrace();
    }

    /**
     * 推送信息给指定ID客户端
     *
     * @param message 客户端发来的消息
     * @param id      客户端ID
     */
    public void sendToUser(String message, String id) throws IOException {
        if (StringUtils.isBlank(message)) {
            log.error("发送报文为空！id：{}", id);
            return;
        }
        log.info("发送消息到：{}，报文：{}", id, message);
        if (StringUtils.isNotBlank(id) && webSocketMap.containsKey(id)) {
            webSocketMap.get(id).sendMessage(message);
        } else {
            log.error("用户{}不在线！", id);
        }
    }

    /**
     * 群送发送信息给所有人
     *
     * @param message 要发送的消息
     */
    public void sendToAll(String message) throws IOException {
        if (StringUtils.isBlank(message)) {
            log.error("群发报文为空！");
            return;
        }
        log.info("群发消息到所有客户端，消息：{}", message);
        for (String key : webSocketMap.keySet()) {
            webSocketMap.get(key).sendMessage(message);
        }
    }

    /**
     * 发送消息
     *
     * @param message 要发送的消息
     */
    private void sendMessage(String message) throws IOException {
        this.session.getBasicRemote().sendText(message);
    }


    /**
     * 发送消息 消息内容为json格式
     *
     * @param id
     * @param msgObj
     */
    public void sendMessage(String id, Object msgObj) {
        String message = null;
        if (msgObj instanceof String) {
            message = String.valueOf(msgObj);
        } else {
            message = JSON.toJSONString(msgObj);
        }
        try {
            this.sendToUser(message, id);
        } catch (IOException e) {
            log.error("websocket发送消息失败！id：{}，message：{}", id, message, e);
        }
    }


}

5.最后web前端根据返回的用户信息登录。

搬砖刘
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
微信小程序websocket实现即时聊天功能
10-16
主要为大家详细介绍了微信小程序websocket实现即时聊天功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Java后端实现websocket与微信小程序端连接简单例子
03-29
直接附代码 前端代码： <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>   <!DOCTYPE HTML> <html>   <head>     <base href="<%=basePath%>">  
Java 实现微信扫码登录方法（提供前端及后端核心代码）
gdgztt的专栏
12-26 1523
Java 实现微信扫码登录方法（提供前端及后端核心代码）
webSocket长连接实现微信扫码登录
chenxi004的博客
10-12 2194
我们是要在网页端生成小程序码，用微信扫码，点击登录后。该二维码关闭跳转到指定界面. 那就简单说一下HTTP协议,WebSocket协议. (如果对于这些协议和网络传输过程比较模糊的话,请看下这篇文章 http://blog.csdn.net/gordohu/article/details/54097841 ) 一、websocket与http WebSocket是HTML5出的（协议）可以理解为H...
一招教你搞定微信小程序-登录+支付（后台Java）Demo实战（环境搭建+源码）问题
最新发布
2401_84413490的博客
04-20 659
每年转战互联网行业的人很多，说白了也是冲着高薪去的，不管你是即将步入这个行业还是想转行，学习是必不可少的。作为一个Java开发，学习成了日常生活的一部分，不学习你就会被这个行业淘汰，这也是这个行业残酷的现实。如果你对Java感兴趣，想要转行改变自己，那就要趁着机遇行动起来。或许，这份限量版的Java零基础宝典能够对你有所帮助。《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》
Java微信扫码登录+websocket通知前端
♾️
12-06 3304
1，vue前端登录页面 <script> export default { name: "login", data() { return { path: "ws://passport.shuidizhihui.com/studyassistant/websocket/", socket: "", date:...
详解java实现简单扫码登录功能(模仿微信网页版扫码)
08-26
主要介绍了java实现简单扫码登录功能(模仿微信网页版扫码)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
微信小程序与java实现websocket长连接
油焖茄子 的博客
09-08 1238
WebSocket是一种在单个TCP连接上进行全双工通信的协议。它通过在握手阶段将HTTP升级协议为WebSocket协议来实现。在握手成功后，客户端和服务器端可以互相推送消息，而不需要不断的发起HTTP请求和响应。WebSocket长连接通常用于需要实时推送数据或实时聊天的场景。Java通过Java和微信小程序的结合实现WebSocket长连接，我们可以方便地在应用中实现实时推送和在线聊天等功能，使应用更符合用户的使用习惯，也提高了用户对应用的使用体验。
网站应用前后端分离实现微信扫码登录
俗语的博客
07-17 588
2 前端实现扫码，扫码后微信那边会将code和state（state前端传什么微信那边返回就是什么）拼接到回调地址后。log.error("获取到state===================" + state);log.error("获取到授权码===================" + code);// 启用支持websocket连接，必须设置，主要讲http协议转化为ws协议。-- 添加外置的tomcat依赖 -->
java实现微信小程序扫码登录
Ye__Li的博客
11-28 715
【代码】java实现微信小程序扫码登录。
java与微信小程序实现websocket长连接
08-26
主要为大家详细介绍了java与微信小程序实现websocket长连接，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序通过websocket实时语音识别的实现代码
11-19
之前在研究百度的实时语音识别，并应用到了微信小程序中，写篇文章分享一下。 先看看完成的效果吧 前置条件 申请百度实时语音识别key 百度AI接入指南 创建小程序 设置小程序录音参数 在index.js中输入 const recorderManager = wx.getRecorderManager() const recorderConfig = { duration: 600000, frameSize: 5, //指定当录音大小达到5KB时触发onFrameRecorded format: 'PCM', //文档中没写这个参数也可以触发onFrameRec
用nodejs快速实现微信小程序的websocket服务端
03-29
微信小程序对第三方服务端的网络通信方式支持https和Ｗebsocket。WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。为了解决HTTP协议效率低下的问题，HTML5定义了WebSocket协议，能更好的节省...
微信扫描PC端二维码跳转到小程序确认登录通过WebSocket来获取用户信息达到PC端登录
weixin_42418774的博客
11-21 3815
需求： 在pc端获取后端给的token值来生产二维码（这里后端给了我两个url：一个是二维码url,一个是ws的 url），用微信扫描二维码跳转到小程序写的确定登录页面（进行确定）；然后在PC端使用WebSocket来达到获取用户信息来确认登录并跳转到首页。 最最最开始可以先看一下，一位大佬发给我的原型图解释： 一、首先需要去配置微信公众平台 微信官方文档解释： https://...
微信小程序：web-view中调用JS-SDK实现扫码
奋斗鱼
11-07 4308
关于JS-SDK 微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。 通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。 关于小程序使用JS-SDK 小程序的web-view相关的API调用参考地址：​​​​​​web-view | 微信开放文档 JS-SDK主要是给微信公众号使用的，在小程序的web-view中嵌套的html5页
微信小程序 | 基于小程序+Java+WebSocket实现实时聊天功能
热门推荐
wml_JavaKill的博客
11-11 3万+
此文主要实现在小程序内聊天对话功能，使用Java作为后端语言进行支持，使用Websocket进行即时通讯功能，界面友好，开发简单。
小程序websocket java_微信小程序websocket java获取不到data
weixin_33848693的博客
02-13 440
在使用java作为后台测试微信小程序时，发现：1.后台中ServerHttpRequest request中的session是空的，前端通过wx.connectSocket传递的data也没看到。2.可以从前端网后台传递信息，但是后台往前端发送时会报出如下错误有没有大神能告知下解决方案呢？Java后台实现WebSocket时一共尝试了两种方案，一种是java+spring，一种是纯spring的，...
JAVA微信扫码登录
qq_43088431的博客
11-09 6404
微信扫码登录
微信小程序客户端和服务端实时聊天功能通过websocket实现模板
04-07
客户端： 1. 在小程序页面中引入socket.io-client库，用于与服务端建立websocket连接。 ```javascript import io from '../../utils/socket.io-client'; const socket = io('wss://yourserver.com'); // 建立websocket连接 ``` 2. 在页面加载时，监听socket连接事件，连接成功后发送加入房间的请求。 ```javascript onLoad: function() { socket.on('connect', () => { console.log('连接成功'); socket.emit('join room', { roomId: 'yourRoomId' }); // 发送加入房间请求 }); }, ``` 3. 监听服务端发送的消息，将消息展示在聊天界面中。 ```javascript socket.on('message', (data) => { console.log('收到消息', data); // 将消息展示在聊天界面中 }); ``` 4. 发送消息，将消息通过socket发送给服务端。 ```javascript sendMessage: function() { const message = this.data.inputValue; socket.emit('message', { message }); this.setData({ inputValue: '' }); }, ``` 服务端： 1. 在Node.js中引入socket.io库，创建websocket服务器。 ```javascript const server = require('http').createServer(); const io = require('socket.io')(server, { cors: { origin: '*', }, }); io.on('connection', (socket) => { console.log('有客户端连接', socket.id); // 监听客户端加入房间请求 socket.on('join room', ({ roomId }) => { console.log(`客户端 ${socket.id} 加入房间 ${roomId}`); socket.join(roomId); }); // 监听客户端发送的消息 socket.on('message', ({ message }) => { console.log(`客户端 ${socket.id} 发送消息 ${message}`); io.to('yourRoomId').emit('message', { message }); // 将消息发送给所有房间成员 }); }); server.listen(3000, () => { console.log('websocket服务器启动成功'); }); ``` 2. 监听客户端连接事件，建立连接后处理加入房间请求。 3. 监听客户端发送的消息，将消息发送给房间中的所有成员。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值