Before you start
Before you can start authenticating your token you must first be able to acquire a token. If you haven't done so you can look through this guide.
https://circlesecurity.ai/learning/circle-access/how-to-get-your-token/
Getting started
To authenticate your token you will be creating a NodeJS application. Verify that you have the latest version of NodeJS installed on your workstation.
https://nodejs.org/en/download/
You will also need to download the most current version of python.
https://www.python.org/downloads/
Set-up
for this guide you can either create a new project file or use the one created from:
https://circlesecurity.ai/learning/circle-access/how-to-get-your-token/
To create a new project file enter the following in terminal The set-up will walk you through the creation steps.
npm init
This will generate a package.json file, open the file then add the following to the scripts section:
"start": "node index.js",
In your project, create a file named index.js if one doesn't already exist.
Next you will be installing the following dependencies:
- Axios
- Crypto
- Cors
- Express
- Express Generator
To do so enter the following commands in your terminal:
npm i axios
npm i Crypto
npm i cors
npm i -g express-generator
npm i express --save
Creating your Server
In your index.js add the following dependencies:
var express = require("express");
const axios = require('axios');
const { debug } = require('console');
const crypto = require('crypto');
const cors = require('cors')We will now begin building our NodeJS server for authentication.
First we will be adding the cors Options
var corsOptions = { origin: '*', optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204 } We will now add the following to create the Express methods
var app = express();
app.listen(3000, () => {
console.log("Server running on port 3000");
});Now we will create the method that will listen for authentication requests, this is done through app.get
app.get('/request', cors(corsOptions), async (req, res) => {
})Inside the app.get method we will first add the following to generate the token
const d = new Date();
const customerId = "[]";
const appKey = "[]";
const endUserId = "[]";
const nonce = d.getTime();
const secret = "[]";
const dataToEncrypt = "customerId=" + customerId + "&appKey=" + appKey + "&endUserId=" + endUserId + "&nonce=" + nonce;
const hash = crypto.createHmac('sha256', secret).update(dataToEncrypt).digest('base64');
let url = "https://api.gocircle.ai/api/token?" + dataToEncrypt + "&signature=" + hash;Replace [] with your account information.
Further details on how to gather your account information can be found here.
https://circlesecurity.ai/learning/circle-access/how-to-get-your-token/
Finally still inside the app.get method we will add the following code to return any requests made to the server.
let json = "";
const response = await axios.get(url);
if(response){
json = JSON.parse(response.data.toString().replace(/\r\n/g, ""));
res.send(json);
console.log(json.Token);
}Once complete your script should look something like this.
Testing the server
To test that the server is running open the Terminal and enter npm start
If the server is working you will see the following:
To test that the request method is functioning correctly you can use a tool like Postman.
https://www.postman.com/downloads/
From the home tab click on the "Create New" link
Select HTTP Request
in the url bar enter the the following and click send.
If the request was successful you will see the following
Authenticating on the Front End
Now that you have created a express request you can now authenticate it with the front end.
In a separate folder create a new file and name it index.html
To start building your webpage enter the following:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
<script>
</script>
</html>In the <head> </head> section add the following dependencies:
<script src="https://internal.gocircle.ai/api/demo/lib/jquery/3.5.1/jquery.min.js"></script>
<script src="https://internal.gocircle.ai/api/demo/lib/bootstrap/bootstrap.bundle.min.js"></script>
<script>
var timestamp = new Date().getTime();
document.write(`\x3Cscript src="https://internal.gocircle.ai/api/gocircle.ai-bundle.js?t=${timestamp}">\x3C/script>`);
document.write(`\x3Cscript src="https://internal.gocircle.ai/api/gocircle.ai.js?t=${timestamp}">\x3C/script>`);
</script>
<link rel="stylesheet" href="https://internal.gocircle.ai/api/demo/lib/bootstrap/bootstrap.min.css">
lastly in the <script> </script> section we will add the following code to send the request to the server.
async function getCircleToken() {
let result = await fetch("http://localhost:3000/request");
let json = await result.json();
//console.log(json);
return JSON.stringify(json.Token).replaceAll('"',"");
}
$(document).ready(async function(){
const token = await getCircleToken();
// all code and circles go in here
console.log(token);
let appKey = "[]"
let iniResult = await Circle.initialize(appKey, token);
if (iniResult && iniResult.Status.Result) {
// CircleService is running and token is authorized
}
});Replace [] with your current AppKey
let appKey = "[]"
Testing
To verify your webpage is working launch Command prompt (Terminal on Mac) and navigate to the folder your index.html is located in.
start the python service by entering the following command.
python -m http.server [<portNo>]Replace [<portNo>] with the port you are using. Default 8000
finally open your Index.html file in a web browser. Right click on the page and click inspect element. Click on the console tab and you should see your token listed.
