PowerBI API in WebAPI - How to call from UI with token

Hi, PowerBourn 
Thanks for reaching out to the Microsoft fabric community forum.

You can use the OAuth 2.0 Authorization Code Flow to obtain an access token. After the user logs in and grants authorization, Azure AD will return an authorization code. The front end uses this authorization code to request an access token from Azure AD:

1. Application registration details:

const clientCredentials = {
    client_id: "awesome_app_72910",
    client_secret: "8a7b4c2e9f3d6h5j8k1m",
    redirect_uri: "https://myawesomeapp.com/redirect",
    scope: "product.model.read"
};

2.Construct the authorization request:

class AuthorizationManager {
    constructor(credentials) {
        this.credentials = credentials;
        this.authEndpoint = 'https://auth.example.com/oauth/authorize';
    }

    generateAuthUrl() {
        const state = crypto.randomBytes(16).toString('hex');
        
        const params = new URLSearchParams({
            response_type: 'code',
            client_id: this.credentials.client_id,
            redirect_uri: this.credentials.redirect_uri,
            scope: this.credentials.scope,
            state: state
        });

        return `${this.authEndpoint}?${params.toString()}`;
    }
}

3.Handle the authorization callback:

pp.get('/redirect', async (req, res) => {
    try {
        // Validate the state parameter to prevent CSRF attacks
        if (req.query.state !== req.session.oauthState) {
            throw new Error('State parameter mismatch, potential CSRF attack');
        }

        // Exchange the authorization code for an access token
        const tokenResponse = await fetch('https://auth.example.com/oauth/token', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'Authorization': 'Basic ' + Buffer.from(
                    `${clientCredentials.client_id}:${clientCredentials.client_secret}`
                ).toString('base64')
            },
            body: new URLSearchParams({
                grant_type: 'authorization_code',
                code: req.query.code,
                redirect_uri: clientCredentials.redirect_uri
            })
        });

        const tokens = await tokenResponse.json();
        
        // Save the tokens
        await sessionManager.saveAuthTokens(req.session, tokens);
        
        // Redirect to the original page
        res.redirect(req.session.returnTo || '/');

    } catch (error) {
        console.error('Failed to handle authorization callback:', error);
        res.redirect('/error');
    }
});

Additionally, you may need to pay attention to token lifecycle management. Here are some relevant documentation screenshots that might be helpful to you:

Access tokens in the Microsoft identity platform - Microsoft identity platform | Microsoft Learn
Of course, if you have any new discoveries or questions, please feel free to get in touch with us.
 

Best Regards,

Leroy Lu

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.