Integrating Okta with Azure Web Apps and Power BI Embedding

Overview

This guide provides a comprehensive approach to integrating Okta with Azure Web Apps and embedding Power BI reports into a web application. Authentication is managed via Okta, and Power BI reports are embedded using React and Django, hosted on Azure.

Authentication Flow with Okta:

User Access Request: The user attempts to access a web application, triggering the need for authentication.
Redirection to Okta: The web app redirects the user to Okta, which handles the authentication, typically with Active Directory (AD) as the identity source.
Okta Authentication: The user submits credentials (username and password). If MFA is enabled, Okta prompts for additional verification (e.g., SMS, app-based token).
Authorization with AD Groups: Okta checks the user's group memberships in AD to determine which parts of the application they are authorized to access.
SAML Assertion: If authentication and group checks pass, Okta generates a SAML assertion (a digitally signed document), containing the user’s identity and group information.
Web App Validates Assertion: The web app (typically Django) validates the SAML assertion using a SAML library, ensuring it is genuine.
Access Granted: After validation, the app creates a session for the user, granting access to the web app and other resources, such as embedded Power BI reports.

Embedding Power BI Reports

The following steps describe the process of embedding Power BI reports into a React and Django web app hosted on Azure, using Azure AD for authentication.

Prerequisites:

Power BI Pro account.
Azure AD for authentication.
React frontend and Django backend hosted on Azure.

Steps:

1. Register an Application in Azure AD:

Create an application in Azure AD to authenticate and allow access to Power BI resources.
Obtain the client ID and secret from Azure AD to authenticate the application.

2. Configure API Permissions:

In Azure AD, grant your app permissions (e.g., Report.Read.All, Dataset.Read.All) to access Power BI resources.

3. Implement Authentication in Django Backend:

Use the Microsoft Authentication Library (MSAL) to obtain an access token from Azure AD, allowing the app to call Power BI REST APIs.

import msal
def acquire_access_token():
    client_id = 'YOUR_CLIENT_ID'
    client_secret = 'YOUR_CLIENT_SECRET'
    tenant_id = 'YOUR_TENANT_ID'
    app = msal.ConfidentialClientApplication(
        client_id=client_id, 
        client_credential=client_secret,
        authority=f'https://login.microsoftonline.com/{tenant_id}'
    )
    result = app.acquire_token_for_client(scopes=['https://analysis.windows.net/powerbi/api/.default'])
    return result.get('access_token')

4. Fetch Power BI Embed Details:

Fetch the embed URL and generate the token using the Power BI REST API. This allows you to embed Power BI reports into the React frontend.

def get_report_details(access_token, workspace_id, report_id):
    url = f'https://api.powerbi.com/v1.0/myorg/groups/{workspace_id}/reports/{report_id}'
    headers = {'Authorization': f'Bearer {access_token}'}
    response = requests.get(url, headers=headers)
    return response.json()

5. Setting Up CORS in Django:

To enable communication between the Django backend and the React frontend, configure CORS (Cross-Origin Resource Sharing) in Django:

Install django-cors-headers and add it to the installed apps and middleware.
Define allowed origins in settings.py:

CORS_ALLOWED_ORIGINS = ['http://localhost:3000']  # Replace with your frontend URL

6. Embedding Power BI in React:

Install Power BI Client Library: Use npm install powerbi-client to install the library needed for embedding Power BI reports.
Create React Component: The component fetches the embed details from the Django backend and renders the Power BI report.

import React, { useEffect, useRef } from 'react';
import { models } from 'powerbi-client';
import * as powerbi from 'powerbi-client';

const PowerBIReport = () => {
    const reportRef = useRef(null);

    useEffect(() => {
        fetch('/api/get-embed-info/')
            .then(response => response.json())
            .then(data => {
                const { embedUrl, embedToken } = data;
                const config = {
                    type: 'report',
                    embedUrl: embedUrl,
                    accessToken: embedToken,
                    tokenType: models.TokenType.Embed,
                    settings: {
                        panes: { filters: { visible: false }, pageNavigation: { visible: false } }
                    }
                };
                powerbi.embed(reportRef.current, config);
            });
    }, []);

    return ;
};

export default PowerBIReport;

7. Securing Environment Variables on Azure:

Use Azure Key Vault or environment variables in Azure App Service to securely store sensitive information like client secrets.

8. Deploying the Applications on Azure:

Django Backend: Deploy using Azure App Service or Azure Web Apps, ensuring that environment variables are set up correctly.
React Frontend: Deploy using Azure Static Web Apps or serve the React build through Django.

9. Testing and Error Handling:

Ensure that the Power BI reports render correctly, and user authentication flows smoothly.
Implement error handling in Django and React components to manage token expiry, incorrect permissions, and other potential issues.

Key Concepts in Okta Integration:

Okta as Identity Provider (IdP): Okta authenticates users and provides identity information via SAML to the web app (Service Provider or SP).
SAML Assertions: Digital "passports" that Okta generates to confirm a user's identity and access rights, allowing the web app to authenticate the user.

Security and Licensing Considerations:

Licensing : Ensure users accessing Power BI reports have the appropriate Power BI Pro or Premium licenses.
Security Best Practices: Never expose sensitive information like client secrets in frontend code. Always use HTTPS for communication.
Row-Level Security (RLS): Leverage Okta's AD group memberships to implement RLS in Power BI, allowing report filtering based on user identity.

Conclusion

By following this guide, you can successfully embed Power BI reports into a React and Django web app hosted on Azure, leveraging Okta for secure user authentication and authorization. This setup allows seamless integration between enterprise identity management, cloud-hosted applications, and advanced data visualization via Power BI.

Sample Code Snippets

Python - Token Acquisition

import msal

def acquire_access_token():
    client_id = 'YOUR_CLIENT_ID'
    client_secret = 'YOUR_CLIENT_SECRET'
    tenant_id = 'YOUR_TENANT_ID'
    app = msal.ConfidentialClientApplication(
        client_id=client_id, 
        client_credential=client_secret,
        authority=f'https://login.microsoftonline.com/{tenant_id}'
    )
    result = app.acquire_token_for_client(scopes=['https://analysis.windows.net/powerbi/api/.default'])
    return result.get('access_token')

Python - Fetch Power BI Embed Details

def get_report_details(access_token, workspace_id, report_id):
    url = f'https://api.powerbi.com/v1.0/myorg/groups/{workspace_id}/reports/{report_id}'
    headers = {'Authorization': f'Bearer {access_token}'}
    response = requests.get(url, headers=headers)
    return response.json()

JavaScript - Embedding Power BI in React

import React, { useEffect, useRef } from 'react';
import { models } from 'powerbi-client';
import * as powerbi from 'powerbi-client';

const PowerBIReport = () => {
    const reportRef = useRef(null);

    useEffect(() => {
        fetch('/api/get-embed-info/')
            .then(response => response.json())
            .then(data => {
                const { embedUrl, embedToken } = data;
                const config = {
                    type: 'report',
                    embedUrl: embedUrl,
                    accessToken: embedToken,
                    tokenType: models.TokenType.Embed,
                    settings: {
                        panes: { filters: { visible: false }, pageNavigation: { visible: false } }
                    }
                };
                powerbi.embed(reportRef.current, config);
            });
    }, []);

    return ;
};

export default PowerBIReport;

Python - Setting Up CORS in Django

INSTALLED_APPS = [
    # ...
    'corsheaders',
    # ...
]

MIDDLEWARE = [
    # ...
    'corsheaders.middleware.CorsMiddleware',
    # ...
]

CORS_ALLOWED_ORIGINS = [
    'http://localhost:3000',  # Replace with your frontend URL
]