Einrichten einer externen Anmeldung per Twitter mit ASP.NET Core

Von Valeriy Novytskyy und Rick Anderson

Dieses Beispiel zeigt Ihnen, wie Sie es Benutzer*innen ermöglichen, sich mit ihrem Twitter-Konto anzumelden. Dazu verwenden Sie das ASP.NET Core-Projekt, das Sie auf der vorherigen Seite erstellt haben.

Hinweis

Das unten beschriebene Microsoft.AspNetCore.Authentication.Twitter-Paket verwendet die von Twitter bereitgestellten OAuth 1a-APIs. Twitter hat inzwischen OAuth 2-APIs mit einem anderen Funktionsumfang hinzugefügt. Das AspNet.Security.OAuth.Twitter-Paket ist eine Community-Implementierung, die die neuen OAuth 2-APIs nutzt.

Erstellen der App in Twitter

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

  • Navigieren Sie zum Dashboard des Twitter-Entwicklerportals, und melden Sie sich an. Wenn Sie noch kein Twitter-Konto besitzen, verwenden Sie den Link Jetzt registrieren, um ein Konto zu erstellen.

  • Wenn Sie noch kein Projekt haben, erstellen Sie eines.

  • Wählen Sie + App hinzufügen aus. Geben Sie den App-Namen an, und notieren Sie sich dann den generierten API-Schlüssel, das API-Schlüsselgeheimnis und das Bearertoken. Diese Informationen werden später benötigt.

  • Wählen Sie auf der Seite App-Einstellungen im Abschnitt Authentifizierungseinstellungen die Option Bearbeiten aus, und gehen Sie dann wie folgt vor:

    • Aktivieren Sie 3-stufiges OAuth.
    • Fordern Sie E-Mail-Adressen von den Benutzer*innen an.
    • Füllen Sie die erforderlichen Felder aus, und klicken Sie auf Speichern.

    Hinweis

    Microsoft.AspNetCore.Identity setzt voraus, dass Benutzer*innen standardmäßig über eine E-Mail-Adresse verfügen. Verwenden Sie für Rückruf-URLs während der Entwicklung https://localhost:{PORT}/signin-twitter, wobei der Platzhalter {PORT} den Port der App angibt.

    Hinweis

    Das URI-Segment /signin-twitter ist als Standardrückruf des Twitter-Authentifizierungsanbieters festgelegt. Sie können den Standardrückruf-URI beim Konfigurieren der Middleware für die Twitter-Authentifizierung mithilfe der geerbten RemoteAuthenticationOptions.CallbackPath-Eigenschaft der TwitterOptions-Klasse ändern.

Speichern des Schlüssels und des Geheimnisses der Twitter-Consumer-API

Speichern Sie vertrauliche Einstellungen wie z. B. den Schlüssel und das Geheimnis der Twitter-Consumer-API mit dem Geheimnis-Manager. Gehen Sie für dieses Beispiel wie folgt vor:

  1. Initialisieren Sie das Projekt für den Geheimnisspeicher gemäß den Anweisungen unter Aktivieren des Geheimnisspeichers.

  2. Speichern Sie die vertraulichen Einstellungen im lokalen Geheimnisspeicher mit den geheimen Schlüsseln Authentication:Twitter:ConsumerKey und Authentication:Twitter:ConsumerSecret:

    dotnet user-secrets set "Authentication:Twitter:ConsumerAPIKey" "<consumer-api-key>"
    dotnet user-secrets set "Authentication:Twitter:ConsumerSecret" "<consumer-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.

Diese Token finden Sie nach der Erstellung einer neuen Twitter-Anwendung auf der Registerkarte Schlüssel und Zugriffstoken:

Konfigurieren der Twitter-Authentifizierung

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

{
    services.AddDbContext<ApplicationDbContext>(options =>
        options.UseSqlServer(
            Configuration.GetConnectionString("DefaultConnection")));
    services.AddDefaultIdentity<IdentityUser>(options =>
        options.SignIn.RequireConfirmedAccount = true)
            .AddEntityFrameworkStores<ApplicationDbContext>();
    services.AddRazorPages();

    services.AddAuthentication().AddTwitter(twitterOptions =>
    {
        twitterOptions.ConsumerKey = Configuration["Authentication:Twitter:ConsumerAPIKey"];
        twitterOptions.ConsumerSecret = Configuration["Authentication:Twitter:ConsumerSecret"];
        twitterOptions.RetrieveUserDetails = true;
    });

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

services.AddAuthentication().AddTwitter(twitterOptions =>
    {
        twitterOptions.ConsumerKey = configuration["Authentication:Twitter:ConsumerAPIKey"];
        twitterOptions.ConsumerSecret = configuration["Authentication:Twitter:ConsumerSecret"];
    });

Die AddAuthentication(IServiceCollection, String)-Überladung legt die DefaultScheme-Eigenschaft fest. Die AddAuthentication(IServiceCollection, Action<AuthenticationOptions>)-Überladung ermöglicht das Konfigurieren von Authentifizierungsoptionen, mit deren Hilfe Standardauthentifizierungsschemas für verschiedene Zwecke eingerichtet werden können. Durch nachfolgende Aufrufe von AddAuthentication werden zuvor konfigurierte AuthenticationOptions-Eigenschaften überschrieben.

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

Mehrere Authentifizierungsanbieter

Wenn die App mehrere Anbieter erfordert, verketten Sie die Erweiterungsmethoden für Anbieter nach AddAuthentication:

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

Weitere Informationen zu den Konfigurationsoptionen, die von der Twitter-Kontoauthentifizierung unterstützt werden, finden Sie in der Referenz zur TwitterOptions-API. Dies kann verwendet werden, um verschiedene Informationen über den Benutzer anzufordern.

Anmelden mit Twitter

Führen Sie die App aus, und wählen Sie Anmelden aus. Es wird eine Option zum Anmelden mit Twitter angezeigt:

Wenn Sie Twitter auswählen, werden Sie zur Authentifizierung an Twitter umgeleitet:

Nach Eingabe Ihrer Twitter-Anmeldeinformationen werden Sie wieder an die Website umgeleitet, auf der Sie Ihre E-Mail-Adresse festlegen können.

Sie sind jetzt mit Ihren Twitter-Anmeldeinformationen angemeldet:

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.

Problembehandlung

  • Nur ASP.NET Core 2.x: Wenn Identity nicht durch den Aufruf von services.AddIdentity in ConfigureServices konfiguriert wird, führt der Authentifizierungsversuch zur Ausnahme ArgumentException: Die Option 'SignInScheme' muss angegeben werden. Die in diesem Tutorial verwendete Projektvorlage stellt sicher, dass Identity konfiguriert ist.
  • Wenn die Standortdatenbank nicht durch Anwendung der anfänglichen Migration erstellt wurde, erhalten Sie die Fehlermeldung Fehler bei Datenbankvorgang während der Verarbeitung der Anforderung. Tippen Sie auf Migrationen anwenden, um die Datenbank zu erstellen, und aktualisieren Sie die Ansicht, um nach dem Fehler fortzufahren.

Nächste Schritte

  • In diesem Artikel wurde gezeigt, wie Sie eine Authentifizierung über Twitter durchführen 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 der Azure Web-App veröffentlicht haben, sollten Sie das ConsumerSecret im Twitter-Entwicklerportal zurücksetzen.

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