Introduction
This guide is a walkthrough to set up a BrowZer application to access Prometheus.
To learn more about BrowZer see Getting started with BrowZer
Prerequisites
- A Cloud Ziti Network is up and running.
- Having a Prometheus instance up and running with an edge router. We use the Ubuntu 22.04 setup. Please follow the Appendix instructions to install the Prometheus instance and autonomous edge router. In this example document, the edge router is named Prometheus-er.
- In this example, the Prometheus server uses the default port 9090. Make sure that the same port is used to configure the Ziti services.
Deployment
Part 1: Setup Needed Items to Support a BrowZer Application
Architecture diagram:
In this section:
- Create a WSS-enabled NetFoundry Hosted Edge Router
- Create an Edge Router Policy
- Create the Service
- Create a Service Policy
In the Console, create a NetFoundry Hosted Edge Router with the WSS Listener enabled. BrowZer requires at least one Edge Router with the WSS Listener enabled. Launching an NF Hosted is recommended.
In the Console, Create an Edge Router Policy to ensure this router is available for your Identities.
Create Service
In the Console, Create the Service that you want to access Prometheus. We recommend using an advanced service.
- For the case of docker-compose, the forward address uses the docker Container IP or container name. In my case, I use the docker container name prometheus. Use any FQDN to intercept IP.
- The PORT will be the default port on the Prometheus server. In our example, use port 9090.
- Identities are the edge router Prometheus-er.
- Leave the default check yes to Forward Protocol/Port.
Service Policy
In the Console, Create a Service Policy(AppWan) to allow access to the specified clients that we’ll create later.
Part 2: Auth0 & JWT Signer
In this section:
- Create an Auth0 Account
- Create an Auth0 Application(SPA)
- Add callback & logout
- Create an Auth0 API
- Create an Auth0 Custom Trigger
- Gather Information from Auth0 needed
- Create a new JWT Signer
- Create a new Authentication Policy
- Create or update the Identities(Endpoints)
This tutorial follows the Auth0 settings. Other IDPs must have their own settings. If you don't already have an account you can sign up for a free account at https://auth0.com/signup
Adding a new Application in Auth0
Once you have an account setup you can add a new "Application":
Then click on the "Create Application":
Then Create a "Single Page Web Application":
Adding the callback & logout URL to your BrowZer App(s) you created
All BrowZer Apps have the following template:
https://<APP_NAME>.<NET_NAME>.browzer.cloudziti.io
where:
- APP_NAME, is the name we’ll assign to the BrowZer app we’ll create.
- NET_NAME, is the name we’ll assign the first time you click on “BrowZer Apps”.
In Auth0, under the Application/Settings you'll find "Allowed Callback URLs" & "Allowed Logout URLs"
You can add one callback URL for all apps created under the same NET_NAME In this case, NET_NAME=solarapp. The URL needs to be in this format: https://*.<NET_NAME>.browzer.cloudziti.io
For example:
https://*.solarapp.browzer.cloudziti.io
For Example:
Put the same URLs under the "Allowed Logout URLs" also.
Create an API
Now you can add a new "API":
Click on Create API
Fill out the form using the URL
https://<APP_NAME>.<NET_NAME>.browzer.cloudziti.io
Create a custom trigger
Under Actions select "Triggers":
Click on "post-login":
Click on the + symbol & select "Build from Scratch":
Name the a new Action "Add Email to Access Token":
Remove the prefilled out content & past the following:
/**
* Handler called during a PostLogin flow.
*
* @param {Event} event - Details about the user and the
* context in which they are logging in.
* @param {PostLoginAPI} api - Interface whose methods can be
* used to change the behavior of the login.
*/
exports.onExecutePostLogin = async (event, api) => {
if (event.authorization) {
api.accessToken.setCustomClaim(`email`, event.user.email);
}
};
then click on "Deploy":
Return to "post-login" & click on "Custom"
Click and drag your Add Email to Access Token Action onto the Trigger, then drop it into place, then click Apply in the top right.
Gathering Information from Auth0
To set up the new JWT Signer we'll need to get some information from the new Auth0 Application that was just created.
Scroll down to the Advanced Settings and click on Endpoints
You’ll also need to write down the OAuth Token URL that will be used on the BrowZer App creation and the JSON Web Key Set.
Adding a JWT Signer & Authentication Policy
Create the JWT
In the Console, Create a new JWT Signer
Using the values from Auth0 fill out the information in the new JWT Signer dialog.
For the ISSUER, use the “Domain” value.
https://<Domain>/
(Please make sure to add the trailing slash).
For the Audience, use the Identifier you used when creating the API above.
For the JWKS Endpoint, use the "JSON Web Key Set URL" value.
For the External Auth URL, use the "OAUTH Token URL" value.
Finally set the JWT Claim "email" & the Identities to "External Id".
Create the Authentication Policy
In the Console, Create a new Authentication Policy
In this example, we disable the certificate options & only use the JWT Signer as the Authenticator.
Create or Assign Identities(Endpoints) to the Authentication Policy
In the Console, Create or update the Identities(Endpoints) that will have access to BrowZer. Please ensure you have added the necessary attributes you define in your Service Policy(AppWan) to the Identities(Endpoints) so it’ll have access to the service.
Finally, make sure it has an Authentication Policy you created for BrowZer
Part 3: The BrowZer Application
In this section:
- BrowZer Getting Started
- Create a new BrowZer Application
- Access the Application
Make sure to complete the BrowZer Getting Started by clicking on the BrowZer Apps in the navigation menu.
Create a BrowZer Application
In the MOP Console, Create a new BrowZer Application.
For the App Entry, Select the service you created in Part 1.
For the Public URL, you’ll set a name for your app (APP_NAME), this name creates the whole URL you’ll use to access your service securely. In this case, APP_NAME=private-app, and the URL is
For example:
https://prometheus.solarapp.browzer.cloudziti.io
Set the OIDC Base URL to the “Domain” value from Auth0 in Part2, in the format:
https://<domain>
(This time without any slash at the end)
Set the ClientID to the "ClientId" value you got from Auth0 in Part 2.
Access your Application
https://prometheus.solarapp.browzer.cloudziti.io
Accessing the Browzer-based Prometheus using TLS:
APPENDIX
Create Your Own Prometheus Instance
- First, we need to update the instance.
sudo apt update && sudo apt upgrade
sudo apt install docker-compose
- Clone the docker repo for Prometheus.
git clone https://github.com/ninadingole/docker-images
- Go to the Prometheus docker directory (cd ./docker-images/prometheus-grafana/)for the Prometheus instance. We’ll call this directory WORK_DIR.
- create a directory: ziti_router
- Modify the docker-compose file (docker-compose.yaml) under your WORK_DIR to include the netfoundry edge router image.
docker-compose.yaml
...
autonomous-er:
container_name: netfoundry-er
image: netfoundry/autonomous-router:latest
pull_policy: always
restart: unless-stopped
environment:
- VERBOSE=1
- REG_KEY=<registration_key from console>
volumes:
- ./ziti_router:/etc/netfoundry
The container netfoundry-er holds the environment: REG_KEY, which is the registration key for the edge router. You need to create a customer-hosted edge router on the CloudZiti console and enter the registration key (REG_KEY) into the docker-compose.yaml file.
Please follow this guide for detailed information on how to deploy an edge router.
After you have created the file, start your Prometheus instance with the command:
docker-compose up -d
Install TLS/SSL certificate to access using HTTPS/443(Optional):
Create a cert and key file in the path /docker-images/prometheus-grafana/prometheus
mkdir cert
sudo openssl genrsa -out prometheus.key 2048
sudo openssl req -new -key prometheus.key -out prometheus.csr
sudo openssl x509 -req -days 365 -in prometheus.csr -signkey prometheus.key -out prometheus.crt
Create a file web.yml in path docker-images/prometheus-grafana/prometheus and provide the crt and key file path
:~/docker-images/prometheus-grafana/prometheus$ cat web.yml
tls_server_config:
cert_file: cert/prometheus.crt # place of the cert file inside the docker container
key_file: cert/prometheus.key # place of the key file inside the docker container
Modify the existing docker-compose.yaml with the following changes in Prometheus services.
services:
prometheus:
container_name: prometheus
image: prom/prometheus
restart: always
volumes:
- ./prometheus:/etc/prometheus/
- prometheus_data:/prometheus
command:
- '--config.file=/etc/prometheus/prometheus.yml'
- '--web.config.file=/etc/prometheus/web.yml'
- '--storage.tsdb.path=/prometheus'
- '--web.console.libraries=/usr/share/prometheus/console_libraries'
- '--web.console.templates=/usr/share/prometheus/consoles'
ports:
- 9090:9090
links:
- cadvisor:cadvisor
- alertmanager:alertmanager
depends_on:
- cadvisor