Einrichten der externen Facebook-Anmeldung in ASP.NET Core

Von Valeriy Novytskyy und Rick Anderson

In diesem Tutorial mit Codebeispielen wird veranschaulicht, wie Sie es Ihren Benutzern ermöglichen, sich mit ihrem Facebook-Konto mithilfe eines Beispielprojekts ASP.NET Core, das auf der vorherigen Seite erstellt wurde. Wir beginnen damit, eine Facebook-App-ID zu erstellen, indem wir die offiziellen Schritte ausführen.

Erstellen der App in Facebook

  • Fügen Sie dem Projekt das Paket Microsoft.AspNetCore.Authentication.Facebook NuGet hinzu.

  • Navigieren Sie zur App-Seite für Facebook-Entwickler, und melden Sie sich an. Wenn Sie noch nicht über ein Facebook-Konto verfügen, verwenden Sie den Link Für Facebook registrieren auf der Anmeldeseite, um ein Konto zu erstellen. Sobald Sie über ein Facebook-Konto verfügen, befolgen Sie die Anweisungen, um sich als Facebook-Entwickler zu registrieren.

  • Wählen Sie Meine Apps Menü App erstellen aus. Das Formular App erstellen wird angezeigt. Facebook for developers portal open in Microsoft Edge

  • Wählen Sie einen App-Typ aus, der am besten zu Ihrem Projekt passt. Wählen Sie für dieses Projekt Consumer unddann Weiter aus. Eine neue App-ID wird erstellt.

  • Füllen Sie das Formular aus, und tippen Sie auf die Schaltfläche App erstellen.

    Create a New App ID form

  • Wählen Sie auf der Seite Produkte zu Ihrer App hinzufügen auf derKarte Facebook-Anmeldung die Option Einrichten aus.

    Product Setup page

  • Der Schnellstart-Assistent wird mit Plattform auswählen als erste Seite gestartet. Umgehen Sie den Assistenten vorerster Zeit, indem Sie auf den Link facebook loginEinstellungen im Menü unten links klicken:

    Skip Quick Start

  • Die Seite Client-OAuth-Einstellungen wird angezeigt:

    Client OAuth Settings page

  • Geben Sie Ihren Entwicklungs-URI mit /signin-facebook in das Feld Valid OAuth Redirect URIs (Gültige OAuth-Umleitungs-URIs) ein (z.B. ). Die facebook-Authentifizierung, die später in diesem Tutorial konfiguriert wird, verarbeitet automatisch Anforderungen an der Route /signin-facebook, um den OAuth-Flow zu implementieren.

Hinweis

Der URI /signin-facebook wird als Standardrückruf des Facebook-Authentifizierungsanbieters festgelegt. Sie können den Standardrückruf-URI ändern, während Sie die Middleware für die Facebook-Authentifizierung über die geerbte RemoteAuthenticationOptions.CallbackPath-Eigenschaft der FacebookOptions-Klasse konfigurieren.

  • Klicken Sie auf Save changes (Änderungen speichern).

  • Wählen EinstellungenLink Basic im linken Navigationsbereich aus.

  • Notieren Sie sich und App IDApp Secret . Im nächsten Abschnitt fügen Sie beides ASP.NET Core Anwendung hinzu:

  • Beim Bereitstellen der Website müssen Sie die Setupseite für die Facebook-Anmeldung erneut besuchen und einen neuen öffentlichen URI registrieren.

Store der Facebook-App-ID und des Geheimnisses

Store einstellungen, z. B. die Facebook-App-ID und geheimniswerte mit Secret Manager. Führen Sie für dieses Beispiel die folgenden Schritte aus:

  1. Initialisieren Sie das Projekt für die Speicherung geheimer Schlüssel wie unter Aktivieren des Geheimnisspeichers.

  2. Store sie die sensiblen Einstellungen im lokalen Geheimnisspeicher mit den geheimen Schlüsseln Authentication:Facebook:AppId und Authentication:Facebook:AppSecret an:

    dotnet user-secrets set "Authentication:Facebook:AppId" "<app-id>"
    dotnet user-secrets set "Authentication:Facebook:AppSecret" "<app-secret>"
    

Das Trennzeichen : funktioniert nicht auf allen Plattformen mit den hierarchischen Schlüsseln von Umgebungsvariablen. Der doppelte Unterstrich __:

  • wird auf allen Plattformen unterstützt. Beispielsweise wird das : Trennzeichen nicht von :aber __ ist .
  • automatisch durch : ersetzt.

Konfigurieren der Facebook-Authentifizierung

Fügen Sie den Authentifizierungsdienst zu Startup.ConfigureServices hinzu:

services.AddAuthentication().AddFacebook(facebookOptions =>
{
    facebookOptions.AppId = Configuration["Authentication:Facebook:AppId"];
    facebookOptions.AppSecret = Configuration["Authentication:Facebook:AppSecret"];
});

Fügen Sie den Authentifizierungsdienst zu Program hinzu:

var builder = WebApplication.CreateBuilder(args);
var services = builder.Services;
var configuration = builder.Configuration;

services.AddAuthentication().AddFacebook(facebookOptions =>
    {
        facebookOptions.AppId = configuration["Authentication:Facebook:AppId"];
        facebookOptions.AppSecret = configuration["Authentication:Facebook:AppSecret"];
    });

Die AddAuthentication(String)-Überladung legt die DefaultScheme-Eigenschaft fest. Die Überladung AddAuthentication(Action AuthenticationOptions > ) ermöglicht das Konfigurieren von Authentifizierungsoptionen, die zum Einrichten von Standardauthentifizierungsschemas für verschiedene Zwecke verwendet werden können. Nachfolgende Aufrufe zum AddAuthentication Überschreiben zuvor konfigurierter AddAuthentication

AuthenticationBuilder-Erweiterungsmethoden, die einen Authentifizierungshandler registrieren, können pro Authentifizierungsschema nur einmal aufgerufen werden. Überladungen sind vorhanden, die das Konfigurieren der Schemaeigenschaften, des Schemanamens und des Anzeigenamens ermöglichen.

Anmelden mit Facebook

  • Führen Sie die App aus, und wählen Sie Anmelden aus.
  • Wählen Sie unter Anderen Dienst zum Anmelden verwenden.die Option Facebook aus.
  • Sie werden zur Authentifizierung an Facebook umgeleitet.
  • Geben Sie Ihre Facebook-Anmeldeinformationen ein.
  • Sie werden zurück zu Ihrer Website umgeleitet, wo Sie Ihre E-Mail-Adresse festlegen können.

Sie sind jetzt mit Ihren Facebook-Anmeldeinformationen angemeldet:

React zum Abbrechen der autorisierungsbasierten externen Anmeldung

AccessDeniedPath kann einen Umleitungspfad für den Benutzer-Agent bereitstellen, wenn der Benutzer den angeforderten Autorisierungsbedarf nicht genehmigt.

Der folgende Code legt den auf AccessDeniedPath"/AccessDeniedPathInfo" fest:

services.AddAuthentication().AddFacebook(options =>
{
    options.AppId = Configuration["Authentication:Facebook:AppId"];
    options.AppSecret = Configuration["Authentication:Facebook:AppSecret"];
    options.AccessDeniedPath = "/AccessDeniedPathInfo";
});

Es wird AccessDeniedPath empfohlen, dass die Seite die folgenden Informationen enthält:

  • Die Remoteauthentifizierung wurde abgebrochen.
  • Diese App erfordert eine Authentifizierung.
  • Klicken Sie auf den Link Anmeldung, um die Anmeldung erneut zu versuchen.

Testen von AccessDeniedPath

  • Navigieren Sie zu facebook.com
  • Wenn Sie angemeldet sind, müssen Sie sich abmelden.
  • Führen Sie die App aus, und wählen Sie Facebook-Anmeldung aus.
  • Wählen Sie Nicht jetzt aus. Sie werden zur angegebenen Seite AccessDeniedPath umgeleitet.

Weiterleiten von Anforderungsinformationen mit einem Proxy oder Lastenausgleich

Wenn die App hinter einem Proxyserver oder Lastenausgleich bereitgestellt wird, können einige der ursprünglichen Anforderungsinformationen im Anforderungsheader an die App weitergeleitet werden. Zu diesen Informationen gehören in der Regel das sichere Anforderungsschema (https), den Host und die Client-IP-Adresse. Apps lesen diese Anforderungsheader nicht automatisch, um die ursprünglichen Anforderungsinformationen zu ermitteln und zu verwenden.

Das Schema wird bei der Linkgenerierung verwendet, die den Authentifizierungsflow bei externen Anbietern betrifft. Der Verlust des sicheren Schemas (https) führt dazu, dass die App falsche unsichere Umleitungs-URLs generiert.

Verwenden Sie Middleware für weitergeleitete Header, um der App zur Anforderungsverarbeitung die Informationen der ursprünglichen Anforderung verfügbar zu machen.

Weitere Informationen finden Sie unter Konfigurieren von ASP.NET Core für die Arbeit mit Proxyservern und Lastenausgleichen.

Mehrere Authentifizierungsanbieter

Wenn die App mehrere Anbieter benötigt, verketten Sie die Erweiterungsmethoden für Anbieter hinter AddAuthentication:

services.AddAuthentication()
    .AddMicrosoftAccount(microsoftOptions => { ... })
    .AddGoogle(googleOptions => { ... })
    .AddTwitter(twitterOptions => { ... })
    .AddFacebook(facebookOptions => { ... });

Weitere Informationen zu konfigurationsoptionen, die von der Facebook-Authentifizierung unterstützt werden, finden Sie in der Referenz zur FacebookOptions-API. Konfigurationsoptionen können für:

  • Fordern Sie andere Informationen zum Benutzer an.
  • Fügen Sie Abfragezeichenfolgenargumente hinzu, um die Anmeldeerfahrung anzupassen.

Problembehandlung

  • ASP.NET Core 2.x: Wenn nicht durch Aufrufen von in konfiguriert wird, führt der Versuch der Authentifizierung services.AddIdentity zu ConfigureServicesservices.AddIdentitymuss bereitgestellt werden. Die Projektvorlage, die in diesem Tutorial verwendete wird sichergestellt, dass dies geschehen ist.
  • Wenn die Standortdatenbank nicht erstellt wurde, indem die ursprüngliche Migration anwenden, erhalten Sie Fehler bei ein Datenbankvorgang beim Verarbeiten der Anforderung Fehler. Tippen Sie auf Migrationen anwenden, um die Datenbank zu erstellen und zu aktualisieren, um nach dem Fehler fortzufahren.

Nächste Schritte

  • In diesem Artikel wurde gezeigt, wie Sie sich bei Facebook authentifizieren können. Führen Sie einen ähnlichen Ansatz für die Authentifizierung mit anderen Anbietern aufgeführt, auf die Vorgängerseite.

  • Nachdem Sie Ihre Website in der Azure-Web-App veröffentlicht haben, sollten Sie die im AppSecret Facebook-Entwicklerportal zurücksetzen.

  • Legen Sie die Authentication:Facebook:AppId und Authentication:Facebook:AppSecret Anwendungseinstellungen im Azure-Portal. Das Konfigurationssystem ist zum Lesen von Schlüsseln aus Umgebungsvariablen eingerichtet.