关于typescript:使用springbootangular实现web端微信扫码登陆

39次阅读

共计 5615 个字符，预计需要花费 15 分钟才能阅读完成。

概述

当初微信的应用用户越来越多，如果网站增加上微信登录，就能节俭很多用户注册工夫，极大放大了注册流程。会让用户感觉特地不便。接下来咱们就说一下怎么来实现 Web 端微信扫码登录。

筹备工作

1. 实现内网穿透，举荐工具：飞鸽，疾速跳转
2. 申请微信公众平台测试账号并进行配置，点击查看更多

Websocket

实时通信

咱们通常有三种办法实现实时通信:
1.ajax 轮询
ajax 轮询的原理非常简单, 让浏览器每隔几秒就像服务器发送一个申请, 询问服务器是否有新的信息.
2.http 长轮询
长轮询的机制和 ajax 轮询差不多, 都是采纳轮询的形式, 不过过来的是阻塞模型 (始终打电话, 没收到就不挂电话), 也就是说, 客户端发动链接后, 如果没有音讯, 就始终不返回response 给客户端. 晓得有新的音讯才返回, 返回完之后, 客户端再此建设连贯, 周而复始.
3.WebSocket
WebSocket是 HTML5 开始提供的一种在单个 TCP 连贯上进行全双工通信的协定. 在 WebSocket API 中，浏览器和服务器只须要做一个握手的动作，而后，浏览器和服务器之间就造成了一条快速通道。两者之间就间接能够数据相互传送, 不须要繁琐的询问和期待.

比照：ajax 轮询和长轮询都是十分消耗资源的, 而 WebSocket, 只须要通过一次 HTTP 申请, 就能够与服务端进行源源不断的音讯收发了.

实现过程

sockjs

SockJS是一个浏览器的 JavaScript 库, 它提供了一个相似于网络的对象,SockJS提供了一个连贯的, 跨浏览器的 JavaScriptAPI, 它在浏览器和 Web 服务器之间创立了一个低提早, 全双工, 跨域通信通道. SockJS 提供了浏览器兼容性, 优先应用原生的WebSocket, 如果某个浏览器不反对WebSocket,SockJS 会主动降级为轮询.

STOMP

STOMP(Simple Text-Orientated Messaging Protocol) 面向音讯的简略文本协定: WebSocket是一个音讯架构, 不强制应用任何特定的音讯协定, 它依赖于应用层解释音讯的含意. 与 HTTP 不同,WebSocket是在传输层上进行数据实现和解决的, 会将字节流转化为文本 / 二进制音讯, 因而, 对于理论利用来说,WebSocket 的通信模式层级过低，因而，能够在 WebSocket 之上应用 STOMP 协定，来为浏览器 和 server 间的 通信减少适当的音讯语义。

STOMP 与 WebSocket 的关系:

1.HTTP协定解决了 web 浏览器发动申请以及 web 服务器响应申请的细节, 假如 HTTP 协定不存在, 只能应用 TCP 套接字来编写 web 利用.
2. 间接应用 WebSocket(SockJS) 就很相似于应用 TCP 套接字来编写 web 利用, 因为没有高层协定, 就须要咱们定义利用间发送音讯的语义, 还须要确保连贯的两端都能遵循这些语义.
3. 同 HTTP 在TCP套接字上增加申请 - 响应模型层一样,STOMP在 WebSocket 之上提供了一个基于帧的线路格局层, 用来定义音讯语义.

实战

微信扫码登陆过程：

1. 实现前后台 WebSocket 连贯：

前台首先装置sockjs-client 和 stompjs:

npm install sockjs-client
npm install stompjs

前台建设 websocket 连贯简略示例:

        const socket = new SockJS('http://localhost:8080/demo-stomp-endpoint');
        const stompClient = Stomp.over(socket);
        stompClient.connect({'ws-auth-token': this.uuid}, (frame: any) => {
          // 增加个 uuid, 用于后续进行 debug，看是否为单例.
          stompClient.id = uuid();
          this.stompClientSubject.next(stompClient);
        });

前台注册路由，充当后盾被动拜访的接口：

/**
   * 注册路由
   * @param router 路由
   * @param subject 后盾回发 webSocket 时发送数据流
   */
  register<T>(router: string, subject: Subject<T>): void {if (this.observables[router]) {throw new Error('未可能反复注册关键字' + router);
    }
    console.log('register');
    this.stompClient$.pipe(filter(v => v !== null), first()).subscribe(stompClient => {stompClient.subscribe(this.getUrl(router), (data: any) => {console.log(data);
        subject.next(data);
      });
    });
  }

2. 后盾引入相干依赖：

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>

后盾定义与前台连接点：

  /**
   * 定义一个连接点(解决第一次 webSocket 的握手)
   */
  @Override
  public void registerStompEndpoints(StompEndpointRegistry registry) {registry.addEndpoint("/demo-stomp-endpoint")
        .setAllowedOriginPatterns("http://localhost:4200")
        .withSockJS();}

后盾定义进口前缀和入口前缀：

/**
   * 配置音讯经纪人
   * 配置一个入口前缀，一个进口前缀。* 留神：进口须要保留 /user 前缀，stomp 被动向某个用户发送数据时，将以 /user 前缀前头（可配置）*/
  @Override
  public void configureMessageBroker(MessageBrokerRegistry config) {
    // 设置入口前缀，解决所有以 app 打头的申请
    config.setApplicationDestinationPrefixes("/app");
    // 设置进口前缀，解决所有以 /stomp 打头的进口数据
    config.enableSimpleBroker("/stomp");
  }

后盾引入公众号的相干依赖：

<dependency>
            <groupId>com.github.binarywang</groupId>
            <artifactId>weixin-java-mp</artifactId>
            <version>4.4.0</version>
</dependency>
<dependency>
            <groupId>com.github.binarywang</groupId>
            <artifactId>wx-java-mp-spring-boot-starter</artifactId>
            <version>4.4.0</version>
</dependency>

逻辑实现

1. 首先在关上页面时，进行路由注册，便于后盾被动向前台发动申请

// 注册前台扫码绑定的路由，扫码绑定后，后盾被动发动申请
 this.websocketServer.register('/user/stomp/scanBindUserQrCode', this.onScanBindUserQrCode);
// 注册前台扫码登陆的路由，扫码登陆后，后盾被动发动申请
 this.websocketServer.register('/user/stomp/scanLoginQrCode', this.onScanLoginQrCode);

随后前台发动获取登陆二维码申请，同时传输惟一标识码，用于扫码胜利后后盾被动发动登陆胜利申请给前台：

/**
   * 获取登录二维码
   */
  getLoginQrCode(): Observable<string> {return this.httpClient.get<string>(`${this.baseUrl}/getLoginQrCode/${this.websocketServer.uuid}`);
  }

2. 后盾响应获取登陆二维码同时对扫码事件进行解决，:

@Override
  public String getLoginQrCode(String wsLoginToken, HttpSession httpSession) {
    try {if (this.logger.isDebugEnabled()) {this.logger.info("1. 生成用于回调的 uuid，请将推送给微信，微信当推送带有 UUID 的二维码，用户扫码后微信则会把带有 uuid 的信息回推过来");
      }
      // qrUuid 用于换取微信跳转的 ticket，以依据 ticket 换取二维码 url
      String qrUuid = UUID.randomUUID().toString();
      WxMpQrCodeTicket wxMpQrCodeTicket = this.weChatMpService.getQrcodeService().qrCodeCreateTmpTicket(qrUuid, 10 * 60);
      // 减少事务处理，对扫描事件等解决进行解决
      this.weChatMpService.addHandler(qrUuid, new WeChatMpEventKeyHandler() {long beginTime = System.currentTimeMillis();
        private Logger logger = LoggerFactory.getLogger(this.getClass());

        @Override
        public boolean getExpired() {return System.currentTimeMillis() - beginTime > 10 * 60 * 1000;
        }

        /**
         * 扫码后调用该办法
         * @param wxMpXmlMessage 扫码音讯
         * @param weChatUser 扫码用户
         * @return 输入音讯
         */
        @Override
        public WxMpXmlOutMessage handle(WxMpXmlMessage wxMpXmlMessage, WeChatUser weChatUser) {if (this.logger.isDebugEnabled()) {this.logger.info("2. 用户扫描后触发该办法, 发送扫码胜利的同时，将 wsUuid 与微信用户绑定在一起，用前面应用 wsU");
          }
          String openid = wxMpXmlMessage.getFromUser();
          if (openid == null) {this.logger.error("openid is null");
          }
          if (weChatUser.getUser() != null) {
            // 此处的随机生成的 uuid 与用户绑定，并将其返回给前台，用 uuid 再次登陆
            String uuid = UUID.randomUUID().toString();
            System.out.println("uuid 是" + uuid);
            bindWsUuidToWeChatUser(uuid, weChatUser);
           // 此处的 wx-auth-token 是前台生成的 uuid，用于标识惟一前台 
            simpMessagingTemplate.convertAndSendToUser(wsLoginToken,
                    "/stomp/scanLoginQrCode",
                    uuid);
            return new TextBuilder().build(String.format("登录胜利，登录的用户为：%s", weChatUser.getUser().getName()),
                    wxMpXmlMessage,
                    null);
          } else {
            // 扫码后发现没有绑定，返回给前台空 uuid，同时返回给微信用户未绑定提醒
            // 此处的 wx-auth-token 是前台生成的 uuid，用于标识惟一前台
            simpMessagingTemplate.convertAndSendToUser(wx-auth-token,
                    "/stomp/scanLoginQrCode",
                    false);
            return new TextBuilder().build(String.format("登录准则，起因：您尚未绑定微信用户"),
                    wxMpXmlMessage,
                    null);
          }
        }
      });
      return this.weChatMpService.getQrcodeService().qrCodePictureUrl(wxMpQrCodeTicket.getTicket());
    } catch (Exception e) {this.logger.error("获取长期公众号图片时产生谬误：" + e.getMessage());
    }
    return "";
  }

3. 前台接管到 uuid 后，应用 uuid 作为用户名和明码进行失常登陆：

this.login({username: uuid, password: uuid});

4. 后盾在登陆验证形式中减少依据 uuid 进行验证：

/**
   * 校验微信扫码登录后的认证 ID 是否无效
   * @param wsAuthUuid websocket 认证 ID
   */
  @Override
  public boolean checkWeChatLoginUuidIsValid(String wsAuthUuid) {return this.map.containsKey(wsAuthUuid);
  }

实现逻辑图如下：

最初是 demo 的仓库地址，请点击

正文完
typescript
发表至： typescript
2023-02-11
 0
关于typescript:真正类型安全的-Web-Apps
关于typescript:Nestjs最佳实践教程4排序分页与过滤
关于typescript:TypeScript-Basic-Part-I
关于typescript:为什么你永远不应该在CSS中使用px来设置字体大小