Membenamkan papan pemuka Power BI dalam aplikasi web ialah cara yang berkesan untuk berkongsi cerapan dengan selamat dengan pengguna. Dalam tutorial ini, saya akan membimbing anda melalui langkah-langkah untuk menyediakan penyelesaian asas menggunakan Express untuk bahagian belakang dan React untuk bahagian hadapan, sambil meliputi konfigurasi penting dalam Azure dan Power BI.

1. Konfigurasi dalam Azure

Untuk membenamkan laporan Power BI, anda perlu mendaftarkan apl dalam Azure Active Directory:

1. Daftar Permohonan:

   • Pergi ke portal Azure → Azure Active Directory → Pendaftaran apl → Pendaftaran baharu.
   • Masukkan nama (cth., "PowerBIEmbedApp") dan tetapkan Ubah hala URI ke URL asas bahagian hadapan anda.

2. Kebenaran API:

   • Tambah kebenaran untuk Perkhidmatan Power BI (Diwakilkan dan Aplikasi).
   • Berikan kebenaran admin untuk kebenaran.

3. Rahsia Pelanggan:

   • Buat rahsia pelanggan baharu di bawah Sijil & rahsia.
   • Catat ID Aplikasi (pelanggan), ID Direktori (penyewa) dan Rahsia Pelanggan.

2. Konfigurasi dalam Power BI

1. Dayakan Penjanaan Token Benam:

   • Log masuk ke Perkhidmatan Power BI → Portal Pentadbiran → Tetapan Penyewa.
   • Dayakan "Benarkan pengetua perkhidmatan menggunakan API Power BI".

2. Tetapkan Akses Ruang Kerja:

   • Tambahkan prinsipal perkhidmatan (apl berdaftar) pada ruang kerja Power BI sebagai Pentadbir atau Ahli.

3. Dapatkan Dashboard/ID Laporan:

   • Catat ruang kerja, papan pemuka dan ID laporan kandungan yang ingin anda benamkan.

3. Bahagian Belakang: Persediaan Ekspres

Halaman belakang bertanggungjawab menjana token terbenam untuk papan pemuka.

Pasang kebergantungan:

npm install express axios dotenv

Kod Belakang:

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. Bahagian Hadapan: Persediaan React

Pasang kebergantungan:

npm install react powerbi-client axios

Kod Depan:

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. Langkah Akhir

• Jalankan bahagian belakang: pelayan nod.js.
• Jalankan bahagian hadapan: npm mula (dengan mengandaikan Cipta Apl Reaksi atau persediaan serupa).
• Lawati aplikasi bahagian hadapan anda untuk melihat papan pemuka Power BI yang dibenamkan.

Bawa pulang

Persediaan ini menyediakan cara yang selamat dan mudah untuk membenamkan papan pemuka Power BI. Untuk pengeluaran, pertimbangkan:

• Menyimpan pembolehubah persekitaran sensitif dengan selamat (cth., menggunakan Azure Key Vault).
• Melaksanakan pengendalian ralat dan pengelogan yang lebih baik.
• Melindungi laluan API dengan pengesahan/keizinan.

Untuk mendapatkan maklumat lanjut, saya menjemput anda untuk melihat cara saya melaksanakan ini dalam senario dunia sebenar dalam artikel ini. Selain itu, anda boleh mencari pelaksanaan menggunakan Next.js dalam repositori ini, disesuaikan dengan timbunan moden dan boleh skala.

Jangan ragu untuk menyesuaikan penyelesaian ini berdasarkan keperluan projek anda!

Terima kasih kerana membaca !! ??

Atas ialah kandungan terperinci Membenamkan Papan Pemuka Power BI: Penyelesaian yang Selamat dan Mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!