企微单点登录

企微官方文档：https://developer.work.weixin.qq.com/document/path/91119

流程参考：https://blog.csdn.net/weixin_40816738/article/details/123155437

单点登录：

src\pages\auth\login\index.jsx：

import React, { useEffect, useCallback } from 'react'
import queryString from 'query-string';
import CircularProgress from '@material-ui/core/CircularProgress'
// import VConsole from 'vconsole';
import api from 'api'
import { Box } from '@mui/material';

// Initialize VConsole
// const vConsole = new VConsole();

const AuthLogin = () => {
  const getAuthLogin = useCallback(() => {
    if (sessionStorage.getItem('oauth_url_processed')) return;
    const { agentId, gotoUrl } = queryString.parse(window.location.search);
    if (!agentId || !gotoUrl) return;
    const oauthCallback = window.location.protocol + "//" + window.location.host + "/wxapp/wecom/callback/index" + "?agentId=" + agentId + "&gotoUrl=" + gotoUrl;

    let params = {
      oauthCallback: oauthCallback,
      // 企业应用ID
      agentId: agentId,
    };
    sessionStorage.setItem('oauth_url_processed', 'true');
    api.wecom.oauthUrl(params).then((res) => {
      // 跳转到微信授权页
      if (res?.code === 200) {
        window.location.href = res.data;
      } else {
        sessionStorage.removeItem('oauth_url_processed');
      }
    }).catch((error) => {
      sessionStorage.removeItem('oauth_url_processed');
    });
  }, []); // Add dependency array to useCallback

  useEffect(() => {
    getAuthLogin();
    
    return () => {
      sessionStorage.removeItem('oauth_url_processed');
    };
  }, [getAuthLogin]);

  return (
    <Box sx={{ display: 'flex', flexDirection:'column', justifyContent: 'center', alignItems: 'center', height: '100%', gap:2 }}>
      <CircularProgress disableShrink size={100} />
      <Box className='title'>正在加载系统资源，请耐心等待.....</Box>
    </Box>
  )
}

export default AuthLogin

 

src\pages\auth\callback\index.jsx：

import React, { useEffect, useCallback } from 'react'
import { useDispatch } from 'react-redux'
import { useNavigate } from 'react-router'
import { setToken, setUserInfo, setUserRoles } from 'store/slices/user'
import queryString from 'query-string';
// import VConsole from 'vconsole';
import api from 'api'
import { Box } from '@mui/material';
import CircularProgress from '@material-ui/core/CircularProgress'

// Initialize VConsole
// const vConsole = new VConsole();

/**
 * Home Page
 */
function AuthCallBackLogin() {
  const dispatch = useDispatch()
  const navigate = useNavigate()
  const getOauthUser = useCallback(() => {
    if (sessionStorage.getItem('oauth_user_processed')) return;
    
    const { agentId, code, gotoUrl } = queryString.parse(window.location.search);
    if (!agentId || !code || !gotoUrl) {
      return;
    }
    let params = {
      code: code,
      agentId: agentId,
      baseUrl: window.location.protocol + "//" + window.location.host,
      gotoUrl: gotoUrl,
    };

    sessionStorage.setItem('oauth_user_processed', 'true');
    api.wecom.oauthUser(params)
      .then((res) => {
        if (res?.code !== 200) {
          sessionStorage.removeItem('oauth_user_processed');
          return;
        }
        const ssoToken = res?.data?.ssoToken;
        if (!!ssoToken) {
          dispatch(setToken({
            access_token: ssoToken,
            exp: 43200
          }));
          return api.user.getUserInfo();
        }
      })
      .then(res => {
        if (res?.code === 200) {
          const { user, roles } = res;
          dispatch(setUserInfo(user));
          dispatch(setUserRoles(roles));
          navigate(gotoUrl);
        }
      })
      .catch(() => {
        sessionStorage.removeItem('oauth_user_processed');
      });
  }, [dispatch, navigate]); // Add dependency array to useCallback

  useEffect(() => {
    getOauthUser();
    
    return () => {
      sessionStorage.removeItem('oauth_user_processed');
    };
  }, [getOauthUser]);

  return (
    <Box sx={{ display: 'flex', flexDirection:'column', justifyContent: 'center', alignItems: 'center', height: '100%', gap:2 }}>
      <CircularProgress disableShrink size={100} />
      <Box className='title'>正在加载系统资源，请耐心等待.....</Box>
    </Box>
  )
}

export default AuthCallBackLogin

至此企微单点登录已完成

 

---

 

如何在企微上调试：参考 https://blog.csdn.net/weixin_40816738/article/details/125015040

1、VScode 下载插件：Go Live

2、启动Go Live

3、命令行输入ipconfig ， 复制IPv4 地址，例如：10.10.111.121

4、在企微的应用程序上设置应用主页，例如：http://10.10.111.121:3000/wxapp/eCar

　　3000是本地项目启动的端口

5、参考 https://blog.csdn.net/weixin_40816738/article/details/125015040 的配置