Intégration d'un tableau de bord Power BI : une solution sécurisée et simple

L'intégration de tableaux de bord Power BI dans une application Web constitue un moyen puissant de partager des informations en toute sécurité avec les utilisateurs. Dans ce tutoriel, je vais vous guider à travers les étapes pour mettre en place une solution de base utilisant Express pour le backend et React pour le frontend, tout en couvrant les configurations essentielles dans Azure et Power BI.

1. Configurations dans Azure

Pour intégrer des rapports Power BI, vous devez enregistrer une application dans Azure Active Directory :

1. Enregistrer une candidature :

   • Accédez au portail Azure → Azure Active Directory → Inscriptions d'applications → Nouvelle inscription.
   • Entrez un nom (par exemple, "PowerBIEmbedApp") et définissez l'URI de redirection sur l'URL de base de votre interface.

2. Autorisations API :

   • Ajouter des autorisations pour le service Power BI (délégué et application).
   • Accordez le consentement de l'administrateur pour les autorisations.

3. Secret client :

   • Créez un nouveau secret client sous Certificats et secrets.
   • Notez l'ID d'application (client), l'ID de répertoire (locataire) et le Secret client.

2. Configurations dans Power BI

1. Activer la génération de jetons intégrés :

   • Connectez-vous au service Power BI → Portail d'administration → Paramètres du locataire.
   • Activez « Autoriser les principaux de service à utiliser les API Power BI ».

2. Attribuer l'accès à l'espace de travail :

   • Ajoutez le principal du service (application enregistrée) à l'espace de travail Power BI en tant qu'administrateur ou membre.

3. Obtenir les identifiants du tableau de bord/rapport :

   • Notez l'espace de travail, le tableau de bord et les ID de rapport du contenu que vous souhaitez intégrer.

3. Backend : configuration express

Le backend est chargé de générer un jeton intégré pour le tableau de bord.

Installer les dépendances :

npm install express axios dotenv

Code back-end :

const express = require('express');
const axios = require('axios');
const dotenv = require('dotenv');
dotenv.config();

const app = express();
app.use(express.json());

// Environment variables from .env
const {
  TENANT_ID,
  CLIENT_ID,
  CLIENT_SECRET,
  WORKSPACE_ID,
  REPORT_ID,
} = process.env;

const POWER_BI_AUTH_URL = `https://login.microsoftonline.com/${TENANT_ID}/oauth2/v2.0/token`;

app.get('/api/getEmbedToken', async (req, res) => {
  try {
    // Get Access Token
    const authResponse = await axios.post(POWER_BI_AUTH_URL, new URLSearchParams({
      grant_type: 'client_credentials',
      client_id: CLIENT_ID,
      client_secret: CLIENT_SECRET,
      scope: 'https://analysis.windows.net/powerbi/api/.default',
    }));

    const accessToken = authResponse.data.access_token;

    // Get Embed Token
    const embedResponse = await axios.post(
      `https://api.powerbi.com/v1.0/myorg/groups/${WORKSPACE_ID}/reports/${REPORT_ID}/GenerateToken`,
      { accessLevel: 'View' },
      { headers: { Authorization: `Bearer ${accessToken}` } }
    );

    res.json(embedResponse.data);
  } catch (error) {
    console.error(error.message);
    res.status(500).send('Error generating embed token');
  }
});

const PORT = 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

4. Frontend : configuration de React

Installer les dépendances :

npm install react powerbi-client axios

Code frontal :

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { PowerBIEmbed } from 'powerbi-client-react';

const Dashboard = () => {
  const [embedConfig, setEmbedConfig] = useState(null);

  useEffect(() => {
    const fetchEmbedToken = async () => {
      try {
        const response = await axios.get('http://localhost:5000/api/getEmbedToken');
        setEmbedConfig({
          type: 'report',
          tokenType: 1,
          accessToken: response.data.token,
          embedUrl: response.data.embedUrl,
          settings: { panes: { filters: { visible: false } } },
        });
      } catch (error) {
        console.error('Error fetching embed token:', error);
      }
    };
    fetchEmbedToken();
  }, []);

  if (!embedConfig) return <div>Loading...</div>;

  return (
    <PowerBIEmbed
      embedConfig={embedConfig}
      cssClassName="dashboard-embed"
    />
  );
};

export default Dashboard;

5. Étapes finales

• Exécutez le backend : node server.js.
• Exécutez le frontend : npm start (en supposant que Create React App ou une configuration similaire).
• Visitez votre application frontale pour voir le tableau de bord Power BI intégré.

Points à retenir

Cette configuration offre un moyen simple et sécurisé d’intégrer des tableaux de bord Power BI. Pour la production, pensez à :

• Stockage sécurisé des variables d'environnement sensibles (par exemple, à l'aide d'Azure Key Vault).
• Mise en œuvre d'une meilleure gestion et journalisation des erreurs.
• Sécurisation des routes API avec authentification/autorisation.

Pour plus d'informations, je vous invite à découvrir comment j'ai implémenté cela dans un scénario réel dans cet article. De plus, vous pouvez trouver l'implémentation en utilisant Next.js dans ce référentiel, adaptée à une pile moderne et évolutive.

N'hésitez pas à personnaliser cette solution en fonction des besoins de votre projet !

Merci d'avoir lu !! ??

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!