React.js - signed endpoint HMAC SHA256

API Spot/Margin API
1

Hi,

I wanna fetch data, and also make a trade using React.js

I’m using “crypto-js” (for HMAC SHA256 signature) and “axios.post()” to send queryString.

I came up with some code for placing an order, but it seems that something is not configured quite right.

import React, { useState, useEffect } from 'react'
import axios from 'axios'
import CryptoJS from 'crypto-js'
import './App.css';



const burl = 'https://api.binance.com'
const endPoint = '/api/v3/order'
let dataQueryString = 'symbol=BTCUSDT&side=BUY&type=LIMIT&timeInForce=GTC&quantity=0.001&price=5000&recvWindow=60000&timestamp=' + Date.now()

// apiKey and secretKey : from Binance API doc
// https://binance-docs.github.io/apidocs/spot/en/#signed-trade-user_data-and-margin-endpoint-security

const keys = {
	'akey' : '',
	'skey' : ''
}

let signature = CryptoJS.HmacSHA256(dataQueryString, keys['skey']).toString(CryptoJS.enc.Hex)

let url = burl + endPoint + '?' + dataQueryString + '&signature=' + signature


function App() {

	const [error, setError] = useState([])
	const [res, setRes] = useState([])

	const componentDidMount = async () => {
		const buyOrder = await axios.post(url, {
			headers: {
				'X-MBX-APIKEY': keys['akey']
			}
		})
		.then((res) => {
		console.log("res: " + JSON.stringify(res))
		setRes(JSON.stringify(res))
		})
		.catch((error) => {
		console.error(error)
		console.log("error: " + JSON.stringify(error))
		setError(JSON.stringify(error))
		})
	}

	useEffect(function() {
		componentDidMount()
		console.log(url)
	}, [])


	return (
		<div className="App">
			<p>{error}</p>
			<p>{res}</p>
		</div>
	);
}

export default App;

Can anyone help me?

2

Please don’t share any secret key here.

Here is a simple about hashing the signature in Nodejs.

7

API keys are from Binance documentation, so I thought it’s OK to use them as an example

3

Await and Then? did not know that they can be combined

4

that’s query string, pretty standard.

5

As I understand “await” appeared to replace “then”, or use “await” or use “then” but not both, example

> await myfunction ()

or

> myfunction (). then ()

So far I have not seen code that combines both

> await myfunction (). then ()

8

You could use:

// Want to use async/await? Add the `async` keyword to your outer function/method.
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

But I decided in another way

6

Dino, thank you for answering. It seems that my problem is in CORS because I got an error:

Access to XMLHttpRequest at 'https://api.binance.com/api/v3/order?symbol=BTCUSDT&side=BUY&type=LIMIT&timeInForce=GTC&quantity=0.001&price=5000&recvWindow=60000&timestamp=1596317131721&signature=43709cc7b0576dff468741b2b7e9069c5fd8b7b4c781b534684a8fe36ba32e13' from origin 'https://kkcrypto.github.io' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

11

thanks for your updates, it seems the issue of CORS. Hope you will find a way to send the request in your server side.

12

@Crypto could you please also add the code of decryption of HMAC or validation of HMAC at API side .

13

You cannot send authenticated request from frontend. It’d be blocked by CORs policy. Use a backend server to forward the request pls.

14

“Crypto” NPM package is deprecated in favor of “crypto-js”.