Backstage Integration

Create an integration to request, view, and approve access via Backstage

The Apono Backstage integration allows you to simply configure Apono as a custom plugin in your Backstage app. This plugin brings Apono's Just-in-Time (JIT) access management to the forward, making it easily accessible to developers within Backstage. With this integration, you can now effortlessly connect your Backstage app to Apono and manage access directly from the Backstage interface.

Prerequisites

• Generate RSA Private & Public Keys using OpenSSL using the following commands:

  • Copy both public & private keys encoded as base64 to use later.

# Generate RSA Private Key
openssl genpkey -algorithm RSA -out private_key.pem -pkeyopt rsa_keygen_bits:2048

# Display private_key.pem content encoded as base64
cat private_key.pem | base64

# Generate RSA Public Key
openssl rsa -pubout -in private_key.pem -out public_key.pem

# Display public_key.pem content encoded as base64
cat public_key.pem | base64

Apono uses OpenSSL keys to ensure secure communication between your Backstage app and the Apono API. By using OpenSSL keys, you can securely interact with the Apono API, ensuring that your data remains protected and your identity is verified.

---

Configuration steps

In Apono

1. Go to Integrations, under Environment from the left navigator.

2. Under Integrations, click the Catalog tab and select Backstage under Communication category.

3. In Backstage integration page, provide the following information about your Backstage environment:

Variable	Value	Required
Integration Name	The integration name.	Yes

4. Under Secret Store paste your Public Key encoded as base64.

5. Click connect.

---

In Backstage

The following steps assume that you have created a Backstage app and want to add an existing plugin to it. For more information on Apono plugin for Backstage frontend and backend app.

From your Backstage root directory

Add Apono plugin to Backstage Frontend App

1. To create a new Apono frontend plugin, make sure you've run yarn install and installed dependencies, then run the following on your command line from the root of your project.

yarn --cwd packages/app add @apono-io/backstage-plugin-apono

Note the plugin is added to the app package, rather than the root package.json. Backstage Apps are set up as monorepos with Yarn workspaces. Since CircleCI is a frontend UI plugin, it goes in app rather than backend.

2. Update router for the AponoPage inside packages/app/src/App.tsx:

import { AponoPage } from '@apono-io/backstage-plugin-apono';

// Inside your App component's routes
<Route path="/apono" element={<AponoPage />} />

3. To allow the Apono plugin to load its content in an iframe, you need to add the Apono client URL to your Backstage's Content Security Policy. Add the following to your app-config.yaml file:

backend:
  csp:
    frame-src: ["'self'", "https://backstage-client.apono.io"]

---

Add Apono plugin to Backstage Backend App

To attach and run the Apono plugin, you will make some modifications to your backend.

1. Add Apono plugin to your backend system packages as dependencies. Run the following command:

# from the repository root
yarn --cwd packages/backend add @apono-io/backstage-plugin-apono-backend

2. Update packages/backend/src/index.ts with the following:

backend.add(import('@apono-io/backstage-plugin-apono-backend'));

3. Configure Backstage app-config.yaml to connect to the Apono API with the following:

apono:
  publicKey: ${APONO_PUBLIC_KEY} # Base64 encoded RSA public key with minimum 2048 bits length
  privateKey: ${APONO_PRIVATE_KEY} # Base64 encoded RSA private key with minimum 2048 bits length

---

Result

• (Example) Add Apono plugin to Backstage sidebar. Update Backstage sidebar in packages/app/src/components/Root/Root.tsx with the following:

import { AponoPage } from '@apono-io/backstage-plugin-apono';

export const Root = ({ children }: PropsWithChildren<{}>) => (
  <SidebarPage>
    <Sidebar>
      <SidebarLogo />
      {/* ... */}
      <SidebarGroup label="Menu" icon={<MenuIcon />}>
        {/* ... */}
        <SidebarItem icon={ExtensionIcon} to="/apono" text="Apono" />
        {/* ... */}
        <SidebarDivider />
        {/* ... */}
      </SidebarGroup>
    </Sidebar>
  </SidebarPage>
);

---

Troubleshooting

• The following error occurs when you try to enter Apono app on your Backstage app: Request failed with status code 401 / Failed to load application

This issue might occur when you accidentally delete your Apono Backstage integration.

To resolve this issue, recreate the Backstage integration in your Apono account with the Public Key defined in your Backstage app.

To find your public key, go to app-config.yam on your Backstage app repo and look for:

{...}
apono:
  publicKey: ${APONO_PUBLIC_KEY}
{...}