Einrichtung der externen Facebook-Anmeldung in ASP.NET Core

Von Valeriy Novytskyy und Rick Anderson

Dieses Lernprogramm mit Codebeispielen zeigt, wie Ihre Benutzer sich mit ihrem Facebook-Konto mit einem Beispiel ASP.NET Core Projekt anmelden können, das auf der vorherigen Seite erstellt wurde. Wir beginnen mit dem Erstellen einer Facebook-App-ID, indem wir die offiziellen Schritte ausführen.

Erstellen der App in Facebook

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

  • Navigieren Sie zur Facebook-Entwickler-App-Seite , und melden Sie sich an. Wenn Sie noch kein Facebook-Konto haben, verwenden Sie den Link " Registrieren für Facebook " auf der Anmeldeseite, um ein Konto zu erstellen. Nachdem Sie über ein Facebook-Konto verfügen, folgen Sie den Anweisungen, um sich als Facebook-Entwickler zu registrieren.

  • Wählen Sie im Menü Meine Apps die Option "App erstellen" aus. Das Formular "App erstellen" wird angezeigt. Facebook für Entwicklerportal in Microsoft Edge geöffnet

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

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

    Erstellen eines neuen App-ID-Formulars

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

    Produkteinrichtungsseite

  • Der Schnellstart-Assistent startet mit "Plattform auswählen " als erste Seite. Umgehen Sie den Assistenten jetzt, indem Sie im Menü unten links auf den Link "FaceBook-Anmeldeeinstellungen" klicken:

    Schnellstart überspringen

  • Die Seite "OAuth-Einstellungen für Client" wird angezeigt:

    Seite

  • Geben Sie Ihren Entwicklungs-URI mit /signin-facebook ein, der an das Feld gültige OAuth-Umleitungs-URIs angefügt ist (z. B. : https://localhost:44320/signin-facebook). Die später in diesem Lernprogramm konfigurierte Facebook-Authentifizierung verarbeitet automatisch Anforderungen bei /signin-facebook route, um den OAuth-Fluss 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 Facebook-Authentifizierungs-Middleware über die geerbte RemoteAuthenticationOptions.CallbackPath Eigenschaft der FacebookOptions Klasse konfigurieren.

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

  • Wählen Sieden Link"Standardeinstellungen>" in der linken Navigation aus.

  • Notieren Sie sich Ihre App ID und Ihre App Secret. Sie fügen beide in Ihrer ASP.NET Core Anwendung im nächsten Abschnitt hinzu:

  • Wenn Sie die Website bereitstellen, müssen Sie die Facebook-Anmeldeeinrichtungsseite erneut aufrufen und einen neuen öffentlichen URI registrieren.

Speichern der Facebook-App-ID und des geheimen Schlüssels

Speichern Sie vertrauliche Einstellungen wie die Facebook-App-ID und geheime Werte mit Secret Manager. Verwenden Sie für dieses Beispiel die folgenden Schritte:

  1. Initialisieren Sie das Projekt für den geheimen Speicher gemäß den Anweisungen beim Aktivieren des geheimen Speichers.

  2. Speichern Sie die vertraulichen Einstellungen im lokalen geheimen Speicher mit den geheimen Schlüsseln Authentication:Facebook:AppId und Authentication:Facebook:AppSecret:

    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. Das Trennzeichen : wird beispielsweise nicht von Bash unterstützt, __ hingegen schon.
  • automatisch durch : ersetzt.

Konfigurieren der Facebook-Authentifizierung

Fügen Sie den Authentifizierungsdienst zum Startup.ConfigureServices:

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

Fügen Sie den Authentifizierungsdienst zum Program:

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(IServiceCollection, String) Überladung legt die DefaultScheme Eigenschaft fest. Die AddAuthentication(IServiceCollection, Action<AuthenticationOptions>) Überladung ermöglicht das Konfigurieren von Authentifizierungsoptionen, die zum Einrichten von Standardauthentifizierungsschemas für verschiedene Zwecke verwendet werden können. Nachfolgende Aufrufe, um zuvor konfigurierte AuthenticationOptions Eigenschaften außer Kraft zu AddAuthentication setzen.

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

Melden Sie sich mit Facebook an

  • Führen Sie die App aus, und wählen Sie "Anmelden" aus.
  • Wählen Sie unter "Verwenden eines anderen Diensts zum Anmelden" Facebook aus.
  • Sie werden zur Authentifizierung an Facebook umgeleitet.
  • Geben Sie Ihre Facebook-Anmeldeinformationen ein.
  • Sie werden zurück zu Ihrer Website umgeleitet, auf der Sie Ihre E-Mails festlegen können.

Sie sind jetzt mit Ihren Facebook-Anmeldeinformationen angemeldet:

React, um die autorisierung externe Anmeldung abzubrechen

AccessDeniedPath kann einen Umleitungspfad zum Benutzer-Agent bereitstellen, wenn der Benutzer die angeforderte Autorisierungsanforderungen nicht genehmigt.

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

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

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

  • Die Remoteauthentifizierung wurde abgebrochen.
  • Diese App erfordert Authentifizierung.
  • Um die Anmeldung erneut zu versuchen, wählen Sie den Anmeldelink aus.

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 die Facebook-Anmeldung aus.
  • Wählen Sie jetzt "Nicht" aus. Sie werden an die angegebene AccessDeniedPath Seite 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 hierzu feinden Sie unter Konfigurieren von ASP.NET Core zur Verwendung mit Proxyservern und Lastenausgleich.

Mehrere Authentifizierungsanbieter

Wenn die App mehrere Anbieter erfordert, verketten Sie die Anbietererweiterungsmethoden 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 FacebookOptions API-Referenz. Konfigurationsoptionen können verwendet werden, um:

  • Fordern Sie unterschiedliche Informationen zum Benutzer an.
  • Fügen Sie Abfragezeichenfolgenargumente hinzu, um die Anmeldeoberfläche anzupassen.

Problembehandlung

  • ASP.NET Core 2.x nur: Wenn Identity sie nicht durch Aufrufen services.AddIdentityConfigureServiceskonfiguriert ist, führt der Versuch zur Authentifizierung zu ArgumentException: Die Option "SignInScheme" muss 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 den Fehler fortzusetzen.

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.

  • Sobald Sie Ihre Website in Azure Web App veröffentlichen, sollten Sie das AppSecret Im 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.