message-verify 0.0.46-beta.0 → 0.0.48-beta.0

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export declare const getFingerprint: () => Promise<string>;
 export type ModalConfig = {
     data: string;
     onClose?: () => void;

package/dist/index.js

@@ -1,6 +1,20 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import ReactDOM from 'react-dom/client';
 import VerifyModal from './verify-modal.js';
+import Fingerprint2 from 'fingerprintjs2';
+export const getFingerprint = () => {
+    return new Promise((resolve) => {
+        Fingerprint2.get(function (components) {
+            const includeKeys = ['userAgent', 'deviceMemory', 'cpuClass', 'hardwareConcurrency', 'platform'];
+            const values = components
+                .filter(component => includeKeys.includes(component.key))
+                .map(component => component.value)
+                .join('###');
+            const fingerprint = Fingerprint2.x64hash128(values, 31);
+            resolve(fingerprint);
+        });
+    });
+};
 let modalRoot = null;
 export const createMessageVerifyModal = (modalProps) => {
     const container = document.createElement('div');

package/dist/verify-modal.js

@@ -37,9 +37,6 @@ const CreateMessageVerifyModal = ({ props }) => {
                 clearInterval(timer);
         };
     }, [visible, countdown]);
-    // useEffect(() => {
-    //     console.log('mobile', mobile);
-    // }, [mobile])
     const handleResend = async () => {
         setCountdown(60);
         const res = await Api.reSendCode({ captchaKey, captcha: captchCode });
@@ -57,7 +54,7 @@ const CreateMessageVerifyModal = ({ props }) => {
                                 http(config);
                                 setVisible(false);
                             }
-                        } }), _jsx(Button, { disabled: countdown > 0 || !captchCode, onClick: handleResend, style: { padding: '10px' }, children: countdown > 0 ? t('countDownSecound', lang, { countdown }) : t('reSend', lang) })] }), countdown > 0 ? null :
+                        } }), _jsx(Button, { disabled: countdown > 0 || !captchCode, onClick: handleResend, style: { padding: '8px' }, children: countdown > 0 ? t('countDownSecound', lang, { countdown }) : t('reSend', lang) })] }), countdown > 0 ? null :
                 _jsxs("div", { style: { marginTop: 12, display: 'flex', alignItems: 'center' }, children: [_jsx(Input, { placeholder: t('pleaseEnterPicVerifyCode', lang), onChange: (e) => {
                                 setCaptchCode(e);
                             }, style: { width: 300 } }), captchaImage && _jsx("img", { src: captchaImage, alt: t('verifyCode', lang), style: { width: 100, height: 30, marginLeft: 8 }, onClick: getKey })] }), (countdown > 0 || captchCode) ? null : _jsx("div", { style: { fontSize: 14, color: 'red' }, children: t('pleaseEnterAndSend', lang) })] }));

package/package.json

@@ -1,15 +1,17 @@
 {
   "name": "message-verify",
-  "version": "0.0.46-beta.0",
+  "version": "0.0.48-beta.0",
   "type": "module",
   "main": "dist/index.js",
   "dependencies": {
     "@yqg/resource": "^1.3.8",
+    "fingerprintjs2": "^2.1.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.22.0",
+    "@types/fingerprintjs2": "^2.0.0",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
     "@vitejs/plugin-react": "^4.3.4",

package/src/index.tsx

@@ -1,5 +1,20 @@
 import ReactDOM from 'react-dom/client'
 import VerifyModal from './verify-modal.js'
+import Fingerprint2 from 'fingerprintjs2';
+
+export const getFingerprint = (): Promise<string> => {
+    return new Promise((resolve) => {
+        Fingerprint2.get(function (components) {
+            const includeKeys = ['userAgent', 'deviceMemory', 'cpuClass', 'hardwareConcurrency', 'platform'];
+            const values = components
+                .filter(component => includeKeys.includes(component.key))
+                .map(component => component.value)
+                .join('###');
+            const fingerprint = Fingerprint2.x64hash128(values, 31);
+            resolve(fingerprint);
+        });
+    });
+};
 
 export type ModalConfig = {
     data: string;

package/src/verify-modal.tsx

@@ -20,6 +20,7 @@ type ModalConfig = {
     };
 }
 const CreateMessageVerifyModal = ({ props }: { props: ModalConfig }) => {
+
     const [visible, setVisible] = useState(true);
     const [countdown, setCountdown] = useState(3);
     const [otp, setOtp] = useState('');
@@ -34,7 +35,7 @@ const CreateMessageVerifyModal = ({ props }: { props: ModalConfig }) => {
         const res = await Api.getCaptchaKey();
         const { body: key } = res.data || {};
         setCaptchaKey(key);
-        if(key) {
+        if (key) {
             const image = Api.getCaptchaImgUrl(key) as unknown;
             setCaptchaImage(image as string);
         }
@@ -55,64 +56,60 @@ const CreateMessageVerifyModal = ({ props }: { props: ModalConfig }) => {
         };
     }, [visible, countdown]);
 
-    // useEffect(() => {
-    //     console.log('mobile', mobile);
-    // }, [mobile])
-
-    const handleResend = async() => {
+    const handleResend = async () => {
         setCountdown(60);
-        const res = await Api.reSendCode({captchaKey, captcha: captchCode});
+        const res = await Api.reSendCode({ captchaKey, captcha: captchCode });
         console.log('handleResend=>res', res);
         message.success(t('sendSuccess', lang));
     }
-  
+
     return (
-      <Modal
-        width={420}
-        visible={visible}
-        onClose={() => {
-          setVisible(false);
-          props.onClose?.();
-        }}
-      >
-        <div style={{ fontSize: 14, color: '#666' }}>{t('alreadySend', lang, {  phone: mobile})}</div>
-        
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 12 }}>
-            <Input.OTP 
-                length={6} 
-                value={otp}
-                onChange={(val) => {
-                    setOtp(val);
-                    if(val.length === 6) {
-                        http.defaults.headers.common['sms-code'] = val as string;
-                        http.defaults.headers.common['sms-code-key'] = verifyCodeKey as string;
-                        http(config);
-                        setVisible(false);
-                    }
-                }} />
-            <Button
-                disabled={countdown > 0 || !captchCode}
-                onClick={handleResend}
-                style={{ padding: '10px' }}
-            >
-                {countdown > 0 ? t('countDownSecound', lang, { countdown }) : t('reSend', lang)}
-            </Button>
-        </div>
-        {countdown > 0 ? null : 
-            <div style={{ marginTop: 12, display: 'flex', alignItems: 'center' }}>
-                <Input 
-                    placeholder={t('pleaseEnterPicVerifyCode', lang)}
-                    onChange={(e) => {
-                        setCaptchCode(e as string)
-                    }}
-                    style={{ width: 300 }}
-                />
-                
-                {captchaImage && <img src={captchaImage} alt={t('verifyCode', lang)} style={{ width: 100, height: 30, marginLeft: 8 }} onClick={getKey} />}
-            </div>}
-        {(countdown > 0 || captchCode) ? null : <div style={{ fontSize: 14, color: 'red' }}>{t('pleaseEnterAndSend', lang)}</div>}
-      </Modal>
+        <Modal
+            width={420}
+            visible={visible}
+            onClose={() => {
+                setVisible(false);
+                props.onClose?.();
+            }}
+        >
+            <div style={{ fontSize: 14, color: '#666' }}>{t('alreadySend', lang, { phone: mobile })}</div>
+
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 12 }}>
+                <Input.OTP
+                    length={6}
+                    value={otp}
+                    onChange={(val) => {
+                        setOtp(val);
+                        if (val.length === 6) {
+                            http.defaults.headers.common['sms-code'] = val as string;
+                            http.defaults.headers.common['sms-code-key'] = verifyCodeKey as string;
+                            http(config);
+                            setVisible(false);
+                        }
+                    }} />
+                <Button
+                    disabled={countdown > 0 || !captchCode}
+                    onClick={handleResend}
+                    style={{ padding: '8px' }}
+                >
+                    {countdown > 0 ? t('countDownSecound', lang, { countdown }) : t('reSend', lang)}
+                </Button>
+            </div>
+            {countdown > 0 ? null :
+                <div style={{ marginTop: 12, display: 'flex', alignItems: 'center' }}>
+                    <Input
+                        placeholder={t('pleaseEnterPicVerifyCode', lang)}
+                        onChange={(e) => {
+                            setCaptchCode(e as string)
+                        }}
+                        style={{ width: 300 }}
+                    />
+
+                    {captchaImage && <img src={captchaImage} alt={t('verifyCode', lang)} style={{ width: 100, height: 30, marginLeft: 8 }} onClick={getKey} />}
+                </div>}
+            {(countdown > 0 || captchCode) ? null : <div style={{ fontSize: 14, color: 'red' }}>{t('pleaseEnterAndSend', lang)}</div>}
+        </Modal>
     );
-  };
+};
 
 export default CreateMessageVerifyModal;