Erstellen einer ASP.NET MVC 5-App mit Facebook, Twitter, LinkedIn und Google OAuth2-Anmeldung (C#)

von Rick Anderson

In diesem Tutorial erfahren Sie, wie Sie eine ASP.NET MVC 5-Webanwendung erstellen, die es Benutzern ermöglicht, sich mit OAuth 2.0 mit Anmeldeinformationen eines externen Authentifizierungsanbieters wie Facebook, Twitter, LinkedIn, Microsoft oder Google anzumelden. Der Einfachheit halber konzentriert sich dieses Tutorial auf die Arbeit mit Anmeldeinformationen von Facebook und Google.

Das Aktivieren dieser Anmeldeinformationen in Ihren Websites bietet einen erheblichen Vorteil, da Millionen von Benutzern bereits Über Konten bei diesen externen Anbietern verfügen. Diese Benutzer sind möglicherweise eher geneigt, sich für Ihre Website zu registrieren, wenn sie keine neuen Anmeldeinformationen erstellen und sich merken müssen.

Siehe auch ASP.NET MVC 5-App mit SMS und E-Mail Two-Factor Authentifizierung.

Das Tutorial zeigt auch, wie Sie Profildaten für den Benutzer hinzufügen und die Mitgliedschafts-API zum Hinzufügen von Rollen verwenden. Dieses Tutorial wurde von Rick Anderson geschrieben ( Bitte folgen Sie mir auf Twitter: @RickAndMSFT ).

Erste Schritte

Beginnen Sie mit der Installation und Ausführung Visual Studio Express 2013 für Web oder Visual Studio 2013. Installieren Sie Visual Studio 2013 Update 3 oder höher.

Klicken Sie auf der Startseite auf Neues Projekt, oder Sie können das Menü verwenden, und wählen Sie Datei und dann Neues Projekt aus.

Erstellen Ihrer ersten Anwendung

Klicken Sie auf Neues Projekt, wählen Sie dann auf der linken Seite Visual C# und dann Web und dann ASP.NET Webanwendung aus. Nennen Sie Ihr Projekt "MvcAuth", und klicken Sie dann auf OK.

Klicken Sie im Dialogfeld Neues ASP.NET Projekt auf MVC. Wenn die Authentifizierung keine individuellen Benutzerkonten ist, klicken Sie auf die Schaltfläche Authentifizierung ändern , und wählen Sie Einzelne Benutzerkonten aus. Durch das Überprüfen von Host in der Cloud ist die App sehr einfach in Azure zu hosten.

Wenn Sie Host in der Cloud ausgewählt haben, schließen Sie das Dialogfeld konfigurieren aus.

Verwenden von NuGet zum Aktualisieren auf die neueste OWIN-Middleware

Verwenden Sie den NuGet-Paket-Manager, um die OWIN-Middleware zu aktualisieren. Wählen Sie im linken Menü Updates aus. Sie können auf die Schaltfläche Alle aktualisieren klicken oder nur nach OWIN-Paketen suchen (in der nächsten Abbildung dargestellt):

In der folgenden Abbildung sind nur OWIN-Pakete dargestellt:

In der Paket-Manager-Konsole (PMC) können Sie den Befehl eingeben, mit dem Update-Package alle Pakete aktualisiert werden.

Drücken Sie F5 oder STRG+F5 , um die Anwendung auszuführen. In der folgenden Abbildung lautet die Portnummer 1234. Wenn Sie die Anwendung ausführen, wird eine andere Portnummer angezeigt.

Abhängig von der Größe Ihres Browserfensters müssen Sie möglicherweise auf das Navigationssymbol klicken, um die Links Start, Info, Kontakt, Registrieren und Anmelden anzuzeigen.

Einrichten von SSL im Projekt

Um eine Verbindung mit Authentifizierungsanbietern wie Google und Facebook herzustellen, müssen Sie IIS-Express einrichten, um SSL zu verwenden. Es ist wichtig, nach der Anmeldung weiterhin SSL zu verwenden und nicht auf HTTP zurückzugeben. Ihr Anmeldecooky ist genauso geheim wie Ihr Benutzername und Ihr Kennwort, und ohne SSL senden Sie es in Klartext über das Kabel. Darüber hinaus haben Sie sich bereits die Zeit genommen, den Handshake auszuführen und den Kanal zu sichern (was den Großteil der https langsamer als HTTP macht), bevor die MVC-Pipeline ausgeführt wird. Wenn Sie nach der Anmeldung zurück zu HTTP umgeleitet werden, wird die aktuelle Anforderung oder zukünftige Anforderungen nicht viel schneller.

1. Klicken Sie in Projektmappen-Explorer auf das Projekt MvcAuth.

2. Drücken Sie die F4-Taste, um die Projekteigenschaften anzuzeigen. Alternativ können Sie im Menü Ansichtdie Option Eigenschaftenfenster auswählen.

3. Ändern Sie SSL Aktiviert in True.

   

4. Kopieren Sie die SSL-URL ( https://localhost:44300/ sofern Sie keine anderen SSL-Projekte erstellt haben).

5. Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf das Projekt MvcAuth, und wählen Sie Eigenschaften aus.

6. Wählen Sie die Registerkarte Web aus, und fügen Sie dann die SSL-URL in das Feld Projekt-URL ein. Speichern Sie die Datei (Ctl+S). Sie benötigen diese URL zum Konfigurieren von Facebook- und Google-Authentifizierungs-Apps.

   

7. Fügen Sie dem Controller das Attribut RequireHttps hinzu Home , damit alle Anforderungen HTTPS verwenden müssen. Ein sichererer Ansatz ist das Hinzufügen des Filters RequireHttps zur Anwendung. Weitere Informationen finden Sie im Abschnitt "Schützen der Anwendung mit SSL und autorisieren" in meinem Tutorial Erstellen einer ASP.NET MVC-App mit Authentifizierung und SQL-Datenbank und Bereitstellung in Azure App Service. Ein Teil des Homecontrollers ist unten dargestellt.

   [RequireHttps]
   public class HomeController : Controller
   {
      public ActionResult Index()
      {
         return View();
      }
   

8. Drücken Sie STRG+F5, um die Anwendung auszuführen. Wenn Sie das Zertifikat in der Vergangenheit installiert haben, können Sie den Rest dieses Abschnitts überspringen und zum Erstellen einer Google-App für OAuth 2 wechseln und die App mit dem Projekt verbinden. Andernfalls befolgen Sie die Anweisungen, um dem selbstsignierten Zertifikat zu vertrauen, das IIS Express generiert hat.

   

9. Lesen Sie das Dialogfeld Sicherheitswarnung , und klicken Sie dann auf Ja , wenn Sie das Zertifikat installieren möchten, das localhost darstellt.

   

10. Die Seite Home wird in IE angezeigt, und es gibt keine SSL-Warnungen.

    

11. Google Chrome akzeptiert auch das Zertifikat und zeigt HTTPS-Inhalte ohne Warnung an. Firefox verwendet einen eigenen Zertifikatspeicher, sodass eine Warnung angezeigt wird. Für unsere Anwendung können Sie sicher auf Ich verstehe die Risiken klicken.

    

Erstellen einer Google-App für OAuth 2 und Verbinden der App mit dem Projekt

1. Navigieren Sie zur Google Developers Console.

2. Wenn Sie noch kein Projekt erstellt haben, wählen Sie auf der linken Registerkarte Anmeldeinformationen und dann Erstellen aus.

3. Klicken Sie auf der linken Registerkarte auf Anmeldeinformationen.

4. Klicken Sie auf Anmeldeinformationen erstellen und dann auf OAuth-Client-ID.

   1. Behalten Sie im Dialogfeld Client-ID erstellen die Standardwebanwendung für den Anwendungstyp bei.
   2. Legen Sie die autorisierten JavaScript-Ursprünge auf die oben verwendete SSL-URL fest (https://localhost:44300/ es sei denn, Sie haben andere SSL-Projekte erstellt).
   3. Legen Sie den autorisierten Umleitungs-URI auf fest:
      https://localhost:44300/signin-google

5. Klicken Sie auf das Menüelement OAuth-Zustimmung, und legen Sie dann Ihre E-Mail-Adresse und Den Produktnamen fest. Wenn Sie das Formular ausgefüllt haben, klicken Sie auf Speichern.

6. Klicken Sie auf das Menüelement Bibliothek, suchen Sie nach Google+-API, klicken Sie darauf, und klicken Sie dann auf Aktivieren.

   

   Die folgende Abbildung zeigt die aktivierten APIs.

   

7. Besuchen Sie im API-Manager von Google APIs die Registerkarte Anmeldeinformationen , um die Client-ID abzurufen. Laden Sie herunter, um eine JSON-Datei mit Anwendungsgeheimnissen zu speichern. Kopieren Sie clientId und ClientSecret , und fügen Sie sie in die Methode ein, die UseGoogleAuthentication in der Datei Startup.Auth.cs im Ordner App_Start gefunden wurde. Die unten gezeigten ClientId- und ClientSecret-Werte sind Beispiele und funktionieren nicht.

   public void ConfigureAuth(IAppBuilder app)
   {
       // Configure the db context and user manager to use a single instance per request
       app.CreatePerOwinContext(ApplicationDbContext.Create);
       app.CreatePerOwinContext<ApplicationUserManager>(ApplicationUserManager.Create);
   
       // Enable the application to use a cookie to store information for the signed in user
       // and to use a cookie to temporarily store information about a user logging in with a third party login provider
       // Configure the sign in cookie
       app.UseCookieAuthentication(new CookieAuthenticationOptions
       {
           AuthenticationType = DefaultAuthenticationTypes.ApplicationCookie,
           LoginPath = new PathString("/Account/Login"),
           Provider = new CookieAuthenticationProvider
           {
               OnValidateIdentity = SecurityStampValidator.OnValidateIdentity<ApplicationUserManager, ApplicationUser>(
                   validateInterval: TimeSpan.FromMinutes(30),
                   regenerateIdentity: (manager, user) => user.GenerateUserIdentityAsync(manager))
           }
       });
       
       app.UseExternalSignInCookie(DefaultAuthenticationTypes.ExternalCookie);
   
       // 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(
            clientId: "000-000.apps.googleusercontent.com",
            clientSecret: "00000000000");
   }
   

   Warnung

   Sicherheit: Speichern Sie vertrauliche Daten niemals in Ihrem Quellcode. Das Konto und die Anmeldeinformationen werden dem obigen Code hinzugefügt, um das Beispiel einfach zu halten. Weitere Informationen finden Sie unter Bewährte Methoden zum Bereitstellen von Kennwörtern und anderen vertraulichen Daten für ASP.NET und Azure App Service.

8. Drücken Sie STRG+F5 , um die Anwendung zu erstellen und auszuführen. Klicken Sie auf den Link Log in .

   

9. Klicken Sie unter Anmelden mit einem anderen Dienst auf Google.

   

   Hinweis

   Wenn Sie einen der obigen Schritte verpassen, erhalten Sie einen HTTP 401-Fehler. Überprüfen Sie die obigen Schritte erneut. Wenn Eine erforderliche Einstellung (z. B . Produktname) fehlt, fügen Sie das fehlende Element hinzu, und speichern Sie; Es kann einige Minuten dauern, bis die Authentifizierung funktioniert.

10. Sie werden zur Google-Website weitergeleitet, wo Sie Ihre Anmeldeinformationen eingeben.

    

11. Nachdem Sie Ihre Anmeldeinformationen eingegeben haben, werden Sie aufgefordert, Berechtigungen für die soeben erstellten Webanwendung zu erteilen:

    

12. Klicken Sie auf Annehmen. Sie werden nun zurück zur Registrierungsseite der MvcAuth-Anwendung weitergeleitet, wo Sie Ihr Google-Konto registrieren können. Sie können zwar den lokalen E-Mail-Registrierungsnamen in Ihr Gmail-Konto ändern, im Allgemeinen sollten Sie jedoch den Standard-E-Mail-Aliasnamen beibehalten (den Sie für die Authentifizierung verwendet haben). Klicke auf Registrieren.

    

Erstellen der App in Facebook und Verbinden der App mit dem Projekt

Untersuchen der Mitgliedschaftsdaten mithilfe von Server-Explorer

Klicken Sie im Menü Ansicht auf Server Explorer.

Erweitern Sie DefaultConnection (MvcAuth), erweitern Sie Tabellen, klicken Sie mit der rechten Maustaste auf AspNetUsers , und klicken Sie auf Tabellendaten anzeigen.

Hinzufügen von Profildaten zur Benutzerklasse

In diesem Abschnitt fügen Sie den Benutzerdaten während der Registrierung Geburtsdatum und Heimatort hinzu, wie in der folgenden Abbildung gezeigt.

Öffnen Sie die Datei Models\IdentityModels.cs , und fügen Sie Geburtsdatum und Heimatorteigenschaften hinzu:

public class ApplicationUser : IdentityUser
{
    public string HomeTown { get; set; }
    public System.DateTime? BirthDate { get; set; }
    public async Task<ClaimsIdentity> GenerateUserIdentityAsync(UserManager<ApplicationUser> manager)
    {
        // Note the authenticationType must match the one defined in CookieAuthenticationOptions.AuthenticationType
        var userIdentity = await manager.CreateIdentityAsync(this, DefaultAuthenticationTypes.ApplicationCookie);
        // Add custom user claims here
        return userIdentity;
    }
}

Öffnen Sie die Datei Models\AccountViewModels.cs , und legen Sie die Eigenschaften Geburtsdatum und Heimatort in fest ExternalLoginConfirmationViewModel.

public class ExternalLoginConfirmationViewModel
{
    [Required]
    [EmailAddress]
    [Display(Name = "Email")]
    public string Email { get; set; }

    public string HomeTown { get; set; }
    public System.DateTime? BirthDate { get; set; }
}

Öffnen Sie die Datei Controller\AccountController.cs , und fügen Sie code für Geburtsdatum und Heimatort in der ExternalLoginConfirmation Aktionsmethode wie gezeigt hinzu:

[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public async Task<ActionResult> ExternalLoginConfirmation(ExternalLoginConfirmationViewModel model, string returnUrl)
{
    if (User.Identity.IsAuthenticated)
    {
        return RedirectToAction("Manage");
    }

    if (ModelState.IsValid)
    {
        // Get the information about the user from the external login provider
        var info = await AuthenticationManager.GetExternalLoginInfoAsync();
        if (info == null)
        {
            return View("ExternalLoginFailure");
        }
        var user = new ApplicationUser() 
        {
            UserName = model.Email, Email = model.Email,
            BirthDate = model.BirthDate,
            HomeTown  = model.HomeTown
        
        };
        IdentityResult result = await UserManager.CreateAsync(user);
        if (result.Succeeded)
        {
            result = await UserManager.AddLoginAsync(user.Id, info.Login);
            if (result.Succeeded)
            {
                await SignInAsync(user, isPersistent: false);
                
                // For more information on how to enable account confirmation and password reset please visit https://go.microsoft.com/fwlink/?LinkID=320771
                // Send an email with this link
                // string code = await UserManager.GenerateEmailConfirmationTokenAsync(user.Id);
                // var callbackUrl = Url.Action("ConfirmEmail", "Account", new { userId = user.Id, code = code }, protocol: Request.Url.Scheme);
                // SendEmail(user.Email, callbackUrl, "Confirm your account", "Please confirm your account by clicking this link");
                
                return RedirectToLocal(returnUrl);
            }
        }
        AddErrors(result);
    }

    ViewBag.ReturnUrl = returnUrl;
    return View(model);
}

Fügen Sie der Datei Views\Account\ExternalLoginConfirmation.cshtml Geburtsdatum und Heimatort hinzu:

@model MvcAuth.Models.ExternalLoginConfirmationViewModel
@{
    ViewBag.Title = "Register";
}
<h2>@ViewBag.Title.</h2>
<h3>Associate your @ViewBag.LoginProvider account.</h3>

@using (Html.BeginForm("ExternalLoginConfirmation", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
    @Html.AntiForgeryToken()

    <h4>Association Form</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <p class="text-info">
        You've successfully authenticated with <strong>@ViewBag.LoginProvider</strong>.
            Please enter a user name for this site below and click the Register button to finish
            logging in.
    </p>
    <div class="form-group">
        @Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.HomeTown, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.HomeTown, new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.HomeTown)
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.BirthDate, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.BirthDate, new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.BirthDate)
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-default" value="Register" />
        </div>
    </div>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Löschen Sie die Mitgliedschaftsdatenbank, damit Sie Ihr Facebook-Konto erneut mit Ihrer Anwendung registrieren und überprüfen können, ob Sie das neue Geburtsdatum und die Profilinformationen ihrer Heimatstadt hinzufügen können.

Klicken Sie Projektmappen-Explorer auf das Symbol Alle Dateien anzeigen, klicken Sie dann mit der rechten Maustaste auf Add_Data\aspnet-MvcAuth-dateStamp.mdf<>, und klicken Sie dann auf Löschen.

Klicken Sie im Menü Extras auf NuGet-Paketverwaltung, und klicken Sie dann auf Paket-Manager-Konsole (PMC). Geben Sie die folgenden Befehle im PMC ein.

1. Enable-Migrations
2. Add-Migration Init
3. Update-Database

Führen Sie die Anwendung aus, und verwenden Sie FaceBook und Google, um sich anzumelden und einige Benutzer zu registrieren.

Untersuchen der Mitgliedschaftsdaten

Klicken Sie im Menü Ansicht auf Server Explorer.

Klicken Sie mit der rechten Maustaste auf AspNetUsers , und klicken Sie auf Tabellendaten anzeigen.

Die HomeTown Felder und BirthDate sind unten dargestellt.

Abmelden ihrer App und Anmelden mit einem anderen Konto

Wenn Sie sich bei Ihrer App mit Facebook anmelden und sich dann abmelden und versuchen, sich erneut mit einem anderen Facebook-Konto anzumelden (mit demselben Browser), werden Sie sofort bei dem vorherigen Facebook-Konto angemeldet, das Sie verwendet haben. Um ein anderes Konto zu verwenden, müssen Sie zu Facebook navigieren und sich bei Facebook abmelden. Die gleiche Regel gilt für alle anderen Drittanbieterauthentifizierungsanbieter. Alternativ können Sie sich mit einem anderen Konto anmelden, indem Sie einen anderen Browser verwenden.

Nächste Schritte

Folgen Sie meinem Tutorial Erstellen einer ASP.NET MVC-App mit Authentifizierung und SQL-Datenbank und Bereitstellen in Azure App Service. Dieses Tutorial wird fortgesetzt und zeigt Folgendes:

1. So stellen Sie Ihre App in Azure bereit.
2. So schützen Sie Ihre App mit Rollen.
3. Schützen Ihrer App mit den Filtern "RequireHttps" und "Authorize".
4. Verwenden der Mitgliedschafts-API zum Hinzufügen von Benutzern und Rollen

Eine gute Erklärung zur Funktionsweise von ASP.NET externen Authentifizierungsdiensten finden Sie unter Externe Authentifizierungsdienste von Robert McMurray. Roberts Artikel geht auch ausführlich auf die Aktivierung der Microsoft- und Twitter-Authentifizierung ein. Das hervorragende EF/MVC-Tutorial von Tom Dykstra zeigt, wie Sie mit Entity Framework arbeiten.