Skip to main content

3. Add Authentication

Now that we have exposed a Privacy Request Capture Interface and set up the Privacy Computation Engine, we need to authenticate users so that these two components can communicate.

Create a server that generates tokens

We need a server that generates tokens for the Privacy Request Capture Interface to use in its requests to the Privacy Computation Engine.

We provide two bare-bones implementations, one in Java and one in Node.js.

Clone the devkit-quickstart repository using Git and copy (or cd into) the server/node directory. Then, use Yarn to install and start the server.

git clone https://github.com/blindnet-io/devkit-quickstart
cd devkit-quickstart/server/node
yarn install
yarn start

If needed (see Application registration in 2. Set Up a Privacy Computation Engine), edit the appId and key variables in the provided implementation of your choice to match your settings.

const appId = '78f5fc15-5645-4f4f-8e1d-0792b7d89acd'
const key = 'EgPThokIzi0oGkOGPOuC3zA63/b39ZAefcbxpegoHog='
In the real world

The bare-bones implementations provided are for demonstration and testing purposes only as they trust the users on who they claim to be.

In the real world, you would need to verify the users' identity, and to only allow admin access to authorized users. The storage-connector-java repository contains an example of such verification by the means of a magic link sent by email.

Request a token on the frontend

Now that our server can handle token requests, let's fetch one on the frontend.

Add an Email Input

First we'll add a simple email input and submit button from bootstrap.

<div class="container text-center">
<h1>Privacy Request Portal</h1>
<div class="col input-group mb-3" style="padding: 3vh 25%;">
<input id="email-field" type="text" class="form-control" placeholder="Email Address" aria-label="Email Address" aria-describedby="button-addon2">
<button class="btn btn-outline-secondary" type="button" id="button-addon2" onclick="submit()">Submit</button>
</div>

<div id="devkit_request_wrapper" class="disabled">
<bldn-priv-request id="devkit"></bldn-priv-request>
</div>

</div>

Add a Submit Script

Next, add a submit() function which is called when the user clicks the button we added above.

<script>
function submit() {
const email = document.getElementById("email-field").value

fetch(`http://localhost:3000/token/user/${email}`)
.then(resp => resp.text())
.then(token => {
document.getElementById('devkit').setAttribute('api-token', `${token}`)
document.getElementById('devkit_request_wrapper').classList.remove("disabled")
})
}
</script>

This function gets a user token for the email entered, then sets the api-token attribute of the PRCI.

Checkpoint

Now we can build a privacy request in the PRCI and send it to the PCE for processing. Great!

The HTML file with our work so far can be found here.