Freigeben über

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

  • Artikel

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, zu denen mehrere OAuth/OpenID- und Social Media-Authentifizierungsdienste gehören: Microsoft-Konten, Twitter, Facebook und Google.

In dieser exemplarischen Vorgehensweise

Voraussetzungen

Um die Beispiele in dieser exemplarischen Vorgehensweise zu befolgen, benötigen Sie Folgendes:

Verwenden externer Authentifizierungsdienste

Die Fülle externer Authentifizierungsdienste, die derzeit für Webentwickler zur Verfügung stehen, trägt dazu bei, die Entwicklungszeit beim Erstellen neuer Webanwendungen zu verkürzen. Webbenutzer verfügen in der Regel über mehrere vorhandene Konten für beliebte Webdienste und Social-Media-Websites. Wenn also eine Webanwendung die Authentifizierungsdienste von einem externen Webdienst oder einer Social-Media-Website implementiert, spart sie die Entwicklungszeit, die für die Erstellung einer Authentifizierungsimplementierung aufgewendet worden wäre. Die Verwendung eines externen Authentifizierungsdiensts verhindert, dass Endbenutzer ein anderes Konto für Ihre Webanwendung erstellen müssen und sich einen anderen Benutzernamen und ein anderes Kennwort merken müssen.

In der Vergangenheit hatten Entwickler zwei Möglichkeiten: Erstellen einer eigenen Authentifizierungsimplementierung oder lernen, 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 von einer Webanwendung anfordert, die für die Verwendung eines externen Authentifizierungsdiensts konfiguriert ist:

Abbildung eines einfachen Anforderungsflows für einen Benutzer-Agent.

Im vorherigen Diagramm stellt der Benutzer-Agent (oder der 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 einem Token an die ursprüngliche Webanwendung um, das 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 zum Benutzer-Agent zu sammeln. Sobald die Anwendung die Informationen des Benutzer-Agents verarbeitet hat, gibt die Webanwendung basierend auf seinen Autorisierungseinstellungen die entsprechende Antwort an den Benutzer-Agent zurück.

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

Abbildung des Benutzer-Agents, der mit der Webanwendung verhandelt

Visual Studio 2017 und ASP.NET 4.7.2 erleichtern Entwicklern die Integration in externe Authentifizierungsdienste, indem sie integrierte Integration für die folgenden Authentifizierungsdienste bereitstellen:

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

Die Beispiele in dieser exemplarischen Vorgehensweise veranschaulichen, wie sie die einzelnen unterstützten externen Authentifizierungsdienste mithilfe der neuen ASP.NET-Webanwendungsvorlage konfigurieren, die in Visual Studio 2017 enthalten ist.

Hinweis

Ggf. müssen Sie Ihren FQDN den Einstellungen für Ihren externen Authentifizierungsdienst hinzufügen. Diese Anforderung basiert auf Sicherheitseinschränkungen für einige externe Authentifizierungsdienste, die erfordern, dass der FQDN in Ihren Anwendungseinstellungen dem von Ihren Clients verwendeten FQDN entspricht. (Die Schritte hierfür variieren für jeden externen Authentifizierungsdienst stark. Sie müssen die Dokumentation für jeden externen Authentifizierungsdienst lesen, um zu sehen, ob dies erforderlich ist und wie diese Einstellungen konfiguriert werden.) Wenn Sie IIS Express konfigurieren müssen, um einen FQDN zum Testen dieser Umgebung zu verwenden, lesen Sie den Abschnitt Konfigurieren IIS Express für die Verwendung eines vollqualifizierten Domänennamens 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, und Sie verwenden diese Beispielanwendung für jeden externen Authentifizierungsdienst weiter unten in dieser exemplarischen Vorgehensweise.

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

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

Bild des Dialogfelds .

Wenn das Neue ASP.NET Projekt angezeigt wird, wählen Sie die Einzelseitenanwendungsvorlage aus, und klicken Sie auf Projekt erstellen.

Bild der Vorlagenauswahl

Warten Sie, während Visual Studio 2017 Ihr Projekt erstellt.

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

Wenn Sie das Projekt zum ersten Mal erstellen, ist keiner der externen Authentifizierungsdienste in der Datei Startup.Auth.cs aktiviert. Im Folgenden wird veranschaulicht, wie Ihr Code aussehen könnte, wobei die Abschnitte hervorgehoben sind, in denen Sie einen externen Authentifizierungsdienst aktivieren würden, und alle relevanten Einstellungen, um die 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.

Abbildung 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

Wenn Sie die Facebook-Authentifizierung verwenden, müssen Sie ein Facebook-Entwicklerkonto erstellen, und Ihr Projekt benötigt eine Anwendungs-ID und einen geheimen Schlüssel von Facebook, um zu funktionieren. Informationen zum Erstellen eines Facebook-Entwicklerkontos und zum Abrufen Ihrer Anwendungs-ID und des 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 Datei Startup.Auth.cs .

  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 hervorgehobenen Codezeilen aufzuheben, und fügen Sie dann Ihre Anwendungs-ID und den geheimen Schlü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: "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:

    Bild von Facebook definiert

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

    Bild der Facebook-Anmeldeseite

  6. Nachdem Sie Ihre Facebook-Anmeldeinformationen eingegeben und auf Anmelden geklickt haben, wird Ihr Webbrowser zurück zu Ihrer Webanwendung weitergeleitet, die Sie zur Eingabe des Benutzernamens auffordert, den Sie Ihrem Facebook-Konto zuordnen möchten:

    Abbildung der Webanwendung

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

    Bild mit der Standardmäßigen Facebook-Startseite

Aktivieren der Google-Authentifizierung

Wenn Sie die Google-Authentifizierung verwenden, müssen Sie ein Google-Entwicklerkonto erstellen, und Ihr Projekt erfordert 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 des 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 Datei Startup.Auth.cs .

  2. Suchen Sie den Codeabschnitt für die Google-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 Codezeilen aufzuheben, und fügen Sie dann Ihre Anwendungs-ID und den geheimen Schlü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, das Google definiert wurde

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

    Abbildung der Google-Anmeldeseite

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

    Abbildung der Google-Berechtigungen

  7. Wenn Sie auf Akzeptieren klicken, wird Ihr Webbrowser zurück zu Ihrer Webanwendung weitergeleitet, wo Sie zur Eingabe des Benutzernamens aufgefordert werden, den Sie Ihrem Google-Konto zuordnen möchten:

    Abbildung der Webanwendungsaufforderung zum Zuordnen des Benutzernamens

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

    Bild der Google-Standardstartseite

Aktivieren der Microsoft-Authentifizierung

Die Microsoft-Authentifizierung erfordert, dass Sie ein Entwicklerkonto erstellen. Für die Funktion sind eine Client-ID und ein geheimer Clientschlüssel erforderlich. Informationen zum Erstellen eines Microsoft-Entwicklerkontos und zum Abrufen Ihrer Client-ID und ihres geheimen Clientschlüssels finden Sie unter https://go.microsoft.com/fwlink/?LinkID=144070.

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

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

  2. Suchen Sie den Microsoft-Authentifizierungsabschnitt des Codes:

    // 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 auskommentierten Codezeilen aufzuheben, und fügen Sie dann Ihre Client-ID und den geheimen Clientschlü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: "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 der von Microsoft definierten)

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

    Abbildung der Microsoft-Anmeldeseite.

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

    Abbildung der Microsoft-Berechtigungen.

  7. Wenn Sie auf Ja klicken, wird Ihr Webbrowser zurück zu Ihrer Webanwendung weitergeleitet, in der Sie zur Eingabe des Benutzernamens aufgefordert werden, den Sie Ihrem Microsoft-Konto zuordnen möchten:

    Abbildung des Google-Kontos zum Zuordnen)

  8. Nachdem Sie Ihren Benutzernamen eingegeben und auf die Schaltfläche Registrieren geklickt haben, zeigt Ihre Webanwendung die Standardstartseite 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 es sind ein Consumerschlüssel und ein Verbrauchergeheimnis erforderlich, um zu funktionieren. Informationen zum Erstellen eines Twitter-Entwicklerkontos und zum Abrufen Ihres Consumerschlüssels und des geheimen Verbrauchergeheimnisses finden Sie unter https://go.microsoft.com/fwlink/?LinkID=252166.

Nachdem Sie Ihren Consumerschlüssel und den geheimen Consumerschlü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 Datei Startup.Auth.cs .

  2. Suchen Sie den Twitter-Authentifizierungsabschnitt des Codes:

    // 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 auskommentierten Codezeilen aufzuheben, und fügen Sie dann Ihren Consumerschlüssel und den geheimen Consumerschlü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: "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 Twitter-Schaltfläche klicken, wird Ihr Browser zur Twitter-Anmeldeseite weitergeleitet:

    Bild der Twitter-Anmeldeseite

  6. Nachdem Sie Ihre Twitter-Anmeldeinformationen eingegeben und auf App autorisieren geklickt haben, wird Ihr Webbrowser zurück zu Ihrer Webanwendung weitergeleitet, in der Sie zur Eingabe des Benutzernamens aufgefordert werden, den Sie Ihrem Twitter-Konto zuordnen möchten:

    Abbildung des Twitter-Kontos, das in der Web-App zugeordnet werden soll

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

    Bild der Standardmäßigen Twitter-Startseite

Zusätzliche Informationen

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

Kombinieren externer Authentifizierungsdienste

Für mehr Flexibilität können Sie mehrere externe Authentifizierungsdienste gleichzeitig definieren. Dies ermöglicht es den Benutzern Ihrer Webanwendung, ein Konto von einem der aktivierten externen Authentifizierungsdienste zu verwenden:

Abbildung mehrerer externer Authentifizierungsdienste

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

Einige externe Authentifizierungsanbieter unterstützen das Testen Ihrer Anwendung mit einer HTTP-Adresse wie http://localhost:port/nicht. Um dieses Problem zu umgehen, können Sie Ihrer HOSTS-Datei eine statische FQDN-Zuordnung (Fully Qualified Domain Name) 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 ihrer HOSTS-Datei einen statischen FQDN hinzu:

    1. Öffnen Sie eine Eingabeaufforderung mit erhöhten Rechten in Windows.

    2. Geben Sie folgenden Befehl ein:

      Editor %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ü Projekt , und wählen Sie dann die Eigenschaften Ihres Projekts aus. Sie können beispielsweise WebApplication1-Eigenschaften auswählen.
    2. Wählen Sie die Registerkarte Web aus.
    3. Geben Sie Ihren FQDN für die Projekt-URL ein. Sie würden beispielsweise eingeben http://www.wingtiptoys.com , ob dies die FQDN-Zuordnung war, die Sie ihrer HOSTS-Datei hinzugefügt haben.

  • Konfigurieren Sie IIS Express, um den FQDN für Ihre Anwendung zu verwenden:

    1. Öffnen Sie eine Eingabeaufforderung mit erhöhten Rechten in Windows.

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

      cd /d "%ProgramFiles%\IIS Express"

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

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

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

Abrufen ihrer Anwendungseinstellungen für die Microsoft-Authentifizierung

Das Verknüpfen einer Anwendung mit Windows Live für die Microsoft-Authentifizierung 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 Ihrem Microsoft-Kontonamen und Kennwort, und geben Sie sie ein, wenn Sie dazu aufgefordert werden, und klicken Sie dann auf Anmelden:

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

    Abbildung: Hinzufügen einer App.

  3. Wählen Sie ihre App unter Name aus, und die Seite mit den Anwendungseigenschaften wird angezeigt.

  4. Geben Sie die Umleitungsdomäne für Ihre Anwendung ein. Kopieren Sie die Anwendungs-ID , und wählen Sie unter Anwendungsgeheimnisdie Option Kennwort generieren aus. Kopieren Sie das angezeigte Kennwort. Die Anwendungs-ID und das Kennwort sind Ihre Client-ID und ihr geheimer Clientschlüssel. Wählen Sie OK und dann Speichern aus.

    Abbildung der Umleitungsdomäneninformationen.

Optional: Lokale Registrierung deaktivieren

Die aktuelle ASP.NET lokalen Registrierungsfunktion hindert automatisierte Programme (Bots) nicht daran, Mitgliedskonten zu 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 hierzu die Seite _Login.cshtml in Ihrem Projekt, und kommentieren Sie dann die Zeilen für den lokalen Anmeldebereich und den Registrierungslink 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, werden auf Ihrer Anmeldeseite nur die externen Authentifizierungsanbieter angezeigt, die Sie aktiviert haben:

Abbildung der Anmeldung externer Anbieter.