Power BI in Angular einbetten
In der modernen IT fallen immer größere Datenmengen an. Microsoft PowerBi bietet eine Vielzahl von Möglichkeiten, um diese Datenmengen zu analysieren und den Benutzern eine visuelle Darstellung zu ermöglichen. Um Benutzern diese Reports auch außerhalb von PowerBi – zum Beispiel in einer Anwendung, die sie ohnehin benutzen – zur Verfügung zu stellen, bietet PowerBi die Möglichkeit, Reports einzubetten. Diesen Aspekt beleuchten wir in diesem Beitrag.
Anwendungsregistierung
Für das weitere Vorgehen ist eine Anwendungsregistrierung in Azure erforderlich. Es handelt sich bei diesem Projekt um eine Webanwendung mit Benutzerlogin. Die Konfiguration muss folgendes enthalten:
Umleitungs-URI: Die URL der Seite auf die Sie diese Anwendung später Bereitstellen. Während der Entwicklung auch localhost(mit Port).
Kontotypen: Nur innerhalb des eigenen Organisationsverzeichnis.
Implizite Gewährung: Zugriffstoken und ID-Token
Abmelde-URL: Die URL der Seite auf die Sie diese Anwendung später Bereitstellen. Während der Entwicklung auch localhost(mit Port).
Clientschlüssel: nicht erforderlich, weil wir eine Benutzerspezifische Anmeldung nutzen
API-Berechtigungen: Microsoft.Graph – User.Read
PowerBI Freigabe
Jeder Benutzer, der später auf diesen Report zugreifen soll, muss in PowerBi freigegeben sein. Hierzu öffnen Sie den Report und wählen sie „Freigeben“:
Anschließend tragen Sie die Personen ein, welche eine Freigabe erhalten sollen.
Entwicklung
In dieser Anleitung verwenden wir eine Angular Seite mit Microsofts ADAL für die Authentifizierung.
Anlegen des Projekts
Zunächst legen wir mithilfe des Visual Studio 2019 ein neues Projekt an. Hierfür wählen wir die Projektart „ASP.NET Core Web Application“ und anschließend „Angular“.
Authentifizierung mit Microsoft ADAL
Für die Authentifizierung nutzen wir das npm Paket „microsoft-adal-angular6“. In diesem Tutorial benutzen wir eine statische Einrichtung des ADAL Paketes. Wenn Sie eine konfigurierbare Variante benötigen, finden Sie mehr Informationen dazu hier: https://devblogs.microsoft.com/premier-developer/angular-how-to-microsoft-adal-for-angular-6-with-configurable-settings/
Tragen Sie zunächst diese Pakete in der package.json ein.
"dependencies": {
…
"microsoft-adal-angular6": "1.3.0",
"powerbi-client": "2.10.4",
…
}
Nun wechseln wir in die Datei app.module.ts und richten die Authentifizierung ein:
1. //Importieren der Authentifizierungsmodule
2. import { MsAdalAngular6Module } from 'microsoft-adal-angular6';
3. import { AuthenticationGuard } from 'microsoft-adal-angular6';
4.
5. @NgModule({
6. declarations: [
7. …
8. ],
9. imports: [
10. BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
11.
12. //Konfiguration der Authentifizierung.
13. MsAdalAngular6Module.forRoot({
14. tenant: 'XXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXX',
15. clientId: 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXX',
16. redirectUri: window.location.origin,
17. endpoints: {
18. "powerBi": "https://analysis.windows.net/powerbi/api"
19. },
20. navigateToLoginRequestUrl: false,
21. cacheLocation: 'localStorage',
22. }),
23.
24. HttpClientModule,
25. FormsModule,
26. //Im RouterModule den AuthenticationGuard für die geschützten Routen eintragen.
27. RouterModule.forRoot([
28. { path: '', component: HomeComponent, pathMatch: 'full', canActivate: [AuthenticationGuard] },
29. { path: '*', component: HomeComponent, canActivate: [AuthenticationGuard]},
30. ]),
31. …
32. ],
33. providers: [AuthenticationGuard],
34. bootstrap: [AppComponent]
35. })
36. export class AppModule { }
Einbetten des Reports
Nach erfolgreicher Authentifizierung fehlt nur noch das eigentliche Einbetten des Reports. Dies führen wir exemplarisch in der HomeComponent durch.
home.component.html
<div [ngStyle]=“{‚height‘:iframeHeight+’px‘ ,’width‘:iframeWidth +’px‘}“ #reportContainer></div>
1. import { Component, ViewChild, ElementRef, OnInit, HostListener } from '@angular/core';
2. import { MsAdalAngular6Service } from "microsoft-adal-angular6";
3. import * as pbi from 'powerbi-client';
4.
5. @Component({
6. selector: 'app-home',
7. templateUrl: './home.component.html',
8. })
9. export class HomeComponent implements OnInit {
10.
11. //Diese Attribute nutzen wir für das Skalieren bei Änderung der Fenstergröße
12. public iframeHeight: number;
13. public iframeWidth: number;
14.
15. //Dies ist das div element welches unseren Report Einbetten wird
16. @ViewChild('reportContainer', { static: true }) reportContainer: ElementRef;
17.
18. //groupId und reportId können aus dem PowerBi entnommen werden
19. private groupId = "b1b7dc64-ef47-4800-ba8c-677fd97c17d9";
20. private reportId = "abd3cb51-b0e0-4b51-a5b8-4a2c8fe6a6c1";
21. public powerBiBaseUrl = "https://app.powerbi.com/";
22.
23. constructor(private adalSvc: MsAdalAngular6Service) {
24. }
25.
26. ngOnInit() {
27. this.iframeHeight = window.innerHeight-57;
28. this.iframeWidth = window.innerWidth;
29.
30. //mit acquireToken beschaffen wir uns den Zugriffstoken um auf den Report zugreifen zu können.
31. this.adalSvc.acquireToken('powerBi').subscribe((resToken: string) => {
32. this.showReport(resToken)
33. });
34.
35. }
36.
37. //Diese Methode dient der Skalierung bei Änderungen der Fenstergröße
38. @HostListener('window:resize', ['$event'])
39. onResize(event) {
40. this.iframeHeight = event.target.innerHeight-57;
41. this.iframeWidth = event.target.innerWidth;
42. }
43.
44. //Diese Methode ist für das eigentliche Einbetten zuständig
45. showReport(accessToken) {
46.
47. let embedUrl = this.powerBiBaseUrl + "reportEmbed?reportId=" + this.reportId + "&groupId=" + this.groupId;
48. //Die Konfiguration der Einbettung. Wir arbeiten im Kontext des Benutzers und mit seinen Rechten durch den Zugriffstoken.
49. let config = {
50. type: 'report',
51. accessToken: accessToken,
52. embedUrl: embedUrl,
53. id: this.reportId,
54. settings: {}
55. };
56. //Der Div Container der unsere Einbettung tragen wird
57. let reportContainer = this.reportContainer.nativeElement;
58.
59. //PowerBi Interne Methoden die die Einbettung durchführen.
60. let powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory);
61. let report = powerbi.embed(reportContainer, config);
62. report.off("loaded");
63. report.on("loaded", () => {
64. console.log("Loaded");
65. });
66. report.on("error", (e) => {
67. //Im Falle eines Fehlers loggen wir dies in die Browser Konsole
68. console.error(e);
69. });
70. }
71.
72. }
Nun ist die Einbettung erfolgreich und Sie können die Anwendung im Debugger starten.
Die Benutzer arbeiten mit denselben Rechten, die Sie auch im PowerBi haben. Hierdurch können Sie zum Beispiel den Zugriff auf bestimmte Datenzeilen pro Benutzer weiter einschränken.
Sollten Sie nach dem Einbetten folgendes Fehlerbild haben:
… so fehlen dem eingeloggten Benutzer aller Wahrscheinlichkeit nach die benötigten Rechte im PowerBi.
Mit der Einbettung von PowerBi Reports können Sie den Benutzern die Daten dort zur Verfügung stellen, wo Sie arbeiten.