API Exposure Tool

Streamlining Secure API Integration for Seamless Connectivity

Nov 22, 2024

in today’s digital landscape, connecting internal systems to external clients is more critical than ever. Enter the API Exposure Tool—a solution designed to simplify and secure the process of transforming internal APIs into customer-facing ones. With this tool, you can effortlessly manage endpoints, monitor usage, and maintain robust security, all while enhancing the accessibility of your services.

Project Overview

Introduction

The API Exposure Tool is designed to facilitate the exposure of internal APIs as customer-facing APIs. This tool aims to streamline the process of integrating internal services with external clients, enhancing accessibility while maintaining security and performance. The tool will provide a user-friendly interface for managing API endpoints, monitoring usage, and ensuring compliance with security standards.

Purpose

The primary purpose of the API Exposure Tool is to:

Expose internal APIs securely to external clients.
Provide a centralized dashboard for managing API endpoints.
Ensure proper documentation and monitoring of API usage.
Implement access control and authentication mechanisms.

Technologies Used

The development of the API Exposure Tool involves the following technologies:

Backend:
- Node.js with Express for building the server.
- Swagger for API documentation.
- JWT for authentication and access control.
Frontend:
- React for building the user interface.
- Axios for making HTTP requests to the backend.
- React Router for managing navigation.
Testing:
- Jest for unit testing the frontend.
- Mocha/Chai for unit testing the backend.
Deployment:
- Docker for containerization.
- Cloud Platforms (e.g., AWS, Heroku) for hosting.

Complete Code for the API Exposure Tool

Step 1: Backend Setup

Create the Backend Directory.

mkdir api-exposure-tool-backend
cd api-exposure-tool-backend
npm init -y

Install Required Dependencies

npm install express swagger-ui-express body-parser cors dotenv jsonwebtoken

Create the Server File. Create a file named server.js and add the following code

// server.js
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const swaggerUi = require('swagger-ui-express');
const swaggerDocument = require('./swagger.json');
const jwt = require('jsonwebtoken');
require('dotenv').config();

const app = express();
app.use(cors());
app.use(bodyParser.json());

// Swagger UI setup
app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument));

// Middleware for JWT authentication
const authenticateToken = (req, res, next) => {
    const token = req.headers['authorization'];
    if (!token) return res.sendStatus(401);
    jwt.verify(token, process.env.ACCESS_TOKEN_SECRET, (err, user) => {
        if (err) return res.sendStatus(403);
        req.user = user;
        next();
    });
};

// Sample internal API endpoint
app.get('/api/internal-data', authenticateToken, (req, res) => {
    res.json({ message: 'Internal data exposed' });
});

// Endpoint to generate JWT token (for testing purposes)
app.post('/api/login', (req, res) => {
    // In a real application, you would validate user credentials
    const username = req.body.username;
    const user = { name: username };
    const accessToken = jwt.sign(user, process.env.ACCESS_TOKEN_SECRET);
    res.json({ accessToken });
});

// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

Create the Swagger Documentation: Create a file named swagger.json and add the following code.

{
    "swagger": "2.0",
    "info": {
        "description": "API Exposure Tool",
        "version": "1.0.0",
        "title": "API Exposure Tool API"
    },
    "host": "localhost:3000",
    "basePath": "/",
    "paths": {
        "/api/internal-data": {
            "get": {
                "summary": "Get internal data",
                "description": "Returns internal data exposed",
                "produces": ["application/json"],
                "responses": {
                    "200": {
                        "description": "Successful response",
                        "schema": {
                            "type": "object",
                            "properties": {
                                "message": {
                                    "type": "string"
                                }
                            }
                        }
                    },
                    "401": {
                        "description": "Unauthorized"
                    },
                    "403": {
                        "description": "Forbidden"
                    }
                }
            }
        }
    }
}

Create a .env File: Create a file named .env and add the following code

ACCESS_TOKEN_SECRET=your_secret_key

Step 2: Frontend Setup

Create the Frontend Directory: Open a new terminal window and create the frontend directory
```
npx create-react-app api-exposure-tool-frontend
cd api-exposure-tool-frontend
```
Install Required Dependencies.
```
npm install axios react-router-dom
```

Create the Dashboard Component: Create a file named Dashboard.js in the src/components directory and add the following code

// src/components/Dashboard.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';

const Dashboard = () => {
    const [data, setData] = useState(null);
    const [token, setToken] = useState('');

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await axios.get('http://localhost:3000/api/internal-data', {
                    headers: { Authorization: token }
                });
                setData(response.data);
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        };

        if (token) {
            fetchData();
        }
    }, [token]);

    const handleLogin = async () => {
        const response = await axios.post('http://localhost:3000/api/login', { username: 'testuser' });
        setToken(response.data.accessToken);
    };

    return (
        <div>
            <h1>API Exposure Tool Dashboard</h1>
            <button onClick={handleLogin}>Login</button>
            {data ? <p>{data.message}</p> : <p>Loading...</p>}
        </div>
    );
};

export default Dashboard;

Set Up Routing: Modify the src/App.js file to include routing

// src/App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Dashboard from './components/Dashboard';

const App = () => {
    return (
        <Router>
            <Switch>
                <Route path="/" component={Dashboard} />
            </Switch>
        </Router>
    );
};

export default App;

Step 3: Running the Application

Run the Backend: In the backend directory, run the following command
```
node server.js
```
Run the Frontend: In the frontend directory, run the following command
```
npm start
```
Access the Application: Open your web browser and navigate to http://localhost:3000/api-docs to view the API documentation. Access the dashboard at

http://localhost:3000

Step 4: Deployment

Dockerize the Application (Optional): Create a Dockerfile for the backend

# Dockerfile for Node.js backend
FROM node:14
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["node", "server.js"]

Create a Dockerfile for the frontend

# Dockerfile for React frontend
FROM node:14 as build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Deploy to a Cloud Platform: Use a cloud service like AWS, Heroku, or DigitalOcean to deploy your application.

Conclusion

The API Exposure Tool provides a robust solution for exposing internal APIs securely to external clients. By following the steps outlined in this document, you can set up, run, and deploy the application effectively. This tool not only enhances accessibility but also ensures that security and compliance standards are met.

If you have any questions or need further assistance, feel free to reach out!

Olle’s Substack

Discussion about this post

Ready for more?