企微单点登录
企微官方文档: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 的配置
记录自己的采坑之路,需要时方便查找