@foundbyte/auto-auth
多标签页通信,fingerprint 生成客户端指纹,通过 webSoket 通信,实现跨域名消息传递!
编译
$ npm run build
测试服务
命令窗口不能关闭
$ pnpm run server
前端
注意:必须先编译
# 可执行多次开启多个标签
$ pnpm start
点击 链接 -> 授权请求 即可向其他标签发起通信
使用
hooks
import { useAutoAuth, IAuth } from '@foundbyte/town-revitalize';
/** 一般放在应用入口 */
export default function Layout() {
const [{ userInfo }, setUserInfo] = useUserTracked();
/** 收到自动授权请求 */
const onAuth = async (value: IAuth) => {
/** 判断当前平台是否登陆... 此处省略一万字 */
console.info('收到授权请求:', JSON.stringify(value))
const { appKey, endpoint } = value
/** 兑换ticket... 此处省略一万字 */
return { ticket: '' } as IAuthData
}
/** 自动授权返回结果 */
const onAuthRes = (value?: IAuthData) => {
if (value?.ticket) {
console.info('辅助授权结果:', JSON.stringify(value))
}
}
/** 使用hooks */
const auth = useAutoAuth({ ...SOCKET_CONFIG, onAuth, onAuthRes })
useLayoutEffect(() => {
if (auth) {
/** 未登陆发起登陆申请 */
auth.onSendAuth();
}
}, [auth]);
return <></>;
}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script type="text/javascript" src="./umd/auto-auth.min.js"></script>
<script>
initAutoAuth({
url:
/** local */
'ws://127.0.0.1:2048/autoLogin/webSocket',
/** test */
// 'wss://rural-revitalization-websocket.gcongo.com.cn/autoLogin/webSocket',
appKey: 'appKey',
endpoint: 'endpoint',
/** 调试模式,关闭则可显示正常页面,否则显示调试按钮 */
test: true,
onAuth: async (value) => {
console.info('收到授权请求:', JSON.stringify(value));
return { ticket: '' };
},
onAuthRes: (value) => {
console.info('返回授权请求:', JSON.stringify(value));
},
}).then((auth) => {
/** 调试模式下无效,需点击按钮触发 */
auth.onSendAuth();
});
</script>
</body>
</html>