Skip to main content

Configure and upload to Azure blob storage

Enable the branded and Authentication Cloud-specific user interface with the following steps. Make sure you have the templates downloaded in Download the templates for the branded user interface and custom policies.

  1. Open the project in your editor.
  2. Navigate to the policy folder.
  3. Open the nevis.html file.
  4. Search for @[email protected], and replace it with the URL of your Nevis Admin console: https://<instance_id>.mauth.nevis.cloud.
  5. Save the changes to the file.
  6. Follow the instructions in Quickstart: Upload, download, and list blobs with the Azure portal to upload the nevis.html file in place of customize-ui.html to your Azure blob storage. The Azure Blob storage account is created outside of the B2C Tenant because it is separate from the Azure Cloud.
  7. Follow the instructions in Enabling CORS for Azure Storage to enable Cross-Origin Resource Sharing for this file.
  8. Once the upload is complete and CORS is enabled, click the nevis.html file in the list.
  9. In the Overview tab, next to the URL, click the copy link icon.
  10. Open the link in a new browser tab to make sure it displays a grey box.
  11. Note down the blob link for later use.
Verification

The setup of the blob and CORS may be a little tricky. The following screenshots help you with the verification.

Cors Setup
Test the CORS configuration according to the instructions from Microsoft. The settings should look similar to the following screenshot.

Cors Setup
Blob URL
You can find the copy URL link on the following screen.

Blob URL
Test Blob URL
Accessing the Blob URL directly, in our example, `https://nevisui.blob.core.windows.net/nevisqrui/nevis.html`, loads a page with a grey box like in the following screenshot.

Test Blob URL