Freigeben über

Externe Authentifizierungsdienste mit ASP.NET Web-API (C#)

Für die Entwicklung einer neuen Web-App empfehlen wir Minimale APIs

Es wird empfohlen, die sicherste Authentifizierungsoption zu verwenden. Informationen zu .NET-Apps, die in Azure bereitgestellt werden, finden Sie unter:

Azure Key Vault und .NET Aspire bieten die sicherste Möglichkeit zum Speichern und Abrufen von Geheimschlüsseln. Azure Key Vault ist ein Clouddienst, der Verschlüsselungsschlüssel und geheime Schlüssel wie Zertifikate, Verbindungszeichenfolgen und Kennwörter schützt. Für .NET Aspire, siehe Sichere Kommunikation zwischen Host- und Client-Integrationen.

Vermeiden Sie die Vergabe von Anmeldeinformationen für das Kennwort des Besitzers von Ressourcen, da dies:

  • Macht das Kennwort des Benutzers für den Client verfügbar.
  • Ist ein erhebliches Sicherheitsrisiko.
  • Sollte nur verwendet werden, wenn andere Authentifizierungsflüsse nicht möglich sind.

Wenn die App auf einem Testserver bereitgestellt wird, kann eine Umgebungsvariable genutzt werden, um den Verbindungsstring zu einem Testdatenbankserver festzulegen. Umgebungsvariablen werden in der Regel in nur unverschlüsselten Text gespeichert. Wenn der Computer oder der Prozess kompromittiert ist, können Umgebungsvariablen von nicht vertrauenswürdigen Parteien aufgerufen werden. Es wird davon abgeraten, Umgebungsvariablen zum Speichern einer Produktionsverbindungszeichenfolge zu verwenden, da dies nicht der sicherste Ansatz ist.

Konfigurationsdatenrichtlinien:

  • Speichern Sie niemals Kennwörter oder andere vertrauliche Daten im Konfigurationsanbietercode oder in Nur-Text-Konfigurationsdateien.
  • Verwenden Sie keine Produktionsgeheimnisse in Entwicklungs- oder Testumgebungen.
  • Geben Sie geheime Schlüssel außerhalb des Projekts an, damit sie nicht versehentlich an ein Quellcode-Repository gebunden werden können.

Visual Studio 2017 und ASP.NET 4.7.2 erweitern die Sicherheitsoptionen für Single Page Applications (SPA) und Web-API--Dienste zur Integration in externe Authentifizierungsdienste, die mehrere OAuth/OpenID- und Social Media-Authentifizierungsdienste umfassen: Microsoft-Konten, Twitter, Facebook und Google.

In dieser exemplarischen Vorgehensweise

Voraussetzungen

Um den Beispielen in dieser Anleitung zu folgen, müssen Sie Folgendes haben:

Verwenden externer Authentifizierungsdienste

Die Fülle externer Authentifizierungsdienste, die derzeit Webentwicklern zur Verfügung stehen, helfen, die Entwicklungszeit beim Erstellen neuer Webanwendungen zu reduzieren. Webbenutzer verfügen in der Regel über mehrere vorhandene Konten für beliebte Webdienste und Social Media-Websites. Wenn eine Webanwendung also die Authentifizierungsdienste von einem externen Webdienst oder einer Social Media-Website implementiert, spart sie die Entwicklungszeit, die für die Erstellung einer Authentifizierungsimplementierung aufgewendet wurde. Die Verwendung eines externen Authentifizierungsdienstes erspart den Endbenutzern, ein weiteres Konto für Ihre Webanwendung zu erstellen und sich einen weiteren Benutzernamen und ein weiteres Passwort merken zu müssen.

In der Vergangenheit haben Entwickler zwei Möglichkeiten: erstellen sie eine eigene Authentifizierungsimplementierung, oder erfahren Sie, wie Sie einen externen Authentifizierungsdienst in ihre Anwendungen integrieren. Auf der einfachsten Ebene veranschaulicht das folgende Diagramm einen einfachen Anforderungsfluss für einen Benutzer-Agent (Webbrowser), der Informationen aus einer Webanwendung anfordert, die für die Verwendung eines externen Authentifizierungsdiensts konfiguriert ist:

Abbildung eines einfachen Anforderungsflusses für einen Benutzer-Agent

Im vorherigen Diagramm sendet der Benutzer-Agent (oder webbrowser in diesem Beispiel) eine Anforderung an eine Webanwendung, die den Webbrowser an einen externen Authentifizierungsdienst umleitet. Der Benutzer-Agent sendet seine Anmeldeinformationen an den externen Authentifizierungsdienst, und wenn der Benutzer-Agent erfolgreich authentifiziert wurde, leitet der externe Authentifizierungsdienst den Benutzer-Agent mit einer Form von Token an die ursprüngliche Webanwendung um, die der Benutzer-Agent an die Webanwendung sendet. Die Webanwendung verwendet das Token, um zu überprüfen, ob der Benutzer-Agent erfolgreich vom externen Authentifizierungsdienst authentifiziert wurde, und die Webanwendung kann das Token verwenden, um weitere Informationen über den Benutzer-Agent zu sammeln. Sobald die Anwendung die Verarbeitung der Informationen des Benutzer-Agenten abgeschlossen hat, gibt die Webanwendung die entsprechende Antwort an den Benutzer-Agenten basierend auf dessen Autorisierungseinstellungen zurück.

In diesem zweiten Beispiel verhandelt der Benutzer-Agent mit dem Webanwendungs- und externen Autorisierungsserver, und die Webanwendung führt zusätzliche Kommunikation mit dem externen Autorisierungsserver durch, um zusätzliche Informationen über den Benutzer-Agent abzurufen:

Abbildung des Benutzeragenten, der mit der Webanwendung verhandelt,

Visual Studio 2017 und ASP.NET 4.7.2 vereinfachen die Integration mit externen Authentifizierungsdiensten für Entwickler, indem integrierte Integration für die folgenden Authentifizierungsdienste bereitgestellt wird:

  • Facebook
  • Googeln
  • Microsoft-Konten (Windows Live ID-Konten)
  • Twitter

In den Beispielen in dieser exemplarischen Vorgehensweise wird veranschaulicht, wie Sie jeden der unterstützten externen Authentifizierungsdienste mithilfe der neuen ASP.NET-Webanwendungsvorlage konfigurieren, die mit Visual Studio 2017 ausgeliefert wird.

Anmerkung

Gegebenenfalls müssen Sie Ihren FQDN zu den Einstellungen für Ihren externen Authentifizierungsdienst hinzufügen. Diese Anforderung basiert auf Sicherheitseinschränkungen für einige externe Authentifizierungsdienste, die den FQDN in Ihren Anwendungseinstellungen erfordern, damit er mit dem FQDN übereinstimmt, der von Ihren Clients verwendet wird. (Die Schritte hierfür variieren stark für jeden externen Authentifizierungsdienst. Sie müssen die Dokumentation für jeden externen Authentifizierungsdienst konsultieren, um festzustellen, ob dies erforderlich ist und wie Diese Einstellungen konfiguriert werden.) Wenn Sie IIS Express so konfigurieren müssen, dass ein FQDN zum Testen dieser Umgebung verwendet wird, lesen Sie die Konfigurieren von IIS Express für die Verwendung eines vollqualifizierten Domänennamens Abschnitt weiter unten in dieser exemplarischen Vorgehensweise.

Erstellen einer Beispielwebanwendung

Die folgenden Schritte führen Sie durch das Erstellen einer Beispielanwendung mithilfe der Vorlage "ASP.NET Webanwendung". Diese Beispielanwendung verwenden Sie später in diesem Leitfaden für jeden externen Authentifizierungsdienst.

Starten Sie Visual Studio 2017, und wählen Sie von der Startseite Neues Projekt aus. Oder wählen Sie aus dem Menü Datei die Option Neu und dann Projekt.

Wenn das Dialogfeld Neues Projekt angezeigt wird, wählen Sie Installiert und erweitern Sie Visual C#. Wählen Sie unter Visual C# die Option Web. Wählen Sie in der Liste der Projektvorlagen ASP.NET Web Application (.Net Framework)aus. Geben Sie einen Namen für Ihr Projekt ein, und klicken Sie auf OK.

Bild des Dialogfensters Neues Projekt

Wenn das Fenster Neues ASP.NET Projekt angezeigt wird, wählen Sie die Vorlage Einzelseitenanwendung und klicken Sie auf Projekt erstellen.

Bild der Vorlagenauswahl

Warten Sie, als Visual Studio 2017 Ihr Projekt erstellt.

Wenn Visual Studio 2017 das Erstellen des Projekts abgeschlossen hat, öffnen Sie die Startup.Auth.cs Datei, die sich im Ordner App_Start befindet.

Wenn Sie das Projekt zum ersten Mal erstellen, sind keine externen Authentifizierungsdienste in Startup.Auth.cs Datei aktiviert; Im Folgenden wird veranschaulicht, wie Ihr Code aussehen könnte, wobei die Abschnitte hervorgehoben sind, in denen Sie einen externen Authentifizierungsdienst und alle relevanten Einstellungen aktivieren würden, um Microsoft-Konten, Twitter, Facebook oder Google-Authentifizierung mit Ihrer ASP.NET-Anwendung zu verwenden:

using System;
using Microsoft.AspNet.Identity;
using Microsoft.AspNet.Identity.EntityFramework;
using Microsoft.AspNet.Identity.Owin;
using Microsoft.Owin;
using Microsoft.Owin.Security.Cookies;
using Microsoft.Owin.Security.DataProtection;
using Microsoft.Owin.Security.Google;
using Microsoft.Owin.Security.OAuth;
using Owin;
using WebApplication1.Models;
using WebApplication1.Providers;

namespace WebApplication1
{
    public partial class Startup
    {
        // Enable the application to use OAuthAuthorization. You can then secure your Web APIs
        static Startup()
        {
            PublicClientId = "web";

            OAuthOptions = new OAuthAuthorizationServerOptions
            {
                TokenEndpointPath = new PathString("/Token"),
                AuthorizeEndpointPath = new PathString("/Account/Authorize"),
                Provider = new ApplicationOAuthProvider(PublicClientId),
                AccessTokenExpireTimeSpan = TimeSpan.FromDays(14),
                AllowInsecureHttp = true
            };
        }

        public static OAuthAuthorizationServerOptions OAuthOptions { get; private set; }

        public static string PublicClientId { get; private set; }

        // For more information on configuring authentication, please visit https://go.microsoft.com/fwlink/?LinkId=301864
        public void ConfigureAuth(IAppBuilder app)
        {
            // Configure the db context, user manager and signin manager to use a single instance per request
            app.CreatePerOwinContext(ApplicationDbContext.Create);
            app.CreatePerOwinContext<ApplicationUserManager>(ApplicationUserManager.Create);
            app.CreatePerOwinContext<ApplicationSignInManager>(ApplicationSignInManager.Create);

            // Enable the application to use a cookie to store information for the signed in user
            app.UseCookieAuthentication(new CookieAuthenticationOptions
            {
                AuthenticationType = DefaultAuthenticationTypes.ApplicationCookie,
                LoginPath = new PathString("/Account/Login"),
                Provider = new CookieAuthenticationProvider
                {
                    // Enables the application to validate the security stamp when the user logs in.
                    // This is a security feature which is used when you change a password or add an external login to your account.  
                    OnValidateIdentity = SecurityStampValidator.OnValidateIdentity<ApplicationUserManager, ApplicationUser>(
                        validateInterval: TimeSpan.FromMinutes(20),
                        regenerateIdentity: (manager, user) => user.GenerateUserIdentityAsync(manager))
                }
            });
            // Use a cookie to temporarily store information about a user logging in with a third party login provider
            app.UseExternalSignInCookie(DefaultAuthenticationTypes.ExternalCookie);

            // Enables the application to temporarily store user information when they are verifying the second factor in the two-factor authentication process.
            app.UseTwoFactorSignInCookie(DefaultAuthenticationTypes.TwoFactorCookie, TimeSpan.FromMinutes(5));

            // Enables the application to remember the second login verification factor such as phone or email.
            // Once you check this option, your second step of verification during the login process will be remembered on the device where you logged in from.
            // This is similar to the RememberMe option when you log in.
            app.UseTwoFactorRememberBrowserCookie(DefaultAuthenticationTypes.TwoFactorRememberBrowserCookie);

            // Enable the application to use bearer tokens to authenticate users
            app.UseOAuthBearerTokens(OAuthOptions);

            // Uncomment the following lines to enable logging in with third party login providers
            //app.UseMicrosoftAccountAuthentication(
            //    clientId: "",
            //    clientSecret: "");

            //app.UseTwitterAuthentication(
            //    consumerKey: "",
            //    consumerSecret: "");

            //app.UseFacebookAuthentication(
            //    appId: "",
            //    appSecret: "");

            //app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions()
            //{
            //    ClientId = "",
            //    ClientSecret = ""
            //});
        }
    }
}

Wenn Sie F5 drücken, um Ihre Webanwendung zu erstellen und zu debuggen, wird ein Anmeldebildschirm angezeigt, auf dem Sie sehen, dass keine externen Authentifizierungsdienste definiert wurden.

Bild des Anmeldebildschirms

In den folgenden Abschnitten erfahren Sie, wie Sie die einzelnen externen Authentifizierungsdienste aktivieren, die mit ASP.NET in Visual Studio 2017 bereitgestellt werden.

Aktivieren der Facebook-Authentifizierung

Die Verwendung der Facebook-Authentifizierung erfordert, dass Sie ein Facebook-Entwicklerkonto erstellen, und Ihr Projekt benötigt eine Anwendungs-ID und einen geheimen Schlüssel von Facebook, um funktionieren zu können. Informationen zum Erstellen eines Facebook-Entwicklerkontos und zum Abrufen Ihrer Anwendungs-ID und Ihres geheimen Schlüssels finden Sie unter https://go.microsoft.com/fwlink/?LinkID=252166.

Nachdem Sie Ihre Anwendungs-ID und ihren geheimen Schlüssel erhalten haben, führen Sie die folgenden Schritte aus, um die Facebook-Authentifizierung für Ihre Webanwendung zu aktivieren:

  1. Wenn Ihr Projekt in Visual Studio 2017 geöffnet ist, öffnen Sie die Startup.Auth.cs Datei.

  2. Suchen Sie den Codeabschnitt für die Facebook-Authentifizierung:

    // Uncomment the following lines to enable logging in with third party login providers
//app.UseMicrosoftAccountAuthentication(
//    clientId: "",
//    clientSecret: "");

//app.UseTwitterAuthentication(
//    consumerKey: "",
//    consumerSecret: "");

//app.UseFacebookAuthentication(
//    appId: "",
//    appSecret: "");

//app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions()
//{
//    ClientId = "",
//    ClientSecret = ""
//});

  3. Entfernen Sie die "//"-Zeichen, um die Kommentierung für die markierten Zeilen des Codes aufzuheben, und fügen Sie dann Ihre Anwendungs-ID und Ihren Secret Key hinzu. Nachdem Sie diese Parameter hinzugefügt haben, können Sie Ihr Projekt neu kompilieren:

    // Uncomment the following lines to enable logging in with third party login providers
//app.UseMicrosoftAccountAuthentication(
//    clientId: "",
//    clientSecret: "");

//app.UseTwitterAuthentication(
//   consumerKey: "",
//   consumerSecret: "");

//app.UseFacebookAuthentication(
//   appId: "426f62526f636b73",
//   appSecret: "");

//app.UseGoogleAuthentication();

  4. Wenn Sie F5 drücken, um Ihre Webanwendung in Ihrem Webbrowser zu öffnen, sehen Sie, dass Facebook als externer Authentifizierungsdienst definiert wurde:

    Von Facebook definiertes Bild

  5. Wenn Sie auf die Schaltfläche Facebook klicken, wird Ihr Browser auf die Facebook-Anmeldeseite umgeleitet:

    Bild der Facebook-Anmeldeseite

  6. Nachdem Sie Ihre Anmeldeinformationen für Facebook eingegeben und auf Anmelden geklickt haben, wird Ihr Webbrowser zu Ihrer Webanwendung umgeleitet, die Sie nach dem Benutzernamen fragt, den Sie mit Ihrem Facebook-Konto verknüpfen möchten:

    Bild der Webanwendung

  7. Nachdem Sie Ihren Benutzernamen eingegeben und auf die Schaltfläche Registrieren geklickt haben, zeigt Ihre Webanwendung die standardmäßige Homepage für Ihr Facebook-Konto an:

    Bild mit der standardmäßigen Facebook-Startseite

Aktivieren der Google-Authentifizierung

Die Verwendung der Google-Authentifizierung erfordert, dass Sie ein Google-Entwicklerkonto erstellen, und Ihr Projekt benötigt eine Anwendungs-ID und einen geheimen Schlüssel von Google, um zu funktionieren. Informationen zum Erstellen eines Google-Entwicklerkontos und zum Abrufen Ihrer Anwendungs-ID und Ihres geheimen Schlüssels finden Sie unter https://developers.google.com.

Führen Sie die folgenden Schritte aus, um die Google-Authentifizierung für Ihre Webanwendung zu aktivieren:

  1. Wenn Ihr Projekt in Visual Studio 2017 geöffnet ist, öffnen Sie die Startup.Auth.cs Datei.

  2. Lokalisiere den Abschnitt "Google-Authentifizierung" im Code:

    // Uncomment the following lines to enable logging in with third party login providers
//app.UseMicrosoftAccountAuthentication(
//    clientId: "",
//    clientSecret: "");

//app.UseTwitterAuthentication(
//    consumerKey: "",
//    consumerSecret: "");

//app.UseFacebookAuthentication(
//    appId: "",
//    appSecret: "");

//app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions()
//{
//    ClientId = "",
//    ClientSecret = ""
//});

  3. Entfernen Sie die Zeichen "//", um die hervorgehobenen Codezeilen zu entkommentieren, und fügen Sie dann die Anwendungs-ID und den Geheimschlüssel hinzu. Nachdem Sie diese Parameter hinzugefügt haben, können Sie Ihr Projekt neu kompilieren:

    // Uncomment the following lines to enable logging in with third party login providers
//app.UseMicrosoftAccountAuthentication(
//    clientId: "",
//    clientSecret: "");

//app.UseTwitterAuthentication(
//   consumerKey: "",
//   consumerSecret: "");

//app.UseFacebookAuthentication(
//   appId: "",
//   appSecret: "");

app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions()
{
    ClientId = "477522346600.apps.googleusercontent.com",
    ClientSecret = "gobkdpbocikdfbnfahjladnetpdkvmic"
});

  4. Wenn Sie F5 drücken, um Ihre Webanwendung in Ihrem Webbrowser zu öffnen, sehen Sie, dass Google als externer Authentifizierungsdienst definiert wurde:

    Bild Google wurde definiert

  5. Wenn Sie auf die Schaltfläche Google klicken, wird Ihr Browser auf die Google-Anmeldeseite umgeleitet:

    Bild der Google-Anmeldeseite

  6. Nachdem Sie Ihre Google-Anmeldeinformationen eingegeben und auf Anmeldengeklickt haben, werden Sie von Google aufgefordert, zu überprüfen, ob Ihre Webanwendung über Berechtigungen für den Zugriff auf Ihr Google-Konto verfügt:

    Bild der Google-Berechtigungen

  7. Wenn Sie auf Akzeptierenklicken, wird Ihr Webbrowser zurück zu Ihrer Webanwendung umgeleitet, und Sie werden aufgefordert, den Benutzernamen anzugeben, den Sie Ihrem Google-Konto zuordnen möchten.

    Bild der Webanwendung mit Prompt für den zu verknüpfenden Benutzernamen

  8. Nachdem Sie Ihren Benutzernamen eingegeben und auf die Schaltfläche Registrieren geklickt haben, zeigt Ihre Webanwendung die standardmäßige Homepage für Ihr Google-Konto an:

    Bild der Standardmäßigen Startseite von Google

Aktivieren der Microsoft-Authentifizierung

Die Microsoft-Authentifizierung erfordert, dass Sie ein Entwicklerkonto erstellen und eine Client-ID und einen geheimen Clientschlüssel benötigen, um funktionieren zu können. Informationen zum Erstellen eines Microsoft-Entwicklerkontos und zum Abrufen Ihrer Client-ID und Ihres Client-Secrets finden Sie unter dem folgenden Link: https://go.microsoft.com/fwlink/?LinkID=144070.

Nachdem Sie Ihren Verbraucherschlüssel und Ihr Verbraucher-Geheimnis erhalten haben, gehen Sie wie folgt vor, um die Microsoft-Authentifizierung für Ihre Webanwendung zu aktivieren:

  1. Wenn Ihr Projekt in Visual Studio 2017 geöffnet ist, öffnen Sie die Startup.Auth.cs Datei.

  2. Suchen Sie den Abschnitt des Codes für die Microsoft-Authentifizierung:

    // Uncomment the following lines to enable logging in with third party login providers
//app.UseMicrosoftAccountAuthentication(
//    clientId: "",
//    clientSecret: "");

//app.UseTwitterAuthentication(
//   consumerKey: "",
//   consumerSecret: "");

//app.UseFacebookAuthentication(
//   appId: "",
//   appSecret: "");

//app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions()
//{
//    ClientId = "",
//    ClientSecret = ""
//});

  3. Entfernen Sie die "//"-Zeichen, um die Kommentierung für die markierten Zeilen des Codes aufzuheben, und fügen Sie dann Ihre Client ID und Ihr Client Secret ein. Nachdem Sie diese Parameter hinzugefügt haben, können Sie Ihr Projekt neu kompilieren:

    // Uncomment the following lines to enable logging in with third party login providers
app.UseMicrosoftAccountAuthentication(
    clientId: "426f62526f636b73",
    clientSecret: "57686f6120447564652c2049495320526f636b73");

//app.UseTwitterAuthentication(
//   consumerKey: "",
//   consumerSecret: "");

//app.UseFacebookAuthentication(
//   appId: "",
//   appSecret: "");

//app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions()
//{
//    ClientId = "",
//    ClientSecret = ""
//});

  4. Wenn Sie F5 drücken, um Ihre Webanwendung in Ihrem Webbrowser zu öffnen, sehen Sie, dass Microsoft als externer Authentifizierungsdienst definiert wurde:

    Bild von Microsoft definiert

  5. Wenn Sie auf die Schaltfläche Microsoft klicken, wird Ihr Browser zur Microsoft-Anmeldeseite umgeleitet:

    Bild der Microsoft-Anmeldeseite

  6. Nachdem Sie Ihre Microsoft-Anmeldeinformationen eingegeben und auf Anmeldunggeklickt haben, werden Sie aufgefordert, zu überprüfen, ob Ihre Webanwendung über Berechtigungen für den Zugriff auf Ihr Microsoft-Konto verfügt:

    Bild der Microsoft-Berechtigungen

  7. Wenn Sie auf Jaklicken, wird Ihr Webbrowser zurück zu Ihrer Webanwendung umgeleitet, wodurch Sie nach dem Benutzernamen gefragt werden, den Sie Ihrem Microsoft-Konto zuordnen möchten.

    Bild des zu verknüpfenden Google-Kontos

  8. Nachdem Sie Ihren Benutzernamen eingegeben und auf die Schaltfläche Registrieren geklickt haben, zeigt Ihre Webanwendung die Standard-Startseite für Ihr Microsoft-Konto an.

    Bild der Standardmäßigen Microsoft-Startseite

Aktivieren der Twitter-Authentifizierung

Die Twitter-Authentifizierung erfordert, dass Sie ein Entwicklerkonto erstellen und einen Verbraucherschlüssel und ein Verbrauchergeheimnis benötigen, um funktionieren zu können. Informationen zum Erstellen eines Twitter-Entwicklerkontos und zum Abrufen Ihres Verbraucherschlüssels und des geheimen Verbrauchergeheimnisses finden Sie unter https://go.microsoft.com/fwlink/?LinkID=252166.

Nachdem Sie Ihren Verbraucherschlüssel und den geheimen Verbraucherschlüssel erhalten haben, führen Sie die folgenden Schritte aus, um die Twitter-Authentifizierung für Ihre Webanwendung zu aktivieren:

  1. Wenn Ihr Projekt in Visual Studio 2017 geöffnet ist, öffnen Sie die Startup.Auth.cs Datei.

  2. Suchen Sie den Abschnitt des Codes für die Twitter-Authentifizierung:

    // Uncomment the following lines to enable logging in with third party login providers
//app.UseMicrosoftAccountAuthentication(
//    clientId: "",
//    clientSecret: "");

//app.UseTwitterAuthentication(
//   consumerKey: "",
//   consumerSecret: "");

//app.UseFacebookAuthentication(
//   appId: "",
//   appSecret: "");

//app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions()
//{
//    ClientId = "",
//    ClientSecret = ""
//});

  3. Entfernen Sie die "//"-Zeichen, um die hervorgehobenen Zeilen des Codes freizugeben, und fügen Sie dann Ihren Kundenschlüssel und Ihr geheimes Kundenkonto hinzu. Nachdem Sie diese Parameter hinzugefügt haben, können Sie Ihr Projekt neu kompilieren:

    // Uncomment the following lines to enable logging in with third party login providers
//app.UseMicrosoftAccountAuthentication(
//    clientId: "",
//    clientSecret: "");

app.UseTwitterAuthentication(
   consumerKey: "426f62526f636b73",
   consumerSecret: "57686f6120447564652c2049495320526f636b73");

//app.UseFacebookAuthentication(
//   appId: "",
//   appSecret: "");

//app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions()
//{
//    ClientId = "",
//    ClientSecret = ""
//});

  4. Wenn Sie F5 drücken, um Ihre Webanwendung in Ihrem Webbrowser zu öffnen, sehen Sie, dass Twitter als externer Authentifizierungsdienst definiert wurde:

    Bild von Twitter definiert

  5. Wenn Sie auf die Schaltfläche Twitter klicken, wird Ihr Browser auf die Twitter-Anmeldeseite umgeleitet:

    Bild der Twitter-Anmeldeseite

  6. Nachdem Sie Ihre Anmeldeinformationen für Twitter eingegeben und auf App autorisieren geklickt haben, wird Ihr Webbrowser zurück zu Ihrer Webanwendung umgeleitet, die Sie nach dem Benutzernamen fragt, den Sie mit Ihrem Twitter-Konto verknüpfen möchten:

    Bild des Twitter-Kontos, das in der Web-App verknüpft werden soll

  7. Nachdem Sie Ihren Benutzernamen eingegeben und auf die Schaltfläche Registrieren geklickt haben, zeigt Ihre Webanwendung die standardmäßige Homepage für Ihr Twitter-Konto an:

    Bild der standardmäßigen Twitter-Homepage

Zusatzinformation

Weitere Informationen zum Erstellen von Anwendungen, die OAuth und OpenID verwenden, finden Sie unter den folgenden URLs:

Kombinieren externer Authentifizierungsdienste

Um mehr Flexibilität zu erzielen, können Sie mehrere externe Authentifizierungsdienste gleichzeitig definieren . Auf diese Weise können die Benutzer Ihrer Webanwendung ein Konto von einem der aktivierten externen Authentifizierungsdienste verwenden:

Bild mehrerer externer Authentifizierungsdienste

Konfigurieren von IIS Express für die Verwendung eines vollqualifizierten Domänennamens

Einige externe Authentifizierungsanbieter unterstützen das Testen Ihrer Anwendung nicht mithilfe einer HTTP-Adresse wie http://localhost:port/. Um dieses Problem zu umgehen, können Sie ihrer HOSTS-Datei eine statische vollqualifizierte Domänennamenzuordnung (Fully Qualified Domain Name, FQDN) hinzufügen und Ihre Projektoptionen in Visual Studio 2017 so konfigurieren, dass der FQDN zum Testen/Debuggen verwendet wird. Führen Sie dazu die folgenden Schritte aus:

  • Fügen Sie einen statischen FQDN hinzu, der Ihre HOSTS-Datei zuordnet:

    1. Öffnen Sie eine erweiterte Eingabeaufforderung in Windows.

    2. Geben Sie den folgenden Befehl ein:

      Notepad %WinDir%\system32\drivers\etc\hosts

    3. Fügen Sie der HOSTS-Datei einen Eintrag wie den folgenden hinzu:

      127.0.0.1 www.wingtiptoys.com

    4. Speichern und schließen Sie Ihre HOSTS-Datei.

  • Konfigurieren Sie Ihr Visual Studio-Projekt für die Verwendung des FQDN:

    1. Wenn Ihr Projekt in Visual Studio 2017 geöffnet ist, klicken Sie auf das Menü Project, und wählen Sie dann die Eigenschaften Ihres Projekts aus. Wählen Sie zum Beispiel Eigenschaften von WebApplication1.
    2. Wählen Sie die Registerkarte Web aus.
    3. Geben Sie Ihren FQDN für die Projekt Url ein. Beispielsweise würden Sie http://www.wingtiptoys.com eingeben, wenn dies die FQDN-Zuordnung war, die Sie Ihrer HOSTS-Datei hinzugefügt haben.

  • Konfigurieren Sie IIS Express so, dass der FQDN für Ihre Anwendung verwendet wird:

    1. Öffnen Sie eine erweiterte Eingabeaufforderung in Windows.

    2. Geben Sie den folgenden Befehl ein, um in Ihren IIS Express-Ordner zu wechseln:

      cd /d "%ProgramFiles%\IIS Express"

    3. Geben Sie den folgenden Befehl ein, um den FQDN zu Ihrer Anwendung hinzuzufügen:

      appcmd.exe set config -section:system.applicationHost/sites /+"[name='WebApplication1'].bindings.[protocol='http',bindingInformation='*:80: www.wingtiptoys.com']" /commit:apphost

    Dabei ist WebApplication1 der Name Ihres Projekts und bindingInformation enthält die Port-Nummer und den FQDN, die Sie für Ihre Tests verwenden möchten.

So erhalten Sie Ihre Anwendungseinstellungen für die Microsoft-Authentifizierung

Das Verknüpfen einer Anwendung mit Windows Live zur Authentifizierung mit Microsoft ist ein einfacher Prozess. Wenn Sie noch keine Anwendung mit Windows Live verknüpft haben, können Sie die folgenden Schritte ausführen:

  1. Navigieren Sie zu https://go.microsoft.com/fwlink/?LinkID=144070, geben Sie Ihren Microsoft-Kontonamen und Ihr Kennwort ein, wenn Sie dazu aufgefordert werden, und klicken Sie auf Anmelden.

  2. Wählen Sie Eine App hinzufügen und geben Sie den Namen Ihrer Anwendung ein, wenn Sie dazu aufgefordert werden, und klicken Sie dann auf Erstellen:

    Bild des Hinzufügens einer App

  3. Wählen Sie Ihre App unter Name und die Seite mit den Anwendungseigenschaften erscheint.

  4. Geben Sie die Umleitungsdomäne für Ihre Anwendung ein. Kopieren Sie die Anwendungs-ID und wählen Sie unter Anwendungs-Secrets Kennwort generieren. Kopieren Sie das angezeigte Kennwort. Die Anwendungs-ID und das Kennwort sind Ihre Client-ID und Ihr Client-Geheimnis. Wählen Sie Ok und dann Speichern.

    Bild der umgeleiteten Domänen-Informationen

Optional: Lokale Registrierung deaktivieren

Die aktuelle lokale ASP.NET-Registrierungsfunktion verhindert nicht, dass automatisierte Programme (Bots) Mitgliedskonten erstellen, beispielsweise durch die Verwendung einer Bot-Präventions- und Validierungstechnologie wie CAPTCHA. Aus diesem Gründen sollten Sie das lokale Anmeldeformular und den Registrierungslink auf der Anmeldeseite entfernen. Öffnen Sie dazu die Seite _Login.cshtml in Ihrem Projekt und kommentieren Sie die Zeilen für das lokale Anmeldefeld und den Link zur Registrierung aus. Die resultierende Seite sollte wie im folgenden Codebeispiel aussehen:

<!-- ko with: login -->
<hgroup class="title">
    <h1>Log in</h1>
</hgroup>
<div class="row-fluid">
    @*<section class="span7">
        <form>
            <fieldset class="form-horizontal">
                <legend>Use a local account to log in.</legend>
                <ul class="text-error" data-bind="foreach: errors">
                    <li data-bind="text: $data"></li>
                </ul>
                <div class="control-group">
                    <label for="UserName" class="control-label">User name</label>
                    <div class="controls">
                        <input type="text" name="UserName" data-bind="value: userName, hasFocus: true" />
                        <span class="text-error" data-bind="visible: userName.hasError, text: userName.errorMessage"></span>
                    </div>
                </div>
                <div class="control-group">
                    <label for="Password" class="control-label">Password</label>
                    <div class="controls">
                        <input type="password" name="Password" data-bind="value: password" />
                        <span class="text-error" data-bind="visible: password.hasError, text: password.errorMessage"></span>
                    </div>
                </div>
                <div class="control-group">
                    <div class="controls">
                        <label class="checkbox">
                            <input type="checkbox" name="RememberMe" data-bind="checked: rememberMe" />
                            <label for="RememberMe">Remember me?</label>
                        </label>
                    </div>
                </div>
                <div class="form-actions no-color">
                    <button type="submit" class="btn" data-bind="click: login, disable: loggingIn">Log in</button>
                </div>
                <p><a href="#" data-bind="click: register">Register</a> if you don't have a local account.</p>
            </fieldset>
        </form>
    </section>*@
    <section class="span5">
        <h2>Log in using another service</h2>
        <div data-bind="visible: loadingExternalLogin">Loading...</div>
        <div data-bind="visible: !loadingExternalLogin()">
            <div class="message-info" data-bind="visible: !hasExternalLogin()">
                <p>
                    There are no external authentication services configured. See <a href="https://go.microsoft.com/fwlink/?LinkId=252166">this article</a>
                    for details on setting up this ASP.NET application to support logging in via external services.
                </p>
            </div>
            <form data-bind="visible: hasExternalLogin">
                <fieldset class="form-horizontal">
                    <legend>Use another service to log in.</legend>
                    <p data-bind="foreach: externalLoginProviders">
                        <button type="submit" class="btn" data-bind="text: name, attr: { title: 'Log in using your ' + name() + ' account' }, click: login"></button>
                    </p>
                </fieldset>
            </form>
        </div>
    </section>
</div>
<!-- /ko -->

Nachdem der lokale Anmeldebereich und der Registrierungslink deaktiviert wurden, zeigt Ihre Anmeldeseite nur die externen Authentifizierungsanbieter an, die Sie aktiviert haben:

Bild der Anmeldung nur bei externen Anbietern