0

我正在尝试建立一个网站并拥有一个 API 来使用我的私钥处理请求（因此它们不能公开访问）。但是，我还签署了发送到此 API 的数据，每个用户都有自己的密钥对，对于注销的用户，我有一个通用密钥对。但是，我现在正在尝试处理验证码请求，但它尝试在客户端运行我的函数，因此无法访问存储在环境变量中的 API 密钥。如何强制我的函数在服务器端运行。错误：

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'length')

Source
pages\contact.js (69:21) @ _callee$

  67 | const data = { "token":token };
  68 | const publicKey = 'website';
> 69 | const hmac = crypto.createHmac('sha256', process.env.PUBLIC);
     |             ^
  70 | const signature = Buffer.from('sha256=' + hmac.update(JSON.stringify(data)).digest('hex'), 'utf8');
  71 | axios.post('https://api.com/' + 'grecaptcha', data, {headers: {'Signature-256': signature, key: publicKey}}).then(resp => {
  72 |     if ( resp.status === 200 ){

功能：

function Form(props) {
    let [form, setForm] = useState({});
    const { executeRecaptcha } = useGoogleReCaptcha();

    const handleChange = (event) => {
        const name = event.target.name
        const value = event.target.value
        setForm(values => ({...values, [name]: value}))
    }

    const handleReCaptchaVerify = useCallback(async () => {
        if (!executeRecaptcha) {
            props.setErrorText(['Please try again later.'])
            props.setIsError(true)
            return;
        } else if (!(form.name && form.email && form.subject && form.message )) {
            props.setErrorText(['All fields are required.'])
            props.setIsError(true)
            return
        }
        const token = await executeRecaptcha();
        const data = { "token":token };
        const publicKey = 'website';
        const hmac = crypto.createHmac('sha256', process.env.PUBLIC);
        const signature = Buffer.from('sha256=' + hmac.update(JSON.stringify(data)).digest('hex'), 'utf8');
        axios.post('https://api.com/' + 'grecaptcha', data, {headers: {'Signature-256': signature, key: publicKey}}).then(resp => {
            if ( resp.status === 200 ){
                const data = form;
                const publicKey = 'website';
                const hmac = crypto.createHmac('sha256', process.env.PUBLIC);
                const signature = Buffer.from('sha256=' + hmac.update(JSON.stringify(data)).digest('hex'), 'utf8');
                axios.post('https://api.com/' + 'contact', data, {headers: {'Signature-256': signature, key: publicKey}}).then(res => {
                    if ( res.status === 200 ) {
                        props.setIsSuccess(true)
                    } else {
                        props.setErrorText(['Please try again.'])
                        props.setIsError(true)
                    }
                })
            } else {
                props.setErrorText(['reCAPTCHA not valid.'])
                props.setIsError(true)
            }
        })
    }, [form, executeRecaptcha, props])

    return (
        <div className={props.isSuccess ? 'text-center filter blur' : props.isError ? 'text-center filter blur' : 'text-center'} >
            <Header text="If you'd like to contact me please fill out the form below"/>
            <div className="contact-outer-div">
                <div className="contact-inner-div">
                    <TextForm text="Name" name="name" placeholder="Name" onChange={handleChange} value={form.name || ""} />
                    <TextForm text="Email address" name="email" placeholder="Name@example.com" onChange={handleChange} value={form.email || ""} />
                    <TextForm text="Subject" name="subject" placeholder="Subject" onChange={handleChange} value={form.subject || ""} />
                    <Message onChange={handleChange} value={form.message || ""} />
                    <Submit onClick={handleReCaptchaVerify} />
                </div>
            </div>
        </div>
    )
}

我收到错误，它无法读取未定义的长度，那么如何强制此函数在服务器端运行，以便它可以访问环境变量而不暴露它们。

4

0 回答 0