Přihlášení pomocí externích webů na webu ASP.NET Web Pages (Razor)

  • Článek

, autor: Tom FitzMacken

Tento článek vysvětluje, jak se přihlásit k webu ASP.NET Web Pages (Razor) pomocí Facebooku, Googlu, Twitteru, Yahoo a dalších webů – to znamená, jak na vašem webu podporovat OAuth a OpenID.

Naučíte se:

  • Postup povolení přihlášení z jiných webů při použití šablony webu WebMatrix Starter

Toto je funkce ASP.NET představená v článku:

  • Pomocná rutina OAuthWebSecurity .

Verze softwaru použité v kurzu

  • webové stránky ASP.NET (Razor) 2
  • WebMatrix 3

ASP.NET webové stránky zahrnují podporu zprostředkovatelů OAuth a OpenID . Pomocí těchto poskytovatelů můžete uživatelům umožnit, aby se k vašemu webu přihlásili pomocí svých stávajících přihlašovacích údajů z Facebooku, Twitteru, Microsoftu a Googlu. Pokud se například chtějí uživatelé přihlásit pomocí účtu Služby Facebook, stačí vybrat ikonu Facebooku, která je přesměruje na přihlašovací stránku Facebooku, kde zadají své informace o uživateli. Přihlašovací údaje k Facebooku pak můžou přidružit ke svému účtu na vašem webu. Související vylepšení funkcí členství webových stránek spočívá v tom, že uživatelé můžou přidružit více přihlášení (včetně přihlášení ze sociálních sítí) k jednomu účtu na vašem webu.

Tento obrázek ukazuje přihlašovací stránku ze šablony úvodního webu , kde uživatel může zvolit ikonu Facebooku, Twitteru, Googlu nebo Microsoftu a povolit přihlášení pomocí externího účtu:

externí zprostředkovatelé

Členství v OAuth a OpenID můžete povolit zrušením komentáři několika řádků kódu v šabloně úvodního webu . Metody a vlastnosti, které používáte pro práci s poskytovateli OAuth a OpenID, jsou ve WebMatrix.Security.OAuthWebSecurity třídě . Šablona úvodního webu obsahuje úplnou infrastrukturu členství, včetně přihlašovací stránky, databáze členství a veškerého kódu, který potřebujete k tomu, aby se uživatelé mohli k vašemu webu přihlásit pomocí místních přihlašovacích údajů nebo z jiného webu.

Tato část obsahuje příklad, jak umožnit uživatelům přihlášení z externích webů k webu, který je založený na šabloně úvodního webu . Po vytvoření úvodního webu to uděláte (podrobnosti najdete tady):

  • Pro weby, které používají poskytovatele OAuth (Facebook, Twitter a Microsoft), vytvoříte aplikaci na externím webu. Získáte tak klíče aplikace, které budete potřebovat k vyvolání funkce přihlášení pro tyto weby.

  • Pro weby, které používají poskytovatele OpenID (Google), nemusíte vytvářet aplikaci. Pro všechny tyto weby musíte mít účet, abyste se mohli přihlásit a vytvářet vývojářské aplikace.

    Poznámka

    Aplikace Microsoftu přijímají jenom živou adresu URL pro fungující web, takže pro testování přihlášení nemůžete použít adresu URL místního webu.

  • Upravte na webu několik souborů, zadejte příslušného zprostředkovatele ověřování a odešlete přihlášení k webu, který chcete použít.

Tento článek obsahuje samostatné pokyny pro následující úlohy:

Povolení přihlášení Google

  1. Vytvořte nebo otevřete web ASP.NET, který je založený na šabloně Úvodní web WebMatrix.

  2. Otevřete stránku _AppStart.cshtml a odkomentujte následující řádek kódu.

    OAuthWebSecurity.RegisterGoogleClient();

Testování přihlášení googlem

  1. Spusťte stránku default.cshtml vašeho webu a zvolte tlačítko Přihlásit se .

  2. Na stránce Login (Přihlášení ) v části Use another service to log in (K přihlášení použijte jinou službu ) zvolte tlačítko Pro odeslání Google nebo Yahoo . V tomto příkladu se používá přihlašovací jméno Google.

    Webová stránka přesměruje požadavek na přihlašovací stránku Google.

    Přihlášení googlem

  3. Zadejte přihlašovací údaje pro existující účet Google.

  4. Pokud se vás Google zeptá, jestli chcete localhost povolit používání informací z účtu, klikněte na Povolit.

    Kód použije token Google k ověření uživatele a pak se vrátí na tuto stránku na vašem webu. Tato stránka umožňuje uživatelům přidružit své přihlašovací údaje google k existujícímu účtu na vašem webu nebo si na vašem webu zaregistrovat nový účet, ke kterým přidruží externí přihlášení.

    Snímek obrazovky znázorňující registrační stránku

  5. Zvolte tlačítko Přidružit . Prohlížeč se vrátí na domovskou stránku vaší aplikace.

Povolení přihlášení k Facebooku

  1. Přejděte na web pro vývojáře na Facebooku (přihlaste se, pokud ještě nejste přihlášení).

  2. Zvolte tlačítko Vytvořit novou aplikaci a pak podle pokynů pojmenujte a vytvořte novou aplikaci.

  3. V části Vyberte způsob integrace vaší aplikace s Facebookem zvolte část Web .

  4. Do pole Adresa URL webu zadejte adresu URL vašeho webu (například http://www.example.com). Pole Domain (Doména ) je volitelné. Můžete ho použít k zajištění ověřování pro celou doménu (například example.com).

    Poznámka

    Pokud používáte web v místním počítači s adresou URL, jako http://localhost:12345 je (kde číslo je číslo místního portu), můžete tuto hodnotu přidat do pole Adresa URL webu pro účely testování webu. Kdykoli se ale změní číslo portu vašeho místního webu, budete muset aktualizovat pole Adresa URL webu vaší aplikace.

  5. Zvolte tlačítko Uložit změny .

  6. Znovu zvolte kartu Aplikace a pak zobrazte úvodní stránku vaší aplikace.

  7. Zkopírujte hodnoty ID aplikace a Tajný kód aplikace pro vaši aplikaci a vložte je do dočasného textového souboru. Tyto hodnoty předáte poskytovateli Facebooku v kódu vašeho webu.

  8. Ukončete facebookový web pro vývojáře.

Teď provedete změny dvou stránek na vašem webu, aby se uživatelé mohli k webu přihlásit pomocí svých facebookových účtů.

  1. Vytvořte nebo otevřete web ASP.NET, který je založený na šabloně Úvodní web WebMatrix.

  2. Otevřete stránku _AppStart.cshtml a odkomentujte kód pro facebookového poskytovatele OAuth. Nekomentovaný blok kódu vypadá takto:

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

  3. Zkopírujte hodnotu ID aplikace z aplikace Facebook jako hodnotu parametru appId (uvnitř uvozovek).

  4. Zkopírujte hodnotu Tajný kód aplikace z aplikace Facebook jako hodnotu parametru appSecret .

  5. Uložte soubor a zavřete ho.

Testování přihlášení k Facebooku

  1. Spusťte stránku default.cshtml webu a zvolte tlačítko Přihlásit se.

  2. Na stránce Login (Přihlášení ) v části Use another service to log in (Přihlášení pomocí jiné služby ) zvolte ikonu Facebook .

    Webová stránka přesměruje požadavek na přihlašovací stránku Facebooku.

    oauth-2

  3. Přihlaste se k účtu na Facebooku.

    Kód vás ověří pomocí tokenu Facebooku a pak se vrátí na stránku, kde můžete přidružit své přihlašovací jméno k Facebooku k přihlášení vašeho webu. Do pole Email formuláře se vyplní vaše uživatelské jméno nebo e-mailová adresa.

    Snímek obrazovky se stránkou Registrace účtu

  4. Zvolte tlačítko Přidružit .

    Prohlížeč se vrátí na domovskou stránku a jste přihlášeni.

Povolení přihlášení k Twitteru

  1. Přejděte na web pro vývojáře Twitteru.

  2. Zvolte odkaz Vytvořit aplikaci a přihlaste se k webu.

  3. Ve formuláři Vytvořit aplikaci vyplňte pole Název a Popis .

  4. Do pole WebSite zadejte adresu URL vašeho webu (například http://www.example.com).

    Poznámka

    Pokud svůj web testujete místně (pomocí adresy URL, jako je http://localhost:12345), Nemusí Twitter tuto adresu URL přijmout. Možná ale budete moct použít IP adresu zpětné místní smyčky (například http://127.0.0.1:12345). To zjednodušuje proces místního testování aplikace. Pokaždé, když se ale změní číslo portu místního webu, budete muset aktualizovat pole WebSite vaší aplikace.

  5. Do pole Adresa URL zpětného volání zadejte adresu URL stránky na vašem webu, na kterou se mají uživatelé po přihlášení ke Twitteru vrátit. Chcete-li například odeslat uživatele na domovskou stránku úvodního webu (která rozpozná jejich stav přihlášení), zadejte stejnou adresu URL, kterou jste zadali do pole WebSite .

  6. Přijměte podmínky a zvolte tlačítko Vytvořit aplikaci Twitter .

  7. Na cílové stránce Moje aplikace zvolte aplikaci, kterou jste vytvořili.

  8. Na kartě Podrobnosti se posuňte dolů a zvolte tlačítko Vytvořit přístupový token .

  9. Na kartě Podrobnosti zkopírujte hodnoty Consumer Key (Spotřebitelský klíč ) a Consumer Secret (Tajný kód spotřebitele ) pro vaši aplikaci a vložte je do dočasného textového souboru. Tyto hodnoty předáte zprostředkovateli Twitteru v kódu vašeho webu.

  10. Opusťte web Twitteru.

Teď provedete změny dvou stránek na vašem webu, aby se uživatelé mohli přihlásit k webu pomocí svých twitterových účtů.

  1. Vytvořte nebo otevřete web ASP.NET, který je založený na šabloně Úvodní web WebMatrix.

  2. Otevřete stránku _AppStart.cshtml a odkomentujte kód poskytovatele Twitter OAuth. Nekomentovaný blok kódu vypadá takto:

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

  3. Zkopírujte hodnotu spotřebitelského klíče z aplikace Twitter jako hodnotu parametru consumerKey (uvnitř uvozovek).

  4. Zkopírujte hodnotu Consumer Secret (Tajný klíč spotřebitele ) z aplikace Twitter jako hodnotu parametru consumerSecret .

  5. Uložte soubor a zavřete ho.

Testování přihlášení k Twitteru

  1. Spusťte stránku default.cshtml vašeho webu a zvolte tlačítko Přihlásit se .

  2. Na stránce Login (Přihlášení ) v části Use another service to log in (Přihlášení pomocí jiné služby ) zvolte ikonu Twitteru .

    Webová stránka přesměruje požadavek na přihlašovací stránku Twitteru pro aplikaci, kterou jste vytvořili.

    oauth-4

  3. Přihlaste se k účtu Na Twitteru.

  4. Kód použije token Twitteru k ověření uživatele a pak vás vrátí na stránku, kde můžete přidružit své přihlašovací údaje k účtu vašeho webu. Do pole Email formuláře se vyplní vaše jméno nebo e-mailová adresa.

    Snímek obrazovky se stránkou registrace účtu

  5. Zvolte tlačítko Přidružit .

    Prohlížeč se vrátí na domovskou stránku a jste přihlášeni.

Další materiály