Použití poskytovatelů OAuth v MVC 4
, autor: Tom FitzMacken
V tomto kurzu se dozvíte, jak vytvořit webovou aplikaci ASP.NET MVC 4, která uživatelům umožní přihlásit se pomocí přihlašovacích údajů od externího poskytovatele, jako je Facebook, Twitter, Microsoft nebo Google, a pak integrovat některé funkce od těchto poskytovatelů do webové aplikace. Pro zjednodušení se tento kurz zaměřuje na práci s přihlašovacími údaji z Facebooku.
Pokud chcete použít externí přihlašovací údaje ve webové aplikaci ASP.NET MVC 5, přečtěte si téma Vytvoření aplikace ASP.NET MVC 5 pomocí Facebooku a Google OAuth2 a přihlášení pomocí OpenID.
Povolení těchto přihlašovacích údajů na webech poskytuje významnou výhodu, protože miliony uživatelů už mají účty u těchto externích poskytovatelů. Tito uživatelé mohou být náchylnější k registraci na váš web, pokud nemusí vytvářet a pamatovat si novou sadu přihlašovacích údajů. Poté, co se uživatel přihlásí prostřednictvím některého z těchto poskytovatelů, můžete také začlenit sociální operace z tohoto poskytovatele.
Co vytvoříte
V tomto kurzu jsou dva hlavní cíle:
- Povolte uživateli přihlášení pomocí přihlašovacích údajů od poskytovatele OAuth.
- Načtěte informace o účtu od poskytovatele a integrujte je s registrací účtu pro váš web.
I když se příklady v tomto kurzu zaměřují na použití Facebooku jako zprostředkovatele ověřování, můžete kód upravit tak, aby používal libovolného zprostředkovatele. Postup implementace libovolného zprostředkovatele je velmi podobný krokům, které uvidíte v tomto kurzu. Při přímém volání sady rozhraní API zprostředkovatele si všimnete pouze výrazných rozdílů.
Požadavky
Nebo
- Microsoft Visual Studio 2010 SP1 nebo Visual Web Developer Express 2010 SP1
- ASP.NET MVC 4
Kromě toho toto téma předpokládá, že máte základní znalosti o ASP.NET MVC a sadě Visual Studio. Pokud potřebujete úvod do ASP.NET MVC 4, přečtěte si téma Úvod do ASP.NET MVC 4.
Vytvoření projektu
V sadě Visual Studio vytvořte novou webovou aplikaci ASP.NET MVC 4 a pojmenujte ji "OAuthMVC". Můžete cílit na .NET Framework 4.5 nebo 4.
V okně Nový projekt ASP.NET MVC 4 vyberte Internetová aplikace a jako modul zobrazení ponechte Razor .
Povolení poskytovatele
Když vytvoříte webovou aplikaci MVC 4 pomocí šablony Internetová aplikace, vytvoří se projekt se souborem AuthConfig.cs ve složce App_Start.
Soubor AuthConfig obsahuje kód pro registraci klientů pro externí zprostředkovatele ověřování. Ve výchozím nastavení je tento kód zakomentovaný, takže žádný z externích zprostředkovatelů není povolený.
public static class AuthConfig
{
public static void RegisterAuth()
{
// To let users of this site log in using their accounts from other sites such as Microsoft, Facebook, and Twitter,
// you must update this site. For more information visit https://go.microsoft.com/fwlink/?LinkID=252166
//OAuthWebSecurity.RegisterMicrosoftClient(
// clientId: "",
// clientSecret: "");
//OAuthWebSecurity.RegisterTwitterClient(
// consumerKey: "",
// consumerSecret: "");
//OAuthWebSecurity.RegisterFacebookClient(
// appId: "",
// appSecret: "");
//OAuthWebSecurity.RegisterGoogleClient();
}
}
Pokud chcete použít externího ověřovacího klienta, musíte tento kód zrušit. Odkomentujete jenom poskytovatele, které chcete na svém webu zahrnout. V tomto kurzu povolíte jenom přihlašovací údaje pro Facebook.
public static class AuthConfig
{
public static void RegisterAuth()
{
//OAuthWebSecurity.RegisterMicrosoftClient(
// clientId: "",
// clientSecret: "");
//OAuthWebSecurity.RegisterTwitterClient(
// consumerKey: "",
// consumerSecret: "");
OAuthWebSecurity.RegisterFacebookClient(
appId: "",
appSecret: "");
//OAuthWebSecurity.RegisterGoogleClient();
}
}
Ve výše uvedeném příkladu si všimněte, že metoda obsahuje prázdné řetězce pro parametry registrace. Pokud se pokusíte aplikaci spustit nyní, aplikace vyvolá výjimku argumentu, protože parametry nejsou povoleny prázdné řetězce. Chcete-li zadat platné hodnoty, musíte web zaregistrovat u externích zprostředkovatelů, jak je znázorněno v další části.
Registrace u externího poskytovatele
Chcete-li ověřovat uživatele pomocí přihlašovacích údajů od externího poskytovatele, je nutné zaregistrovat web u zprostředkovatele. Při registraci lokality obdržíte parametry (například klíč nebo ID a tajný klíč), které se mají zahrnout při registraci klienta. Musíte mít účet u poskytovatelů, které chcete používat.
V tomto kurzu se nezobrazují všechny kroky, které musíte provést k registraci u těchto poskytovatelů. Tento postup obvykle není složitý. Pokud chcete web úspěšně zaregistrovat, postupujte podle pokynů uvedených na těchto webech. Pokud chcete začít s registrací svého webu, podívejte se na web pro vývojáře, kde najdete:
Při registraci webu na Facebooku můžete zadat "localhost" pro doménu webu a "http://localhost/" adresu URL, jak je znázorněno na obrázku níže. Použití místního hostitele funguje u většiny poskytovatelů, ale v současné době nefunguje s poskytovatelem Microsoftu. U poskytovatele Microsoftu musíte zadat platnou adresu URL webu.
Na předchozím obrázku byly odebrány hodnoty pro ID aplikace, tajný kód aplikace a kontaktní e-mail. Když web skutečně zaregistrujete, budou tyto hodnoty k dispozici. Poznamenejte si hodnoty ID aplikace a tajného kódu aplikace, protože je přidáte do aplikace.
Vytváření testovacích uživatelů
Pokud vám nevadí použití existujícího facebookového účtu k otestování webu, můžete tuto část přeskočit.
Testovací uživatele pro vaši aplikaci můžete snadno vytvořit na stránce správy facebookových aplikací. Tyto testovací účty můžete použít k přihlášení k webu. Testovací uživatele vytvoříte kliknutím na odkaz Role v levém navigačním podokně a kliknutím na odkaz Vytvořit .
Facebookový web automaticky vytvoří požadovaný počet testovacích účtů.
Přidání ID aplikace a tajného klíče od poskytovatele
Teď, když jste získali ID a tajný kód z Facebooku, se vraťte do souboru AuthConfig a přidejte je jako hodnoty parametrů. Níže uvedené hodnoty nejsou reálné hodnoty.
public static class AuthConfig
{
public static void RegisterAuth()
{
//OAuthWebSecurity.RegisterMicrosoftClient(
// clientId: "",
// clientSecret: "");
//OAuthWebSecurity.RegisterTwitterClient(
// consumerKey: "",
// consumerSecret: "");
//OAuthWebSecurity.RegisterFacebookClient(
// appId: "",
// appSecret: "");
//OAuthWebSecurity.RegisterGoogleClient();
}
}
Přihlášení pomocí externích přihlašovacích údajů
To je vše, co musíte udělat, abyste na svém webu povolili externí přihlašovací údaje. Spusťte aplikaci a klikněte na přihlašovací odkaz v pravém horním rohu. Šablona automaticky rozpozná, že jste zaregistrovali Facebook jako poskytovatele, a obsahuje tlačítko pro poskytovatele. Pokud zaregistrujete více poskytovatelů, automaticky se zobrazí tlačítko pro každého z nich.
Tento kurz se nezabývá přizpůsobením tlačítek pro přihlášení pro externí poskytovatele. Informace najdete v tématu Přizpůsobení uživatelského rozhraní pro přihlášení při použití OAuth/OpenID.
Klikněte na tlačítko Facebook a přihlaste se pomocí přihlašovacích údajů Facebooku. Když vyberete jednoho z externích poskytovatelů, budete přesměrováni na tento web a tato služba vás vyzve k přihlášení.
Následující obrázek ukazuje přihlašovací obrazovku pro Facebook. Zaznamenává, že používáte svůj facebookový účet k přihlášení k webu s názvem oauthmvcexample.
Po přihlášení pomocí přihlašovacích údajů k Facebooku se uživateli zobrazí stránka s informací, že web bude mít přístup k základním informacím.
Po výběru možnosti Přejít do aplikace se uživatel musí zaregistrovat k webu. Následující obrázek ukazuje registrační stránku poté, co se uživatel přihlásí pomocí přihlašovacích údajů Facebooku. Uživatelské jméno je obvykle předem vyplněné názvem od poskytovatele.
Kliknutím na Zaregistrovat dokončete registraci. Zavřete prohlížeč.
Uvidíte, že byl nový účet přidán do vaší databáze. V Průzkumníku serveru otevřete databázi DefaultConnection a otevřete složku Tabulky .
Klikněte pravým tlačítkem na tabulku UserProfile a vyberte Zobrazit data tabulky.
Zobrazí se nový účet, který jste přidali. Prohlédněte si data v webpage_OAuthMembership tabulce. Pro účet, který jste právě přidali, uvidíte další data související s externím poskytovatelem.
Pokud chcete povolit jenom externí ověřování, máte hotovo. Informace od poskytovatele ale můžete dále integrovat do procesu registrace nového uživatele, jak je znázorněno v následujících částech.
Vytvoření modelů pro další informace o uživateli
Jak jste si všimli v předchozích částech, nemusíte načítat žádné další informace, aby předdefinovaná registrace účtu fungovala. Většina externích poskytovatelů ale předává další informace o uživateli. Následující části ukazují, jak tyto informace zachovat a uložit do databáze. Konkrétně si zachováte hodnoty pro celé jméno uživatele, identifikátor URI osobní webové stránky uživatele a hodnotu, která určuje, jestli Facebook účet ověřil.
Pomocí Migrace Code First přidáte tabulku pro ukládání dalších informací o uživateli. Přidáváte tabulku do existující databáze, takže budete muset nejprve vytvořit snímek aktuální databáze. Vytvořením snímku aktuální databáze můžete později vytvořit migraci, která bude obsahovat pouze novou tabulku. Vytvoření snímku aktuální databáze:
- Otevřete konzolu Správce balíčků.
- Spusťte příkaz enable-migrations.
- Spusťte příkaz add-migration initial –IgnoreChanges.
- Spusťte příkaz update-database.
Teď přidáte nové vlastnosti. Ve složce Models otevřete soubor AccountModels.cs a vyhledejte třídu RegisterExternalLoginModel. RegisterExternalLoginModel Třída obsahuje hodnoty, které vrací zprostředkovatele ověřování. Přidejte vlastnosti s názvy FullName a Link, jak je zvýrazněno níže.
public class RegisterExternalLoginModel
{
[Required]
[Display(Name = "User name")]
public string UserName { get; set; }
public string ExternalLoginData { get; set; }
[Display(Name = "Full name")]
public string FullName { get; set; }
[Display(Name = "Personal page link")]
public string Link { get; set; }
}
Do souboru AccountModels.cs také přidejte novou třídu s názvem ExtraUserInformation. Tato třída představuje novou tabulku, která bude vytvořena v databázi.
[Table("ExtraUserInformation")]
public class ExternalUserInformation
{
public int Id { get; set; }
public int UserId { get; set; }
public string FullName { get; set; }
public string Link { get; set; }
public bool? Verified { get; set; }
}
Ve třídě UsersContext přidejte níže zvýrazněný kód pro vytvoření vlastnosti DbSet pro novou třídu.
public class UsersContext : DbContext
{
public UsersContext()
: base("DefaultConnection")
{
}
public DbSet<UserProfile> UserProfiles { get; set; }
public DbSet<ExternalUserInformation> ExternalUsers { get; set; }
}
Teď jste připraveni vytvořit novou tabulku. Znovu otevřete konzolu Správce balíčků a tentokrát:
- Spusťte příkaz add-migration AddExtraUserInformation.
- Spusťte příkaz update-database.
Nová tabulka teď v databázi existuje.
Načtení dalších dat
Existují dva způsoby, jak načíst další uživatelská data. Prvním způsobem je zachovat uživatelská data, která se ve výchozím nastavení předávají zpět během žádosti o ověření. Druhým způsobem je konkrétně volat rozhraní API poskytovatele a vyžádat si další informace. Facebook automaticky předává hodnoty FullName a Link. Hodnota, která určuje, jestli Facebook ověřil účet, se načte prostřednictvím volání rozhraní API Facebooku. Nejprve vyplníte hodnoty FullName a Link a později získáte ověřenou hodnotu.
Pokud chcete načíst další uživatelská data, otevřete soubor AccountController.cs ve složce Controllers .
Tento soubor obsahuje logiku pro protokolování, registraci a správu účtů. Všimněte si zejména metod s názvem ExternalLoginCallback a ExternalLoginConfirmation. V rámci těchto metod můžete přidat kód pro přizpůsobení externích přihlašovacích operací pro vaši aplikaci. První řádek metody ExternalLoginCallback obsahuje:
AuthenticationResult result = OAuthWebSecurity.VerifyAuthentication(
Url.Action("ExternalLoginCallback", new { ReturnUrl = returnUrl }));
Další uživatelská data se předávají zpět ve vlastnosti ExtraData objektu AuthenticationResult , která je vrácena metodou VerifyAuthentication . Facebook klient obsahuje ve vlastnosti ExtraData následující hodnoty:
- id
- name
- odkaz
- gender (pohlaví)
- přístupový token
Ostatní zprostředkovatelé budou mít ve vlastnosti ExtraData podobná, ale mírně odlišná data.
Pokud je uživatel s vaším webem nový, načtete některá další data a předáte je do potvrzovacího zobrazení. Poslední blok kódu v metodě se spustí pouze v případě, že je uživatel na vašem webu nový. Nahraďte následující řádek:
return View("ExternalLoginConfirmation", new RegisterExternalLoginModel
{
UserName = result.UserName,
ExternalLoginData = loginData
});
Pomocí tohoto řádku:
return View("ExternalLoginConfirmation", new RegisterExternalLoginModel
{
UserName = result.UserName,
ExternalLoginData = loginData,
FullName = result.ExtraData["name"],
Link = result.ExtraData["link"]
});
Tato změna zahrnuje pouze hodnoty vlastností FullName a Link.
V metodě ExternalLoginConfirmation upravte kód, jak je zvýrazněno níže, abyste uložili další informace o uživateli.
if (user == null)
{
// Insert name into the profile table
UserProfile newUser = db.UserProfiles.Add(new UserProfile { UserName = model.UserName });
db.SaveChanges();
db.ExternalUsers.Add(new ExternalUserInformation
{
UserId = newUser.UserId,
FullName = model.FullName,
Link = model.Link
});
db.SaveChanges();
OAuthWebSecurity.CreateOrUpdateAccount(provider, providerUserId, model.UserName);
OAuthWebSecurity.Login(provider, providerUserId, createPersistentCookie: false);
return RedirectToLocal(returnUrl);
}
else
{
ModelState.AddModelError("UserName", "User name already exists. Please enter a different user name.");
}
Úprava zobrazení
Další uživatelská data, která načtete od poskytovatele, se zobrazí na registrační stránce.
Ve složce Účet zobrazení/ otevřete soubor ExternalLoginConfirmation.cshtml. Pod existující pole pro uživatelské jméno přidejte pole pro Celé jméno, Odkaz a Odkaz obrázku.
<li>
@Html.LabelFor(m => m.FullName)
@Html.TextBoxFor(m => m.FullName)
</li>
<li>
@Html.LabelFor(m => m.Link)
@Html.TextBoxFor(m => m.Link)
</li>
Teď jste téměř připraveni spustit aplikaci a zaregistrovat nového uživatele s uloženými dalšími informacemi. Musíte mít účet, který ještě není na webu zaregistrovaný. Můžete použít jiný testovací účet nebo odstranit řádky v userprofile a webpages_OAuthMembership tabulky pro účet, který chcete znovu použít. Odstraněním těchto řádků zajistíte, že se účet znovu zaregistruje.
Spusťte aplikaci a zaregistrujte nového uživatele. Všimněte si, že tentokrát stránka potvrzení obsahuje více hodnot.
Po dokončení registrace zavřete prohlížeč. Podívejte se do databáze a všimněte si nových hodnot v tabulce ExtraUserInformation .
Instalace balíčku NuGet pro rozhraní API facebooku
Facebook poskytuje rozhraní API , které můžete volat za účelem provádění operací. Rozhraní API Služby Facebook můžete volat buď nasměrováním odesílání požadavků HTTP, nebo instalací balíčku NuGet, který odesílání těchto požadavků usnadňuje. Tento kurz ukazuje použití balíčku NuGet, ale instalace balíčku NuGet není nezbytná. V tomto kurzu se dozvíte, jak používat balíček Facebook C# SDK. Existují další balíčky NuGet, které pomáhají s voláním rozhraní API Facebooku.
V oknech Spravovat balíčky NuGet vyberte balíček Facebook C# SDK.
K volání operace, která vyžaduje přístupový token pro uživatele, použijete facebookovou sadu C# SDK. V další části se dozvíte, jak získat přístupový token.
Načtení přístupových tokenů
Většina externích poskytovatelů předává přístupový token zpět po ověření přihlašovacích údajů uživatele. Tento přístupový token je velmi důležitý, protože umožňuje volat operace, které jsou dostupné jenom ověřeným uživatelům. Proto je načtení a uložení přístupového tokenu nezbytné, pokud chcete poskytovat více funkcí.
V závislosti na externím poskytovateli může být přístupový token platný pouze po omezenou dobu. Abyste měli jistotu, že máte platný přístupový token, načtete ho pokaždé, když se uživatel přihlásí, a místo uložení do databáze ho uložíte jako hodnotu relace.
V Metodě ExternalLoginCallback je přístupový token také předán zpět extraData vlastnost AuthenticationResult objektu. Přidání zvýrazněného kódu do ExternalLoginCallback pro uložení přístupového tokenu do objektu Session . Tento kód se spustí pokaždé, když se uživatel přihlásí pomocí facebookového účtu.
[AllowAnonymous]
public ActionResult ExternalLoginCallback(string returnUrl)
{
AuthenticationResult result = OAuthWebSecurity.VerifyAuthentication(
Url.Action("ExternalLoginCallback", new { ReturnUrl = returnUrl }));
if (!result.IsSuccessful)
{
return RedirectToAction("ExternalLoginFailure");
}
if (result.ExtraData.Keys.Contains("accesstoken"))
{
Session["facebooktoken"] = result.ExtraData["accesstoken"];
}
if (OAuthWebSecurity.Login(
result.Provider,
result.ProviderUserId,
createPersistentCookie: false))
{
return RedirectToLocal(returnUrl);
}
if (User.Identity.IsAuthenticated)
{
// If the current user is logged in add the new account
OAuthWebSecurity.CreateOrUpdateAccount(
result.Provider,
result.ProviderUserId,
User.Identity.Name);
return RedirectToLocal(returnUrl);
}
else
{
// User is new, ask for their desired membership name
string loginData = OAuthWebSecurity.SerializeProviderUserId(
result.Provider,
result.ProviderUserId);
ViewBag.ProviderDisplayName =
OAuthWebSecurity.GetOAuthClientData(result.Provider).DisplayName;
ViewBag.ReturnUrl = returnUrl;
return View("ExternalLoginConfirmation", new RegisterExternalLoginModel
{
UserName = result.UserName,
ExternalLoginData = loginData,
FullName = result.ExtraData["name"],
Link = result.ExtraData["link"]
});
}
}
I když tento příklad načte přístupový token z Facebooku, můžete ho načíst od libovolného externího zprostředkovatele pomocí stejného klíče s názvem "accesstoken".
Odhlášení
Výchozí metoda LogOff odhlásí uživatele z vaší aplikace, ale neodhlásí ho od externího poskytovatele. Pokud chcete odhlásit uživatele z Facebooku a zabránit tomu, aby se token po odhlášení uživatele zachoval, můžete do metody LogOff v Kontroleře Účtu přidat následující zvýrazněný kód.
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult LogOff()
{
WebSecurity.Logout();
if (Session["facebooktoken"] != null)
{
var fb = new Facebook.FacebookClient();
string accessToken = Session["facebooktoken"] as string;
var logoutUrl = fb.GetLogoutUrl(new { access_token = accessToken, next = "http://localhost:39852/" });
Session.RemoveAll();
return Redirect(logoutUrl.AbsoluteUri);
}
return RedirectToAction("Index", "Home");
}
Hodnota, kterou zadáte v parametru next , je adresa URL, která se má použít po odhlášení uživatele z Facebooku. Při testování na místním počítači byste zadali správné číslo portu pro místní lokalitu. V produkčním prostředí byste zadali výchozí stránku, například contoso.com.
Načtení informací o uživateli, které vyžadují přístupový token
Teď, když jste uložili přístupový token a nainstalovali balíček Facebook C# SDK, můžete je společně použít k vyžádání dalších informací o uživateli z Facebooku. V metodě ExternalLoginConfirmation vytvořte instanci třídy FacebookClient předáním hodnoty přístupového tokenu. Vyžádejte si hodnotu ověřené vlastnosti pro aktuálního ověřeného uživatele. Ověřená vlastnost označuje, jestli Facebook ověřil účet jiným způsobem, například odesláním zprávy na mobilní telefon. Uložte tuto hodnotu do databáze.
if (user == null)
{
// Insert name into the profile table
UserProfile newUser = db.UserProfiles.Add(new UserProfile { UserName = model.UserName });
db.SaveChanges();
bool facebookVerified;
var client = new Facebook.FacebookClient(Session["facebooktoken"].ToString());
dynamic response = client.Get("me", new { fields = "verified" });
if (response.ContainsKey("verified"))
{
facebookVerified = response["verified"];
}
else
{
facebookVerified = false;
}
db.ExternalUsers.Add(new ExternalUserInformation
{
UserId = newUser.UserId,
FullName = model.FullName,
Link = model.Link,
Verified = facebookVerified
});
db.SaveChanges();
OAuthWebSecurity.CreateOrUpdateAccount(provider, providerUserId, model.UserName);
OAuthWebSecurity.Login(provider, providerUserId, createPersistentCookie: false);
return RedirectToLocal(returnUrl);
}
Znovu budete muset buď odstranit záznamy v databázi pro uživatele, nebo použít jiný facebookový účet.
Spusťte aplikaci a zaregistrujte nového uživatele. Podívejte se do tabulky ExtraUserInformation a podívejte se na hodnotu vlastnosti Verified.
Závěr
V tomto kurzu jste vytvořili web, který je integrovaný s Facebookem pro ověřování uživatelů a registrační data. Dozvěděli jste se o výchozím chování nastaveném pro webovou aplikaci MVC 4 a o tom, jak toto výchozí chování přizpůsobit.