🗝️API Key

Creating and managing tokens for your Pop

Overview

EyePop uses a standard OAuth system to manage access to your Pops.

In essence, OAuth is a token exchange and management protocol that allows you to create public temporary keys for your authenticated users. Depending on your Pop use case, a temporary key may or may not be necessary so let's explore the main use cases.

The primary Pop use cases are as follows:

1. Server to Server: You or a server talks directly to your Pop.

2. Server to Client: Your clients talks directly to your Pop - temporary keys are required.

Quick Start

In your Bash terminal, follow these steps get a temporary token:

# 1. Store your secret keys
export EYEPOP_POP_ID=<my pop uuid>
export EYEPOP_SECRET_API_KEY=<my secret key>

# 2. Get your temporary token
export TEMP_ACCESS_TOKEN=$(curl --silent --request POST \
  --url 'https://api.eyepop.ai/authentication/token' \
  --header 'accept: application/json' \
  --header 'Content-Type: application/json' \
  --data '{"secret_key": "'"$EYEPOP_SECRET_API_KEY"'" }' | jq -r '.access_token')

# 3. Use your temporary token
curl -X 'GET' 'https://api.eyepop.ai/pops/'"$EYEPOP_POP_ID"'/config?auto_start=false' \
  -H 'accept: application/json' \
  -H 'Authorization: Bearer '"$TEMP_ACCESS_TOKEN"''

Creating an API Key

Visit the dashboard:

1. Create a Pop and continue to Step 3

2. Select "Create API Key"

   • Enter a name in the popup modal for your key, select "Continue"

   • Copy this key, and store it locally on your machine - make sure to not share this publicly

Client Side Authentication

Enabling client side authentication with your Pop entails running your own server for your clients to request a temporary token from. This can simply be done by creating an HTTP endpoint, something like: mysite.com/api/eyepop/auth , which checks if your client is authenticated - then returns a temporary token from the EyePop API.

The following is an AWS lambda function doing exactly this. In this example, your client could make an HTTP to this lambda and receive their token valid for a day. Feel free to modify to your platform of choice:

const axios = require('axios');

exports.handler = async (event) => {
  // Check if the client is authenticated (replace this with your authentication logic)
  const isAuthenticated = true; // Replace with your actual authentication logic

  if (!isAuthenticated) {
    // Client not authenticated
    return {
      statusCode: 401,
      body: JSON.stringify({ error: 'Unauthorized' }),
    };
    
  }
  
  try {
    // Retrieve secret keys from environment variables
    const popId = process.env.EYEPOP_POP_ID;
    const secretApiKey = process.env.EYEPOP_SECRET_API_KEY;

    // Request a temporary token from EyePop's API
    const response = await axios.post('https://api.eyepop.ai/authentication/token', {
      secret_key: secretApiKey,
    });

    const tempAccessToken = response.data.access_token;

    // Use the temporary token to make another request to EyePop's API
    const configResponse = await axios.get(`https://api.eyepop.ai/pops/${popId}/config?auto_start=false`, {
      headers: {
        Authorization: `Bearer ${tempAccessToken}`,
        accept: 'application/json',
      },
    });

    // Return the configuration data
    return {
      statusCode: 200,
      body: JSON.stringify(configResponse.data),
    };
  } catch (error) {
    // Handle errors
    console.error('Error:', error.message);

    return {
      statusCode: 500,
      body: JSON.stringify({ error: 'Internal Server Error' }),
    };
  }
  
};

Developer SDK Authentication Flow

To get developers up and running faster, you can generate a token using the SDK Authentication workflow built into the dashboard via the JavaScript SDK. To do this, pass an empty string into the token parameter of the FetchPopConfig function and you will be prompted to allow a temporary token to be created as shown in the image below.

var token = '';
EyePopSDK.EyePopAPI.FetchPopConfig(POP_UUID, token);