Front-end integration

How to use Rockside directly on the front-end.

Rockside API keys give access to all your application users resources. For this reason, they cannot be used in a public front-end application.

This guide explains how to use access tokens to allow your front-end application to use Rockside and simplify the integration of Rockside API in your application.

Generate an access token

Each access token must be scoped by what we call an end user ID. It must be unique for each user on your platform. It can be, for example, an unique integer, an email, an UUID.

Once you decided what will be your end user ID, generate a token :

$ curl --location --request POST 'https://api.rockside.io/tokens' \
--header 'Content-Type: application/json' \
--header 'apikey: $ROCKSIDE_API_KEY' \
--data-raw '{
"origin": "mywebsite.com", # this can also be an iOS bundle identifier
"end_user_id": "$end_user_id",
"contracts": ["0x05fc5a0790008000a07526023a16e2022c4c6296"] # this is the list of authorized contracts that can be called
}'

Since this uses the Rockside API key, this has to be done in a backend

The $end_user_id must be different for each user of your application and must not change.

This yields an access token :

{
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJvcmlnaW4iOiJsb2NhbGhvc3QiLCJjdXN0b21lcl9pZCI6IjMiLCJlbmRfdXNlcl9pZCI6IjEiLCJjb250cmFjdHMiOltdfQ.spff1JYtU2Dg3gqa03qg_V7zli7P4ZZ97TdaNZns"
}

Use an access token on the front-end

The generated access token can now be used to access the user resources directly on the front-end. The access is scoped and rate limited.

For example, to create an identity with javascript :

var myHeaders = new Headers();
myHeaders.append("Authorization", "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJvcmlnaW4iOiJsb2NhbGhvc3QiLCJjdXN0b21lcl9pZCI6IjMiLCJlbmRfdXNlcl9pZCI6IjEiLCJjb250cmFjdHMiOltdfQ.spff1JYtU2Dg3gqa03qg_V7zli7P4ZZ97TdaNZns");
var requestOptions = {
method: 'POST',
headers: myHeaders,
redirect: 'follow'
};
fetch("https://api.rockside.io/ethereum/ropsten/identities", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));

Use Rockside resources with Web3js

You can use our Rockside Wallet SDK (see SDKs page) to integrate seamlessly with web3js :

import { Rockside } from 'rockside-wallet-sdk';
const rockside = new Rockside({ token: 'MY_TOKEN' });
-
const identity = await rockside.api.createIdentity();
const provider = rockside.getProvider();
const web3 = new Web3(provider);
const erc20 = new web3.eth.Contract(JSON.parse(erc20ABI), erc20Address);
// this will read the balance of identity
const mybalance = await erc20.methods.balanceOf(identity.address).call();
// this will send a transaction
await erc20.methods.transfer(...).send({ from: identity.address });