Freigeben über

Anmelden mithilfe externer Websites auf einer ASP.NET Web Pages -Website (Razor)

  • Artikel

von Tom FitzMacken

In diesem Artikel wird erläutert, wie Sie sich mit Facebook, Google, Twitter, Yahoo und anderen Websites bei Ihrer ASP.NET Web Pages (Razor)-Website anmelden. Das heißt, wie Sie OAuth und OpenID auf Ihrer Website unterstützen.

Sie lernen Folgendes:

  • Hier erfahren Sie, wie Sie die Anmeldung von anderen Websites aktivieren, wenn Sie die WebMatrix Starter Site-Vorlage verwenden.

Dies ist die ASP.NET Funktion, die im Artikel vorgestellt wird:

  • Das OAuthWebSecurity Hilfsprogramm.

Im Tutorial verwendete Softwareversionen

  • ASP.NET Web Pages (Razor) 2
  • WebMatrix 3

ASP.NET Web Pages umfasst Unterstützung für OAuth- und OpenID-Anbieter. Mit diesen Anbietern können Sie Benutzern ermöglichen, sich mit ihren vorhandenen Anmeldeinformationen von Facebook, Twitter, Microsoft und Google bei Ihrer Website anzumelden. Um sich beispielsweise mit einem Facebook-Konto anzumelden, können Benutzer einfach ein Facebook-Symbol auswählen, das sie zur Facebook-Anmeldeseite umleitet, auf der sie ihre Benutzerinformationen eingeben. Sie können dann den Facebook-Login mit ihrem Konto auf Ihrer Website verknüpfen. Eine entsprechende Erweiterung der Mitgliedschaftsfeatures von Webseiten besteht darin, dass Benutzer mehrere Anmeldungen (einschließlich Anmeldungen von Websites sozialer Netzwerke) einem einzelnen Konto auf Ihrer Website zuordnen können.

Diese Abbildung zeigt die Anmeldeseite aus der Vorlage Starterwebsite , auf der ein Benutzer ein Facebook-, Twitter-, Google- oder Microsoft-Symbol auswählen kann, um die Anmeldung mit einem externen Konto zu aktivieren:

Externe Anbieter

Sie können die OAuth- und OpenID-Mitgliedschaft aktivieren, indem Sie die Auskommentierung einiger Codezeilen in der Starterwebsitevorlage aufheben. Die Methoden und Eigenschaften, die Sie für die Arbeit mit den OAuth- und OpenID-Anbietern verwenden, befinden sich in der WebMatrix.Security.OAuthWebSecurity -Klasse. Die Vorlage "Starterwebsite " enthält eine vollständige Mitgliedschaftsinfrastruktur mit einer Anmeldeseite, einer Mitgliedschaftsdatenbank und dem gesamten Code, den Sie benötigen, damit sich Benutzer mit lokalen Anmeldeinformationen oder mit anmeldeinformationen von einer anderen Website bei Ihrer Website anmelden können.

Dieser Abschnitt enthält ein Beispiel dafür, wie Benutzer sich von externen Websites bei einer Website anmelden können, die auf der Vorlage "Starterwebsite" basiert. Nachdem Sie eine Startwebsite erstellt haben, führen Sie dies aus (Details folgen):

  • Für die Websites, die einen OAuth-Anbieter verwenden (Facebook, Twitter und Microsoft), erstellen Sie eine Anwendung auf der externen Website. Dadurch erhalten Sie Anwendungsschlüssel, die Sie benötigen, um die Anmeldefunktion für diese Websites aufzurufen.

  • Für Websites, die einen OpenID-Anbieter (Google) verwenden, müssen Sie keine Anwendung erstellen. Für alle diese Websites benötigen Sie ein Konto, um sich anzumelden und Entwickleranwendungen zu erstellen.

    Hinweis

    Microsoft-Anwendungen akzeptieren nur eine Live-URL für eine funktionierende Website, sodass Sie keine lokale Website-URL zum Testen von Anmeldungen verwenden können.

  • Bearbeiten Sie einige Dateien auf Ihrer Website, um den entsprechenden Authentifizierungsanbieter anzugeben und eine Anmeldung an die Website zu übermitteln, die Sie verwenden möchten.

Dieser Artikel enthält separate Anweisungen für die folgenden Aufgaben:

Aktivieren von Google-Anmeldungen

  1. Erstellen oder öffnen Sie eine ASP.NET Web Pages Website, die auf der Vorlage WebMatrix Starter Site basiert.

  2. Öffnen Sie die Seite _AppStart.cshtml , und heben Sie die Auskommentierung der folgenden Codezeile auf.

    OAuthWebSecurity.RegisterGoogleClient();

Testen der Google-Anmeldung

  1. Führen Sie die Seite default.cshtml Ihrer Website aus, und wählen Sie die Schaltfläche Anmelden aus.

  2. Wählen Sie auf der Anmeldeseite im Abschnitt Anderen Dienst zum Anmelden verwenden entweder die Schaltfläche Google oder Yahoo senden aus. In diesem Beispiel wird die Google-Anmeldung verwendet.

    Die Webseite leitet die Anforderung an die Google-Anmeldeseite um.

    Google-Anmeldung

  3. Geben Sie die Anmeldeinformationen für ein vorhandenes Google-Konto ein.

  4. Wenn Google Sie fragt, ob Sie Localhost erlauben möchten, Informationen aus dem Konto zu verwenden, klicken Sie auf Zulassen.

    Der Code verwendet das Google-Token, um den Benutzer zu authentifizieren, und kehrt dann zu dieser Seite auf Ihrer Website zurück. Auf dieser Seite können Benutzer ihre Google-Anmeldung mit einem vorhandenen Konto auf Ihrer Website verknüpfen, oder sie können ein neues Konto auf Ihrer Website registrieren, um den externen Login zu verknüpfen.

    Screenshot: Registrierungsseite

  5. Wählen Sie die Schaltfläche Zuordnen aus. Der Browser kehrt zur Startseite Ihrer Anwendung zurück.

Aktivieren von Facebook-Anmeldungen

  1. Wechseln Sie zur Facebook-Entwicklerwebsite (melden Sie sich an, wenn Sie noch nicht angemeldet sind).

  2. Wählen Sie die Schaltfläche Neue App erstellen aus, und folgen Sie dann den Anweisungen, um die neue Anwendung zu benennen und zu erstellen.

  3. Wählen Sie im Abschnitt Auswählen, wie Ihre App in Facebook integriert werden soll den Abschnitt Website aus.

  4. Geben Sie im Feld Website-URL die URL Ihrer Website ein (z. B http://www.example.com. ). Das Feld Domäne ist optional. Sie können dies verwenden, um die Authentifizierung für eine gesamte Domäne (z. B. example.com) bereitzustellen.

    Hinweis

    Wenn Sie eine Website auf Ihrem lokalen Computer mit einer URL wie http://localhost:12345 (wobei die Nummer eine lokale Portnummer ist) ausführen, können Sie diesen Wert zum Testen Ihrer Website dem Feld Website-URL hinzufügen. Jedes Mal, wenn sich die Portnummer Ihrer lokalen Website ändert, müssen Sie jedoch das Feld Website-URL Ihrer Anwendung aktualisieren.

  5. Wählen Sie die Schaltfläche Änderungen speichern aus.

  6. Wählen Sie erneut die Registerkarte Apps aus, und zeigen Sie dann die Startseite für Ihre Anwendung an.

  7. Kopieren Sie die Werte app ID und App Secret für Ihre Anwendung, und fügen Sie sie in eine temporäre Textdatei ein. Sie übergeben diese Werte an den Facebook-Anbieter im Code Ihrer Website.

  8. Verlassen Sie die Facebook-Entwicklerwebsite.

Jetzt nehmen Sie Änderungen an zwei Seiten auf Ihrer Website vor, damit sich Benutzer mit ihren Facebook-Konten bei der Website anmelden können.

  1. Erstellen oder öffnen Sie eine ASP.NET Web Pages Website, die auf der Vorlage WebMatrix Starter Site basiert.

  2. Öffnen Sie die Seite _AppStart.cshtml , und heben Sie die Auskommentierung des Codes für den Facebook OAuth-Anbieter auf. Der nicht kommentierte Codeblock sieht wie folgt aus:

    OAuthWebSecurity.RegisterFacebookClient(
        appId: "",
        appSecret: "");

  3. Kopieren Sie den App-ID-Wert aus der Facebook-Anwendung als Wert des appId Parameters (innerhalb der Anführungszeichen).

  4. Kopieren Sie den App-Geheimniswert aus der Facebook-Anwendung als appSecret Parameterwert.

  5. Speichern und schließen Sie die Datei.

Testen der Facebook-Anmeldung

  1. Führen Sie die Seite default.cshtml der Website aus, und wählen Sie die Schaltfläche Anmelden aus.

  2. Wählen Sie auf der Anmeldeseite im Abschnitt Anderen Dienst zum Anmelden verwenden das Facebook-Symbol aus.

    Die Webseite leitet die Anforderung an die Facebook-Anmeldeseite um.

    oauth-2

  3. Melden Sie sich bei einem Facebook-Konto an.

    Der Code verwendet das Facebook-Token, um Sie zu authentifizieren und kehrt dann zu einer Seite zurück, auf der Sie Ihre Facebook-Anmeldung mit der Anmeldung Ihrer Website verknüpfen können. Ihr Benutzername oder Ihre E-Mail-Adresse wird in das Feld Email des Formulars eingegeben.

    Screenshot: Seite

  4. Wählen Sie die Schaltfläche Zuordnen aus.

    Der Browser kehrt zur Startseite zurück, und Sie sind angemeldet.

Aktivieren von Twitter-Anmeldungen

  1. Navigieren Sie zur Twitter-Entwicklerwebsite.

  2. Wählen Sie den Link App erstellen aus, und melden Sie sich dann bei der Website an.

  3. Füllen Sie im Formular Anwendung erstellen die Felder Name und Beschreibung aus.

  4. Geben Sie im Feld Website die URL Ihrer Website ein (z. B. http://www.example.com).

    Hinweis

    Wenn Sie Ihre Website lokal testen (mit einer URL wie http://localhost:12345), akzeptiert Twitter die URL möglicherweise nicht. Möglicherweise können Sie jedoch die lokale Loopback-IP-Adresse verwenden (z. B http://127.0.0.1:12345. ). Dies vereinfacht das lokale Testen Ihrer Anwendung. Jedes Mal, wenn sich die Portnummer Ihrer lokalen Website ändert, müssen Sie jedoch das Feld Website ihrer Anwendung aktualisieren.

  5. Geben Sie im Feld Rückruf-URL eine URL für die Seite auf Ihrer Website ein, zu der Benutzer nach der Anmeldung bei Twitter zurückkehren sollen. Wenn Sie z. B. Benutzer zur Startseite der Starterwebsite (die ihre angemeldeten status erkennt), geben Sie dieselbe URL ein, die Sie im Feld Website eingegeben haben.

  6. Akzeptieren Sie die Bedingungen, und wählen Sie die Schaltfläche Create your Twitter application (Twitter-Anwendung erstellen ) aus.

  7. Wählen Sie auf der Startseite "Meine Anwendungen " die Anwendung aus, die Sie erstellt haben.

  8. Scrollen Sie auf der Registerkarte Details nach unten, und wählen Sie die Schaltfläche Mein Zugriffstoken erstellen aus.

  9. Kopieren Sie auf der Registerkarte Details die Werte Consumer Key und Consumer Secret für Ihre Anwendung, und fügen Sie sie in eine temporäre Textdatei ein. Sie übergeben diese Werte an den Twitter-Anbieter im Code Ihrer Website.

  10. Verlassen Sie die Twitter-Website.

Jetzt nehmen Sie Änderungen an zwei Seiten auf Ihrer Website vor, sodass sich Benutzer mit ihren Twitter-Konten bei der Website anmelden können.

  1. Erstellen oder öffnen Sie eine ASP.NET Web Pages Website, die auf der WebMatrix Starter Site-Vorlage basiert.

  2. Öffnen Sie die Seite _AppStart.cshtml , und heben Sie die Auskommentierung für den Twitter OAuth-Anbieter auf. Der nicht kommentierte Codeblock sieht wie folgt aus:

    OAuthWebSecurity.RegisterTwitterClient(
        consumerKey: "",
        consumerSecret: "");

  3. Kopieren Sie den Consumer Key-Wert aus der Twitter-Anwendung als Wert des consumerKey Parameters (innerhalb der Anführungszeichen).

  4. Kopieren Sie den Consumer Secret-Wert aus der Twitter-Anwendung als Wert des consumerSecret Parameters.

  5. Speichern und schließen Sie die Datei.

Testen der Twitter-Anmeldung

  1. Führen Sie die Seite default.cshtml Ihrer Website aus, und wählen Sie die Schaltfläche Anmelden aus.

  2. Wählen Sie auf der Seite Anmeldung im Abschnitt Verwenden eines anderen Diensts zum Anmelden das Twitter-Symbol aus.

    Die Webseite leitet die Anforderung an eine Twitter-Anmeldeseite für die von Ihnen erstellte Anwendung um.

    oauth-4

  3. Melden Sie sich bei einem Twitter-Konto an.

  4. Der Code verwendet das Twitter-Token, um den Benutzer zu authentifizieren und Sie dann zu einer Seite zurück, auf der Sie Ihre Anmeldung Ihrem Websitekonto zuordnen können. Ihr Name oder Ihre E-Mail-Adresse wird in das feld Email des Formulars eingegeben.

    Screenshot: Kontoregistrierungsseite

  5. Wählen Sie die Schaltfläche Zuordnen aus.

    Der Browser kehrt zur Startseite zurück, und Sie sind angemeldet.

Zusätzliche Ressourcen