Google Login mit Blazor Server

In diesem Tutorial zeige ich wie man eine Blazor Server Anwendung um eine Google Login erweitert. Damit wird der Login Prozess für Nutzer mit einem Google Konto wesentlich einfacher. Die Implementierung im Detail.

Google Login mit Blazor Server

Das Login ist der erste Schritt zur Kundenbindung und ohne die passende Methode für den potentiellen Kunden verliert man diesen möglicherweise schon bevor er die App überhaupt getestet hat. Viele Nutzer haben nicht die Geduld sich über eine Email Adresse anzumelden oder wollen diese aus Angst vor Spam nicht hergeben. Login Services von 3rd Party Anbietern wie Google, Facebook, Microsoft, uvm. bieten eine simple Möglichkeit autorisiert und authentifiziert zu werden. Je eher man die präferierte Methode des potentiellen Kunden anbietet, desto eher wird er diese auch nutzen. Google ist dabei vermutlich die meist genutzte Plattform.

Google Sign-In konfigurieren

Der Weg zu einer Google basierten Anmeldung startet auf der Google Sign-In Seite. Auf dieser Informationsseite findet man alle nötigen Informationen und ein nettes Video, dass die Funktion erklärt. Über folgenden Link erstellt man neue Anmeldedaten für die Blazor Server App. Sofern man noch kein Projekt hat einfach ein Projekt mit dem Namen der App erstellen. Danach müssen Anmeldedaten erstellt werden:

Im DropDown wählt man OAuth-Client ID und füllt die nächsten Felder entsprechend der App aus. In meinem Fall ist das eine Webanwendung. Pro App vergibt man einen aussagekräftigen Namen, für Testzwecke habe ich nur BlazorServerApp genommen. Für die URIs habe ich die Adresszeile vom lokal laufenden IIS Express genommen, das muss spätestens wenn die App auf einem Server läuft angepasst werden!

Hat alles funktioniert wird ein neuer Eintrag für diese App in der Übersicht angelegt und eine Dialogbox gibt eine Client ID und einen Key zurück. Diese müssen wir in der App verwenden.

Blazor Server App konfigurieren

Über den NuGet Paketmanager fügt man der Blazor Server App die Middleware für Google Authentication (Microsoft.AspNetCore.Authentication.Google) hinzu.

Die erstellte Client Id und das Passwort kann man in einer .NET Core App sehr gut über die „Geheime Benutzerschlüssel verwalten“ Funktion speichern. Dazu wählt man diesen Punkt vom Kontextmenü
des Projekts:

In der nun neu erstellten secrets.json Datei finden die beiden Informationen einen sicheren Platz:

Damit die Middleware mit den Daten der Client Id und dem Passwort arbeiten kann wird in der StartUp.cs Datei in der ConfigureServices Methode folgender Code hinzugefügt:

services.AddAuthentication().AddGoogle(googleOptions =>
{
    googleOptions.ClientId = Configuration["Authentication:Google:ClientId"];
    googleOptions.ClientSecret = Configuration["Authentication:Google:ClientSecret"];
});

Test

Startet man nun die App, dann wird auf der Login Seite neben  dem Standard Login über E-Mail und Passwort ein Button für das Google Login angezeigt. Der Bereich für die anderen Log-In Services ist noch recht leer, weshalb es Sinn macht nun weitere Dienste anzubinden. Eine erfolgreiche Registrierung quittiert die App nun so:

Und auf der Login Seite steht ein Button für Google bereit:

Sollte man wider erwarten auf ein Problem stoßen, dann ist die Dokumentation von Microsoft die erste Anlaufstelle. Es kann sich bei neuen .NET Versionen beziehungsweise auf Seiten von Google jederzeit etwas am Registrierungsprozess oder der Einbindung ändern.

Fazit

Mit dem Google Login wird die Nutzung der Blazor Server App für potentielle Kunden interessanter. Oft schreckt die Registrierung über eine E-Mail ab. OAuth Logins sind der aktuelle Stand der Technik und je nach präferiertem Service sollten dem Nutzer möglichst viele Login Methoden angeboten werden. Ich habe gezeigt wie einfach das mit Google geht.