微信公众号登录

二维码登录

前端

显示登录

                <div class="chat-not-login-mask" :hidden="isSign">
                  <ElIcon class="icon-lock"><IEpLock /></ElIcon>
                  <a class="login-link" @click="onShowLoginBoxHandler">点我登录</a>之后再发言~
                </div>

isSign是否登录

  <el-input
                  name="input_content"
                  :autosize="{ minRows: 1, maxRows: 4 }"
                  class="msg-input"
                  type="textarea"
                  ref="msg_input_ref"
                  autofocus
                  v-model="inputMsg"
                  :disabled="!isSign || isSending"
                  :placeholder="isSign ? (isSending ? '消息发送中' : '来聊点什么吧~') : ''"
                  @keydown.enter.prevent.exact
                  @keydown.enter.exact="sendMsgHandler"
                  @keydown.shift.enter.exact="onWrap"
                  @keydown.ctrl.enter.exact="onWrap"
                  @keydown.meta.enter.exact="onWrap"
                />

// 显示登录框
const loginStore = useWsLoginStore()
const onShowLoginBoxHandler = () => (loginStore.showLogin = true)

// 是否已登录
const userStore = useUserStore()
const isSign = computed(() => userStore.isSign)
const currentMsgReply = computed(() => (userStore.isSign && chatStore.currentMsgReply) || {})

// 显示登录框
const loginStore = useWsLoginStore()
const onShowLoginBoxHandler = () => (loginStore.showLogin = true)

pinan store使用ws发送请求 获取 二维码

import { ref } from 'vue'
import { defineStore } from 'pinia'

import wsIns from '@/utils/websocket'
import { WsRequestMsgType } from '@/utils/wsType'

export enum LoginStatus {
  Init,
  Waiting,
  Success,
}

export const useWsLoginStore = defineStore('wsLogin', () => {
  const loginQrCode = ref<string>()
  const showLogin = ref(false)
  const loginStatus = ref(LoginStatus.Init)
  function getLoginQrCode() {
    wsIns.send({ type: WsRequestMsgType.RequestLoginQrCode })
  }
  function resetLoginState() {
    loginQrCode.value = undefined
    loginStatus.value = LoginStatus.Init
  }

  return { loginQrCode, loginStatus, showLogin, resetLoginState, getLoginQrCode }
})

子组件监听

  <main class="home">
    <div class="wrapper">
      <ToolBar />
      <SideBar />
      <ChatBox />
    </div>
    <footer class="footer">
      <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">闽ICP备2023004110号</a>
    </footer>

    <LoginBox />
  </main>

websocket消息接收

onMessage = (value: string) => {
    // FIXME 可能需要 try catch,
    const params: { type: WsResponseMessageType; data: unknown } = JSON.parse(value)
    const loginStore = useWsLoginStore()
    const userStore = useUserStore()
    const chatStore = useChatStore()
    const groupStore = useGroupStore()
    switch (params.type) {
      // 获取登录二维码
      case WsResponseMessageType.LoginQrCode: {
        const data = params.data as LoginInitResType
        loginStore.loginQrCode = data.loginUrl
        break
      }
      // 等待授权
      case WsResponseMessageType.WaitingAuthorize: {
        loginStore.loginStatus = LoginStatus.Waiting
        break
      }

后端

netty的websocket监听前端消息

  // 读取客户端发送的请求报文
    @Override
    protected void channelRead0(ChannelHandlerContext ctx, TextWebSocketFrame msg) throws Exception {
        WSBaseReq wsBaseReq = JSONUtil.toBean(msg.text(), WSBaseReq.class);
        WSReqTypeEnum wsReqTypeEnum = WSReqTypeEnum.of(wsBaseReq.getType());
        switch (wsReqTypeEnum) {
            case LOGIN:
                getService().handleLoginReq(ctx.channel());
                log.info("请求二维码 = " + msg.text());
                break;
            case HEARTBEAT:
                break;
            case AUTHORIZE:
                getService().authorize(ctx.channel(), JSONUtil.toBean(wsBaseReq.getData(), WSAuthorize.class));
                log.info("主动认证 = " + msg.text());
                break;
            default:
                log.info("未知类型");
        }
    }

    /**
     * 处理用户登录请求，需要返回一张带code的二维码
     *
     * @param channel
     */
    void handleLoginReq(Channel channel);

    /**
     * 处理用户登录请求，需要返回一张带code的二维码
     *
     * @param channel
     */
    @SneakyThrows
    @Override
    public void handleLoginReq(Channel channel) {
        //生成随机不重复的登录码
        Integer code = generateLoginCode(channel);
        //请求微信接口，获取登录码地址
        WxMpQrCodeTicket wxMpQrCodeTicket = wxMpService.getQrcodeService().qrCodeCreateTmpTicket(code, EXPIRE_SECONDS);
        //返回给前端
        sendMsg(channel, WSAdapter.buildLoginResp(wxMpQrCodeTicket));
    }

这里先生成登陆码

 /**
     * 获取不重复的登录的code，微信要求最大不超过int的存储极限
     * 防止并发，可以给方法加上synchronize，也可以使用cas乐观锁
     *
     * @return
     */
    private Integer generateLoginCode(Channel channel) {
        int code;
        do {
            code = RandomUtil.randomInt(Integer.MAX_VALUE);
        } while (WAIT_LOGIN_MAP.contains(code)
                || Objects.nonNull(WAIT_LOGIN_MAP.putIfAbsent(code, channel)));
        return code;
    }

        //请求微信接口，获取登录码地址
        WxMpQrCodeTicket wxMpQrCodeTicket = wxMpService.getQrcodeService().qrCodeCreateTmpTicket(code, EXPIRE_SECONDS);

    private void sendMsg(Channel channel, WSBaseResp<?> wsBaseResp) {
        channel.writeAndFlush(new TextWebSocketFrame(JSONUtil.toJsonStr(wsBaseResp)));
    }

公众号关注扫码登录

(80条消息) Java实现微信公众号扫码登录_java实现微信扫码登陆_lrurilp的博客-CSDN博客

(80条消息) 微信公众号开发环境搭建的那些事_/wx/portal_爱写Bug的麦洛的博客-CSDN博客

 @GetMapping("/callBack")
    public RedirectView callBack(@RequestParam String code) throws WxErrorException {
        try {
            WxOAuth2AccessToken accessToken = wxService.getOAuth2Service().getAccessToken(code);
            WxOAuth2UserInfo userInfo = wxService.getOAuth2Service().getUserInfo(accessToken, "zh_CN");
            wxMsgService.authorize(userInfo);
        } catch (Exception e) {
            log.error("callBack error", e);
        }
        RedirectView redirectView = new RedirectView();
        redirectView.setUrl("https://mp.weixin.qq.com/s/m1SRsBG96kLJW5mPe4AVGA");
        return redirectView;
    }

获取用户信息

 /**
     * 用户授权
     *
     * @param userInfo
     */
    public void authorize(WxOAuth2UserInfo userInfo) {
        User user = userDao.getByOpenId(userInfo.getOpenid());
        //更新用户信息
        if (StringUtils.isEmpty(user.getName())) {
            fillUserInfo(user.getId(), userInfo);
        }
        //触发用户登录成功操作
        Integer eventKey = OPENID_EVENT_CODE_MAP.get(userInfo.getOpenid());
        login(user.getId(), eventKey);
    }

更新用户信息

    private void fillUserInfo(Long uid, WxOAuth2UserInfo userInfo) {
        User update = UserAdapter.buildAuthorizeUser(uid, userInfo);
        for (int i = 0; i < 5; i++) {
            try {
                userDao.updateById(update);
                return;
            } catch (DuplicateKeyException e) {
                log.info("fill userInfo duplicate uid:{},info:{}", uid, userInfo);
            } catch (Exception e) {
                log.error("fill userInfo fail uid:{},info:{}", uid, userInfo);
            }
            update.setName("名字重置" + RandomUtil.randomInt(100000));
        }
    }

进行登录推送websocket消息

    private void login(Long uid, Integer eventKey) {
        User user = userDao.getById(uid);
        //调用用户登录模块
        String token = loginService.login(uid);
        //推送前端登录成功
        webSocketService.scanLoginSuccess(eventKey, user, token);
    }

获取token

    @Override
    public String login(Long uid) {
        String key = RedisKey.getKey(RedisKey.USER_TOKEN_STRING, uid);
        String token = RedisUtils.getStr(key);
        if (StrUtil.isNotBlank(token)) {
            return token;
        }
        //获取用户token
        token = jwtUtils.createToken(uid);
        RedisUtils.set(key, token, TOKEN_EXPIRE_DAYS, TimeUnit.DAYS);//token过期用redis中心化控制，初期采用5天过期，剩1天自动续期的方案。后续可以用双token实现
        return token;

    /**
     * 扫码用户登录成功通知
     *
     * @param loginCode
     * @param user
     * @param token
     */
    Boolean scanLoginSuccess(Integer loginCode, User user, String token);

    @Override
    public Boolean scanLoginSuccess(Integer loginCode, User user, String token) {
        //发送消息
        Channel channel = WAIT_LOGIN_MAP.get(loginCode);
        if (Objects.isNull(channel)) {
            return Boolean.FALSE;
        }
        //移除code
        WAIT_LOGIN_MAP.remove(loginCode);
        //用户登录
        loginSuccess(channel, user, token);
        return true;
    }

    /**
     * 登录成功，并更新状态
     */
    private void loginSuccess(Channel channel, User user, String token) {
        //更新上线列表
        online(channel, user.getId());
        //返回给用户登录成功
        boolean hasPower = iRoleService.hasPower(user.getId(), RoleEnum.CHAT_MANAGER);
        sendMsg(channel, WSAdapter.buildLoginSuccessResp(user, token, hasPower));
        //发送用户上线事件
        boolean online = userCache.isOnline(user.getId());
        if (!online) {
            user.setLastOptTime(new Date());
            user.refreshIp(NettyUtil.getAttr(channel, NettyUtil.IP));
            applicationEventPublisher.publishEvent(new UserOnlineEvent(this, user));
        }
    }

    /**
     * 用户上线
     */
    private void online(Channel channel, Long uid) {
        getOrInitChannelExt(channel).setUid(uid);
        ONLINE_UID_MAP.putIfAbsent(uid, new CopyOnWriteArrayList<>());
        ONLINE_UID_MAP.get(uid).add(channel);
    }

判断权限

    @Override
    public boolean hasPower(Long uid, RoleEnum roleEnum) {//超级管理员无敌的好吧，后期做成权限=》资源模式
        Set<Long> roleSet = userCache.getRoleSet(uid);
        return isAdmin(roleSet) || roleSet.contains(roleEnum.getId());
    }

redis找uid

    public boolean isOnline(Long uid) {
        String onlineKey = RedisKey.getKey(RedisKey.ONLINE_UID_ZET);
        return RedisUtils.zIsMember(onlineKey, uid);
    }

applicationEventPublisher.publishEvent(new UserOnlineEvent(this, user));

@Getter
public class UserOnlineEvent extends ApplicationEvent {
    private final User user;

    public UserOnlineEvent(Object source, User user) {
        super(source);
        this.user = user;
    }
}

这行代码使用 Spring 的 ApplicationEventPublisher 发布了一个 UserOnlineEvent 事件。Spring 的事件机制允许一个 bean 发布事件,并让其他 bean 在事件发生时执行某些逻辑。这实现了 bean 之间的松散耦合,是 Spring 异步通信的一种方式。具体来说,这行代码:- 获取 ApplicationEventPublisher 的实例。这个通常通过 @Autowired 注入。
- 创建一个 UserOnlineEvent 事件实例,构造函数传入 this 和 user 对象。
- 调用 publishEvent() 方法发布该事件。然后,其他 bean 可以通过以下方式监听这个事件:1. 实现 ApplicationListener 接口,并指定事件类型:

用户监听推送上线消息

    @EventListener(classes = UserOnlineEvent.class)
    public void saveRedisAndPush(UserOnlineEvent event) {
        User user = event.getUser();
        userCache.online(user.getId(), user.getLastOptTime());
        //推送给所有在线用户，该用户登录成功
        webSocketService.sendToAllOnline(wsAdapter.buildOnlineNotifyResp(event.getUser()));
    }

前端websocket监听消息

      // 登录成功
      case WsResponseMessageType.LoginSuccess: {
        userStore.isSign = true
        const { token, ...rest } = params.data as LoginSuccessResType
        // FIXME 可以不需要赋值了，单独请求了接口。
        userStore.userInfo = { ...userStore.userInfo, ...rest }
        localStorage.setItem('USER_INFO', JSON.stringify(rest))
        localStorage.setItem('TOKEN', token)
        loginStore.loginStatus = LoginStatus.Success
        // 关闭登录弹窗
        loginStore.showLogin = false
        // 清空登录二维码
        loginStore.loginQrCode = undefined
        // 自己更新自己上线
        groupStore.batchUpdateUserStatus([
          {
            activeStatus: OnlineStatus.Online,
            avatar: rest.avatar,
            lastOptTime: Date.now(),
            name: rest.name,
            uid: rest.uid,
          },
        ])

store更新用户状态

  // 更新用户在线状态
  const batchUpdateUserStatus = (items: UserItem[]) => {
    const tempNew = cloneDeep(userList.value)
    for (let index = 0, len = items.length; index < len; index++) {
      const curUser = items[index]
      const findIndex = tempNew.findIndex((item) => item.uid === curUser.uid)
      findIndex > -1 && (tempNew[findIndex].activeStatus = curUser.activeStatus)
    }
    tempNew.sort(sorAction)
    userList.value = tempNew
  }

跳过登录

            case LOGIN_JUMP:
                getService().login_jump(ctx.channel());
                log.info("跳过登录 = " + msg.text());
                break;

    @Override
    public void login_jump(Channel channel) {
        User user = userDao.getById(1);
        String token = loginService.login(1L);
        //推送前端登录成功
        scanLoginSuccessTest(channel, user, token);

    }

    @Override
    public Boolean scanLoginSuccessTest(Channel channel, User user, String token) {

        Integer code = generateLoginCode(channel);
        //发送消息
        channel = WAIT_LOGIN_MAP.get(code);
        if (Objects.isNull(channel)) {
            return Boolean.FALSE;
        }
        //移除code
        WAIT_LOGIN_MAP.remove(code);
        //用户登录
        loginSuccess(channel, user, token);
        return true;
    }

const sendLoginJump = (e: Event) => {
  wsIns.send({ type: WsRequestMsgType.LoginJump })
}

参考项目地址MallChat