Einfache Authentifizierung mit Individual Accounts

Da Datenschutz in der heutigen Zeit immer wichtiger wird, benötigen Apps häufig eine Authentifizierungsmöglichkeit. In diesem Artikel wird dargestellt, wie Sie in wenigen Schritten eine einfache Authentifizierung für Ihre App einrichten können. Als Beispiel dient eine Blazor Server App, um den Prozess so einfach wie möglich zu halten.

‍

Schritt 1: Blazor Server App erstellen

Starten Sie Visual Studio und klicken Sie auf „Create a new project“. Wählen Sie im nächsten Fenster die „Blazor Server App“ aus.

‍

‍

Schritt 2: Projektdetails angeben

Geben Sie die Informationen zu Ihrer Location, Solution und den Projektnamen ein und klicken Sie auf „Weiter“.

‍

‍

Schritt 3: Authentifizierungstyp wählen

Im nächsten Fenster öffnen Sie das Dropdown-Menü unter „Authentication type“. In der Blazor Server App stehen Ihnen drei Authentifizierungstypen zur Auswahl, während dies in der Blazor Web App nicht möglich ist. Wir konzentrieren uns hier auf „Individual Accounts“. Wählen Sie diesen Authentifizierungstyp aus, fügen Sie die gewünschten Spezifikationen für Ihre App hinzu und klicken Sie auf „Create“.

‍

‍

Schritt 4: Datenbank erstellen

Ihre Blazor Server App wurde nun erstellt. Erstellen Sie eine Datenbank, indem Sie mit einem Rechtsklick auf Ihre Solution klicken. Wählen Sie „Add“ und dann „New Project“. Im nächsten Fenster wählen Sie „SQL Server Database Project“ aus, geben den Namen Ihrer Datenbank ein und klicken auf „Create“.

‍

‍

Schritt 5: Datenbank veröffentlichen

Veröffentlichen Sie Ihre Datenbank mit einem Rechtsklick auf die Datenbank und wählen Sie „Publish“. Geben Sie die Daten Ihrer Datenbank an und passen Sie anschließend in der appsettings.json den ConnectionString an. Speichern Sie die Änderungen.

‍

1{
2  "ConnectionStrings": {
3    // Geben Sie die Daten Ihrer Datenbank an
4    "DefaultConnection": "YourDatabaseConnectionStringHere"
5  },
6  "Logging": {
7    "LogLevel": {
8      "Default": "Information",
9      "Microsoft.AspNetCore": "Warning"
10    }
11  },
12  "AllowedHosts": "*"
13}

‍

Schritt 6: Vorbereitete Migrations und Pages

Visual Studio hat in der Solution bereits Migrations und Pages für die Registrierung, den Login- und Logout-Prozess angelegt.

‍

‍

Schritt 7: Datenbank aktualisieren

Öffnen Sie die Package Manager Console in Visual Studio und führen Sie den Befehl „Update-Database“ aus.

‍

1Each package is licensed to you by its owner. NuGet is not responsible for any 
2additional licenses. Follow the package source (feed) URL to determine any dependencies.
3
4Package Manager Console Host Version 6.9.2.1
5
6Type 'get-help NuGet' to see all available NuGet commands.
7
8PM> Update-Database

‍

Schritt 8: Datenbanktabellen hinzufügen

Der Datenbank wurden nun neue Tabellen hinzugefügt.

‍

‍

Schritt 9: App starten und Registrierung durchführen

Starten Sie die App und klicken Sie oben rechts auf „Register“, um den Registrierungsvorgang durchzuführen.

‍

Schritt 10: Änderungen an der App vornehmen

Um die Möglichkeiten der „Individual Accounts“ zu demonstrieren, führen wir noch einige Änderungen in der App durch. Öffnen Sie „Counter.razor“ unter „Pages“.

‍

‍

Schritt 11: Code-Anpassungen

Ändern Sie den Code wie folgt:

• Nicht eingeloggte Benutzer sehen den „NotAuthorized“-Bereich.
• Eingeloggte Benutzer sehen den „Authorized“-Bereich.

‍

<AuthorizeView>
    <Authorized>
        <h1>Hello World</h1>
    </Authorized>
    
    <NotAuthorized>
        <h1>Counter</h1>
        <p role="status">Current count: @currentCount</p>
        <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
    </NotAuthorized>
</AuthorizeView>

<PageTitle>Counter</PageTitle>

‍

NotAuthorized in Counter.razor

‍

‍

Authorized in Counter.razor

‍

‍