基于websocket实现扫描小程序码登录web页面和微信小程序(双端登录)_小程序扫码登陆源码

SpringBoot+WebSocket+Redis控制二维码失效时间

类似于腾讯文档网页版扫描小程序码登录的模式

腾讯文档采用的是轮询的方式,我在这里采用websocket的方式.
这里运用了github上基于微信SDK的更易用的SDK weixin-java-miniapp

第一步:导入需要的maven依赖

     <!--springboot整合了websocket-->
	   <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>
        <dependency>
            <groupId>com.github.binarywang</groupId>
            <artifactId>weixin-java-miniapp</artifactId>
            <version>3.3.0</version>
        </dependency>
1
2
3
4
5
6
7
8
9
10

第二步:配置websocket

@Configuration
public class WebSocketConfig {
   
    @Bean
    public ServerEndpointExporter serverEndpointExporter(){
   
        return new ServerEndpointExporter();
    }
}
1
2
3
4
5
6
7
8
9

这里的socketKey对应@PathParam定义的名字,用来识别唯一的socket连接

@Component
@ServerEndpoint(value = "/socketLogin/{socketKey}")
public class LoginSocket {
   

    private static Logger log= LoggerFactory.getLogger(LoginSocket.class);

    private static ConcurrentHashMap<String, Session> sessionMap = new ConcurrentHashMap<>();

    private Session session;

    /**
     * 连接建立成功调用的方法*/
    @OnOpen
    public void onOpen(Session session, @PathParam("socketKey")String socketKey) {
   
        this.session=session;
        log.info("[微信小程序websocket]socketKey:{}",socketKey +"-->建立连接");
        sessionMap.put(socketKey,session);
    }
    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose(@PathParam("socketKey") String socketKey) {
   
        log.info("[微信小程序websocket]socketKey:{}",socketKey +"-->断开连接");
        sessionMap.remove(socketKey);
    }

    public ConcurrentHashMap<String, Session> getSessionMap() {
   

        return sessionMap;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

第三步:完成socket配置后,正式开始微信小程序开发

开发之前需要准备好申请的小程序APPID SECRET
编写工具类(整合weixin-java-miniapp),这个工具类根据自身需求,灵活设置WxMaInMemoryConfig里面的内容

@Configuration
public class WxMaConfiguration {
   
    private static String appId;

    private static String secret;

    @Value("${weixin.applet_appid}")
    public void setAppId(String appId) {
   
        WxMaConfiguration.appId = appId;
    }

    @Value("${weixin.applet_secret}")
    public void setSecret(String secret) {
   
        WxMaConfiguration.secret = secret;
    }

    private static WxMaService wxMaService=null;

    @Bean
    public Object services(){
   
        WxMaInMemoryConfig config = new WxMaInMemoryConfig();
        config.setAppid(appId);
        config.setSecret(secret);
        wxMaService = new WxMaServiceImpl();
        wxMaService.setWxMaConfig(config);
        return Boolean.TRUE;
    }
    public static WxMaService getWxMaService(){
   
        return wxMaService;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

第四步:网页端获取小程序二维码接口

建议小程序二维码里面的scene参数和建立websocket连接的key保持一致
pathStr:小程序登录成功后微信小程序的跳转地址,而不是网页的跳转地址.如:pages/index/index
注意此处:3.3.0之前版本的 weixin-java-miniapp无法通过createWxaCodeUnlimitBytes返回byte字节,返回的都是File文件

 /**
     * 
1