0

我正在尝试使用官方的 mollie api。当我在 React JS 中本地运行代码时,我收到以下错误: 在此处输入图像描述 然后我将代码上传到 firebase 托管。在那里我收到以下错误: 在此处输入图像描述

环境可以通过这个链接查看:https ://picoo-hire-b2c.web.app/ 如果你然后点击页面底部的'test transactie',错误将出现在console.log中。

我的代码如下所示:

import React, { Component } from 'react';
import logo from '../logo.svg';
import createMollieClient from '@mollie/api-client';



class formHandeling extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: 'Picoo',
            email: '',
            firstname: '',
            lastname: '',
            address: '',
            postal: '',
            city: '',
            recommended: '',
            errorMessage: '',
            agreement: false,
            contact: false,
            newsletter: false
        };
    }

    onChangeCaptacha(value) {
        console.log("Captcha value:", value);
      }

    testPayment(){
        createMollieClient({ apiKey: 'test_7K9sDETkbB7ctsJ2TqwyUnkAMf56ur' }).payments.create({
            amount: {
              value:    '10.00',
              currency: 'EUR'
            },
            description: 'Test of picoo mollie',

  redirectUrl: 'https://yourwebshop.example.org/order/123456',
  webhookUrl:  'https://yourwebshop.example.org/webhook'
          })
            .then(payment => {
              // Forward the customer to the payment.getCheckoutUrl()
              console.log("payment:"+payment);
            })
            .catch(error => {
              // Handle the error
            });
    }


    render() {

        return (
            <div className="container form-labels">
                <label>
                    Email:<br />
                    <input type="text" value={this.state.email} onChange={event => this.setState({ email: event.target.email, errorMessage: '' })} />
                </label>
                <br />
                <br />
                <label>Voornaam:<br />
                    <input type="text" value={this.state.firstname} onChange={event => this.setState({ firstname: event.target.firstname, errorMessage: '' })} />
                </label>
                <br />
                <br />
                <label>
                    Achternaam:<br />
                    <input type="text" value={this.state.lastname} onChange={event => this.setState({ lastname: event.target.lastname, errorMessage: '' })} />
                </label>
                <br />
                <br />
                <label>
                    Adres:<br />
                    <input type="text" value={this.state.address} onChange={event => this.setState({ address: event.target.address, errorMessage: '' })} />
                </label>
                <br />
                <br />
                <label>
                    Postcode:<br />
                    <input type="text" value={this.state.postal} onChange={event => this.setState({ postal: event.target.postal, errorMessage: '' })} />
                </label>
                <br />
                <br />
                <label>
                    Plaats: <br />
                    <input type="text" value={this.state.city} onChange={event => this.setState({ city: event.target.city, errorMessage: '' })} />
                </label>
                <br />
                <br />
                <label>
                    Ja, ik ga akkoord met de huurvoorwaarden*
                    <input type="checkbox" checked={this.state.agreement} onChange={event => this.setState({ agreement: event.target.checked, errorMessage: '' })} />
                </label>
                <p>
                    Picoo is toegewijd aan het beschermen en respecteren van je privacy, en we zullen je persoonlijke informatie alleen gebruiken om de producten en diensten te leveren waar je ons om hebt gevraagd.
                </p>
                <label>
                    Ja, ik ben akkoord dat Picoo contact met mij opneemt.*
                    <input type="checkbox" checked={this.state.contact} onChange={event => this.setState({ contact: event.target.checked, errorMessage: '' })} />
                </label>
                <br />
                <br />
                <label>
                    Schrijf mij ook in voor de Picoo nieuwsbrief (niet verplicht)
                    <input type="checkbox" checked={this.state.newsletter} onChange={event => this.setState({ newsletter: event.target.checked, errorMessage: '' })} />
                </label>
                <p>
                Bekijk ons privacybeleid voor meer informatie.
                <br/><br/>
                Door hieronder op verzenden te klikken, geef je toestemming aan picoo om de hierboven ingediende persoonlijke informatie op te slaan en te verwerken om je van de gevraagde inhoud te voorzien.
                </p>
                <button onClick={() => this.testPayment()}>Test transactie</button>

            </div>
        );
    }
};

export default formHandeling;

有谁知道从哪里开始寻找?

4

1 回答 1

0

@mollie/api-client是一个节点模块。NodeJS 是服务器端 javascript,你在 React 中使用这个模块,它是前端。这可能会让人感到困惑,因为这两个环境都使用 npm 来安装包。

您会收到该错误,因为fs它是一个节点库。

此错误应向您提示您没有按照应有的方式使用该库。一个非常重要的规则是,在 99% 的情况下,您可能希望前端只调用您自己的后端以避免安全问题。

这意味着您的前端使用付款信息调用您的后端端点,然后您的后端调用 mollie 使用@mollie/api-client.

前端根本不安全,无论你放在那里它对用户都是可见的。这意味着,如果您按照您在问题中显示的方式进行操作,您会将您的 mollie API 密钥暴露给您的所有用户,您将度过一段糟糕的时光。

还要记住保持前端和后端之间的连接安全(使用 https,在后端验证从前端获得的任何数据等)

于 2020-07-27T10:52:00.003 回答