Schritt-für-Schritt: Eine sichere Ionic Angular Authentifizierung mit EntraID (Azure) in Ihre Android App integrieren

Willkommen! In dieser detaillierten Anleitung zeigen wir Ihnen, wie Sie die Authentifizierung über EntraID (ehemals Azure Active Directory) in Ihre Ionic Angular Android-App integrieren. Die Integration von EntraID bietet eine sichere und robuste Möglichkeit, Benutzer zu authentifizieren und den Zugriff auf Ihre App zu verwalten. Dieser Artikel richtet sich an Entwickler mit Grundkenntnissen in Ionic, Angular und Azure.

Warum EntraID für Ihre Ionic Angular App?

EntraID bietet zahlreiche Vorteile gegenüber traditionellen Authentifizierungsmethoden:

• Zentrale Benutzerverwaltung: Verwalten Sie Benutzer und deren Berechtigungen zentral über das Azure Portal.
• Erhöhte Sicherheit: Profitieren Sie von den Sicherheitsfunktionen von Azure, wie z.B. Multi-Faktor-Authentifizierung (MFA).
• Single Sign-On (SSO): Benutzer können sich einmal anmelden und auf mehrere Anwendungen zugreifen.
• Compliance: Erfüllen Sie Compliance-Anforderungen, indem Sie die Identitätsverwaltung von Azure nutzen.

Voraussetzungen

Bevor wir beginnen, stellen Sie sicher, dass Sie die folgenden Voraussetzungen erfüllen:

• Ein aktives Azure-Abonnement.
• Ein Ionic Angular-Projekt (funktionsfähig und bereit).
• Node.js und npm (oder yarn) installiert.
• Android Studio installiert (für die Erstellung der Android-App).
• Grundlegendes Verständnis von Ionic Angular und TypeScript.

Schritt 1: Erstellen Sie eine App-Registrierung in EntraID

Der erste Schritt besteht darin, eine App-Registrierung in EntraID zu erstellen. Diese Registrierung repräsentiert Ihre Ionic Angular-App in Azure.

1. Melden Sie sich im Azure Portal an (portal.azure.com).
2. Suchen Sie nach „Azure Active Directory” (oder jetzt „Entra ID”).
3. Wählen Sie „App-Registrierungen” und klicken Sie auf „Neue Registrierung”.
4. Geben Sie einen Namen für Ihre App ein (z.B. „Ionic EntraID App”).
5. Wählen Sie den Kontotyp aus (z.B. „Konten in dieser Organisationsverzeichnis nur”).
6. Konfigurieren Sie die Umleitungs-URI (Redirect URI). Dies ist die URL, zu der EntraID den Benutzer nach der Authentifizierung zurückleitet. Für eine Ionic Angular-App, die auf Android läuft, verwenden Sie typischerweise einen benutzerdefinierten Schema wie: myapp://callback (Ersetzen Sie `myapp` durch ein für Ihre App spezifisches Schema). Wählen Sie den Platform-Typ „Public client (Mobile & Desktop)” und geben Sie die Callback URI ein.
7. Klicken Sie auf „Registrieren”.

Notieren Sie sich die Anwendungs-ID (Client) und die Verzeichnis-ID (Tenant). Diese Werte benötigen Sie später in Ihrer Ionic Angular-App.

Schritt 2: Installieren Sie die erforderlichen Cordova-Plugins

Um mit EntraID auf einem Android-Gerät zu interagieren, benötigen Sie Cordova-Plugins. Wir werden das cordova-plugin-msal Plugin verwenden, das eine einfache Integration mit EntraID ermöglicht.

ionic cordova plugin add cordova-plugin-msal --variable APP_ID="YOUR_APPLICATION_ID" --variable AUTHORITY="https://login.microsoftonline.com/YOUR_DIRECTORY_ID"
npm install @ionic-native/msal

Ersetzen Sie YOUR_APPLICATION_ID durch die Anwendungs-ID (Client) und YOUR_DIRECTORY_ID durch die Verzeichnis-ID (Tenant), die Sie im vorherigen Schritt notiert haben.

Schritt 3: Konfigurieren Sie Ihre Ionic Angular App

Jetzt müssen Sie Ihre Ionic Angular-App konfigurieren, um das cordova-plugin-msal Plugin zu verwenden. Importieren Sie das MSAL Plugin in Ihre App Module (app.module.ts).

import { MSAL } from '@ionic-native/msal/ngx';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, MSAL],
  bootstrap: [AppComponent],
})
export class AppModule {}

Als Nächstes erstellen Sie einen Service, der die Authentifizierungslogik kapselt. Dies hilft, Ihren Code sauber und wartbar zu halten. Erstellen Sie beispielsweise einen Service namens „auth.service.ts”:

import { Injectable } from '@angular/core';
import { MSAL } from '@ionic-native/msal/ngx';
import { Platform } from '@ionic/angular';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  private clientId = 'YOUR_APPLICATION_ID'; // Ersetzen
  private authority = 'https://login.microsoftonline.com/YOUR_DIRECTORY_ID'; // Ersetzen
  private redirectUri = 'myapp://callback'; // Ersetzen
  private scopes = ['User.Read'];
  public accessToken: string | null = null;

  constructor(private msal: MSAL, private platform: Platform) {
    this.platform.ready().then(() => {
      this.msal.init(this.clientId, this.authority, this.redirectUri)
        .then(() => console.log('MSAL is ready'))
        .catch(error => console.error('MSAL init error: ', error));
    });
  }

  async login(): Promise {
    try {
      const response = await this.msal.login(this.scopes);
      this.accessToken = response.accessToken;
      console.log('Access Token:', this.accessToken);
      // Speichern Sie den Access Token sicher (z.B. mit Secure Storage)
    } catch (error) {
      console.error('Login error: ', error);
    }
  }

  async logout(): Promise {
    try {
      await this.msal.logout();
      this.accessToken = null;
      console.log('Logged out');
    } catch (error) {
      console.error('Logout error: ', error);
    }
  }

  isAuthenticated(): boolean {
    return !!this.accessToken;
  }
}

Ersetzen Sie YOUR_APPLICATION_ID, YOUR_DIRECTORY_ID und myapp://callback durch Ihre entsprechenden Werte. Achten Sie darauf, den Access Token nach dem Login sicher zu speichern. Verwenden Sie hierfür beispielsweise @ionic-native/secure-storage.

Schritt 4: Verwenden Sie den Authentifizierungsdienst in Ihren Komponenten

In Ihren Ionic Angular-Komponenten können Sie nun den Authentifizierungsdienst verwenden, um Benutzer anzumelden und abzumelden.

import { Component } from '@angular/core';
import { AuthService } from './auth.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(public authService: AuthService) {}

  login() {
    this.authService.login();
  }

  logout() {
    this.authService.logout();
  }

  isAuthenticated(): boolean {
    return this.authService.isAuthenticated();
  }

}

In Ihrer HTML-Vorlage (home.page.html) können Sie Schaltflächen hinzufügen, um die Anmelde- und Abmeldefunktionen aufzurufen.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Ionic Blank</ion-title>
    </ion-toolbar>
  </ion-header>

  <div id="container">
    <strong>Ready to create an app?</strong>
    <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
    <ion-button *ngIf="!isAuthenticated()" (click)="login()">Login with EntraID</ion-button>
    <ion-button *ngIf="isAuthenticated()" (click)="logout()">Logout</ion-button>
    <p *ngIf="isAuthenticated()">Authenticated!</p>
  </div>
</ion-content>

Schritt 5: Erstellen Sie Ihre Android-App

Um Ihre Ionic Angular-App in eine Android-App zu erstellen, führen Sie die folgenden Befehle aus:

ionic cordova platform add android
ionic cordova build android

Sie können die erstellte APK-Datei dann auf Ihrem Android-Gerät installieren oder im Play Store veröffentlichen.

Wichtige Hinweise und Fehlerbehebung

• Berechtigungen: Stellen Sie sicher, dass Ihre App die erforderlichen Berechtigungen hat, um auf das Internet zuzugreifen.
• Redirect URI: Die Redirect URI in Ihrer App-Registrierung muss genau mit der in Ihrer App konfigurierten übereinstimmen.
• CORS: Wenn Sie auf Ressourcen zugreifen, die CORS-Richtlinien verwenden, müssen Sie diese entsprechend konfigurieren.
• Platform-spezifische Konfiguration: Achten Sie darauf, dass die Konfiguration für Android korrekt ist.
• Sichere Speicherung des Access Tokens: Verwenden Sie immer Secure Storage (z.B. @ionic-native/secure-storage) um den Access Token zu speichern.

Zusammenfassung

In diesem Artikel haben wir Ihnen gezeigt, wie Sie die Authentifizierung über EntraID in Ihre Ionic Angular Android-App integrieren. Durch die Nutzung von EntraID können Sie eine sichere und robuste Authentifizierungslösung erstellen, die sich einfach verwalten und skalieren lässt. Denken Sie daran, die Best Practices für die Sicherheit zu befolgen und die erforderlichen Berechtigungen sorgfältig zu konfigurieren. Viel Erfolg!