react 浙政钉对接

614 阅读1分钟

浙政钉环境免登

import dd from 'gdt-jsapi'; // 浙政钉相关的第三方包

// 判断是否为浙政钉环境
const isZZDing = () => {
  return JSON.stringify(navigator.userAgent).includes('TaurusApp');
};

// 获取浙政钉Authcode
const getAuthCode = () => {
  dd.getAuthCode({})
    .then((res) => {
      if (!res?.auth_code) return;
				// 将获取到的AuthCode传递给后端
        getTokenData({ zzdAuthCode: res?.auth_code });
    })
    .catch((error) => {
      console.log(error);
    });
};

浏览器浙政钉扫码登录

const href ='https://login-pro.ding.zj.gov.cn/qrlogin/webAppLogin.htm?test'; // 申请的浙政钉地址

const testComponents = () =>{
	// 监听扫码
	const eventListener = (event: {
		data: { code: React.SetStateAction<string> };
	}) => {
		if (typeof event?.data !== 'object') return;

		if (!event?.data?.code) return;

		getTokenData({ zzdQrCode: event?.data?.code }, getTokenByCode);
	};

	useEffect (() => {
		window.addEventListener('message', eventListener);
	}, [])    


	return (               
		<div className="login-scan-content-box">
			<iframe
				frameBorder="0"
				scrolling="no"
				title="login"
				src={href}
				className="iframe"
				style={{ position: 'absolute', top: '-95px' }}
			/>
		</div>
	)
	}

// 调整二维码位置tip
将父元素设置为 overflow: hidden;
截去内部iframe中的无关内容只展示二维码

.login-scan-content-box {
        width: 360px;
        height: 420px;
        overflow: hidden;

        iframe {
          width: 100%;
          height: 530px;
        }
      }