Megosztás a következőn keresztül:


Külső hitelesítési szolgáltatások ASP.NET Webes API-val (C#)

Új webalkalmazás-fejlesztéshez javasoljuk, minimális API-kat

Javasoljuk, hogy a legbiztonságosabb hitelesítési lehetőséget használja. Az Azure-ban üzembe helyezett .NET-alkalmazásokért lásd:

Az Azure Key Vault és .NET Aspire biztosítják a titkos kódok tárolásának és lekérésének legbiztonságosabb módját. Az Azure Key Vault egy felhőalapú szolgáltatás, amely védi a titkosítási kulcsokat és titkos kulcsokat, például a tanúsítványokat, a kapcsolati sztringeket és a jelszavakat. A .NET Aspire-ről a Az üzemeltetés és az ügyfélintegrációk közötti biztonságos kommunikációcímű témakörben olvashat.

Kerülje az erőforrás-tulajdonos jelszó hitelesítő adatainak megadását, mert:

  • Elérhetővé teszi a felhasználó jelszavát az ügyfél számára.
  • Jelentős biztonsági kockázat.
  • Csak akkor használható, ha más hitelesítési folyamatok nem lehetségesek.

Amikor az alkalmazást egy tesztkiszolgálón helyezik üzembe, egy környezeti változóval a kapcsolati sztringet egy tesztadatbázis-kiszolgálóra állíthatja be. A környezeti változók általában egyszerű, titkosítatlan szövegben vannak tárolva. Ha a gép vagy a folyamat sérült, a környezeti változókat nem megbízható felek érhetik el. Nem javasoljuk, hogy a környezeti változókat használja éles kapcsolati sztring tárolására, mivel ez nem a legbiztonságosabb módszer.

Konfigurációs adatokra vonatkozó irányelvek:

  • Soha ne tároljon jelszavakat vagy más bizalmas adatokat konfigurációszolgáltatói kódban vagy egyszerű szöveges konfigurációs fájlokban.
  • Ne használj üzemi titkokat fejlesztési vagy tesztelési környezetekben.
  • Adja meg a projekten kívüli titkos kulcsokat, hogy véletlenül ne legyenek véglegesítésre egy forráskódtárban.

A Visual Studio 2017 és a ASP.NET 4.7.2 bővíti az egyoldalas alkalmazások (SPA) és webes API- szolgáltatások biztonsági beállításait a külső hitelesítési szolgáltatásokkal való integrációhoz, amelyek között számos OAuth/OpenID és közösségimédia-hitelesítési szolgáltatás található: Microsoft-fiókok, Twitter, Facebook és Google.

Ebben az útmutatóban

Előfeltételek

Az útmutatóban szereplő példák követéséhez az alábbiakra van szükség:

Külső hitelesítési szolgáltatások használata

A webfejlesztők számára jelenleg elérhető külső hitelesítési szolgáltatások bősége segít csökkenteni a fejlesztési időt új webalkalmazások létrehozásakor. A webfelhasználók általában több meglévő fiókkal rendelkeznek a népszerű webszolgáltatásokhoz és közösségimédia-webhelyekhez, ezért amikor egy webalkalmazás külső webszolgáltatásból vagy közösségimédia-webhelyről valósítja meg a hitelesítési szolgáltatásokat, azzal megtakarítja a hitelesítési megvalósítás létrehozásával töltött fejlesztési időt. A külső hitelesítési szolgáltatás használatával a végfelhasználóknak nem kell másik fiókot létrehozniuk a webalkalmazáshoz, és nem kell megjegyezniük egy másik felhasználónevet és jelszót.

A fejlesztőknek korábban két választási lehetősége volt: saját hitelesítési implementáció létrehozása, vagy egy külső hitelesítési szolgáltatás integrálása az alkalmazásaikba. A legalapvetőbb szinten az alábbi ábra egy egyszerű kérési folyamatot szemléltet egy olyan felhasználói ügynökhöz (webböngészőhöz), amely külső hitelesítési szolgáltatás használatára konfigurált webalkalmazástól kér információt:

Egy felhasználói ügynök egyszerű kérési folyamatának illusztrációja,

Az előző ábrán a felhasználói ügynök (vagy ebben a példában a webböngésző) kérést küld egy webalkalmazásnak, amely átirányítja a webböngészőt egy külső hitelesítési szolgáltatásba. A felhasználói ügynök elküldi a hitelesítő adatait a külső hitelesítési szolgáltatásnak, és ha a felhasználói ügynök sikeresen hitelesített, a külső hitelesítési szolgáltatás átirányítja a felhasználói ügynököt az eredeti webalkalmazásba valamilyen jogkivonattal, amelyet a felhasználói ügynök küld a webalkalmazásnak. A webalkalmazás a jogkivonat használatával ellenőrzi, hogy a külső hitelesítési szolgáltatás sikeresen hitelesítette-e a felhasználói ügynököt, és a webalkalmazás a jogkivonat használatával további információkat gyűjthet a felhasználói ügynökről. Miután az alkalmazás befejezte a felhasználói ügynök adatainak feldolgozását, a webalkalmazás a megfelelő választ adja vissza a felhasználói ügynöknek az engedélyezési beállításai alapján.

Ebben a második példában a felhasználói ügynök egyeztet a webalkalmazással és a külső engedélyezési kiszolgálóval, a webalkalmazás pedig további kommunikációt folytat a külső engedélyezési kiszolgálóval a felhasználói ügynökkel kapcsolatos további információk lekéréséhez:

A webalkalmazással tárgyaló felhasználói ügynök illusztrációja, kibontásához

A Visual Studio 2017 és a ASP.NET 4.7.2 megkönnyíti a külső hitelesítési szolgáltatásokkal való integrációt a fejlesztők számára azáltal, hogy beépített integrációt biztosít a következő hitelesítési szolgáltatásokhoz:

  • Facebook
  • Google
  • Microsoft-fiókok (Windows Live ID-fiókok)
  • Twitter

Az útmutatóban szereplő példák bemutatják, hogyan konfigurálhatja az egyes támogatott külső hitelesítési szolgáltatásokat a Visual Studio 2017-et tartalmazó új ASP.NET webalkalmazás-sablon használatával.

Jegyzet

Szükség esetén előfordulhat, hogy hozzá kell adnia az FQDN-t (teljes tartománynevet) a külső hitelesítési szolgáltatás beállításaihoz. Ez a követelmény bizonyos külső hitelesítési szolgáltatások biztonsági korlátain alapul, amelyek megkövetelik, hogy az alkalmazás beállításaiban szereplő teljes tartománynév megfeleljen az ügyfelek által használt teljes tartománynévnek. (Ennek lépései az egyes külső hitelesítési szolgáltatások esetében jelentősen eltérőek lesznek; az egyes külső hitelesítési szolgáltatások dokumentációjában meg kell néznie, hogy szükség van-e erre, és hogyan konfigurálhatja ezeket a beállításokat.) Ha úgy kell konfigurálnia az IIS Expresst, hogy teljes tartománynevet használjon a környezet teszteléséhez, tekintse meg az útmutató későbbi részében található Az IIS Express konfigurálása teljes tartománynév szakasz használatára.

Minta webalkalmazás létrehozása

Az alábbi lépések végigvezetik egy mintaalkalmazás létrehozásán a ASP.NET webalkalmazás-sablon használatával, és ezt a mintaalkalmazást fogja használni az útmutató későbbi részében az egyes külső hitelesítési szolgáltatásokhoz.

Indítsa el a Visual Studio 2017-et, és válassza Új projekt lehetőséget a Kezdőlapon. Vagy a Fájl menüben válassza Új, majd Project.

Amikor megjelenik az Új projekt párbeszédpanel, válassza a Telepített lehetőséget, és bontsa ki Visual C#. A Visual C#területen válassza a Weblehetőséget. A projektsablonok listájában válassza ASP.NET webalkalmazás (.Net-keretrendszer). Adja meg a projekt nevét, és kattintson OKgombra.

Új projekt párbeszédpanel képe

Amikor megjelenik az Új ASP.NET Projekt, jelölje ki az egyoldalas alkalmazás sablont, és kattintson Projekt létrehozásaelemre.

Sablonkijelölés képe kibontásához

Várjon, amíg a Visual Studio 2017 létrehozza a projektet.

Amikor a Visual Studio 2017 befejezte a projekt létrehozását, nyissa meg a App_Start mappában található Startup.Auth.cs fájlt.

A projekt első létrehozásakor a külső hitelesítési szolgáltatások egyike sem engedélyezett Startup.Auth.cs fájlban; Az alábbiakban bemutatjuk, hogy a kód milyen lehet, és azokat a szakaszokat emeljük ki, amelyekben engedélyezné a külső hitelesítési szolgáltatást és a vonatkozó beállításokat a Microsoft-fiókok, a Twitter, a Facebook vagy a Google-hitelesítés ASP.NET alkalmazással való használatához:

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 = ""
            //});
        }
    }
}

Amikor lenyomja az F5 billentyűt a webalkalmazás létrehozásához és hibakereséséhez, megjelenik egy bejelentkezési képernyő, ahol láthatja, hogy nincs meghatározva külső hitelesítési szolgáltatás.

Bejelentkezési képernyő képe,

A következő szakaszokban megtudhatja, hogyan engedélyezheti a Visual Studio 2017 ASP.NET által biztosított összes külső hitelesítési szolgáltatást.

A Facebook-hitelesítés engedélyezése

A Facebook-hitelesítés használatához létre kell hoznia egy Facebook fejlesztői fiókot, a projekt működéséhez pedig egy alkalmazásazonosítóra és titkos kulcsra lesz szüksége a Facebooktól. További információ a Facebook fejlesztői fiók létrehozásáról, valamint az alkalmazásazonosító és titkos kulcs beszerzéséről: https://go.microsoft.com/fwlink/?LinkID=252166.

Miután beszerezte az alkalmazásazonosítót és a titkos kulcsot, az alábbi lépésekkel engedélyezheti a Facebook-hitelesítést a webalkalmazáshoz:

  1. Amikor a projekt meg van nyitva a Visual Studio 2017-ben, nyissa meg a Startup.Auth.cs fájlt.

  2. Keresse meg a kód Facebook-hitelesítési szakaszát:

    // 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. Távolítsa el a "//" karaktereket a kiemelt kódsorok kibontásához, majd adja hozzá az alkalmazásazonosítót és a titkos kulcsot. Miután hozzáadta ezeket a paramétereket, újrafordítheti a projektet:

    // 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. Amikor az F5 billentyűt lenyomva megnyitja a webalkalmazást a webböngészőben, látni fogja, hogy a Facebook külső hitelesítési szolgáltatásként lett definiálva:

    Facebook által meghatározott kép,

  5. Amikor a Facebook gombra kattint, a böngésző a Facebook bejelentkezési oldalára lesz átirányítva:

    Facebook bejelentkezési oldal képe

  6. Miután megadta a Facebook-hitelesítő adatait, és a Bejelentkezésgombra kattintott, a böngésző vissza lesz irányítva a webalkalmazásba, amely kérni fogja a Facebook-fiókjához társítani kívánt felhasználónevet:

    webalkalmazás képe

  7. Miután megadta a felhasználónevet, és a Regisztráció gombra kattintott, a webalkalmazás megjeleníti a Facebook-fiókjához tartozó alapértelmezett kezdőlap:

    Alapértelmezett Facebook kezdőlapot megjelenítő kép

A Google-hitelesítés engedélyezése

A Google-hitelesítés használatához létre kell hoznia egy Google fejlesztői fiókot, és a projekt működéséhez szüksége lesz egy alkalmazásazonosítóra és titkos kulcsra a Google-tól. További információ a Google fejlesztői fiók létrehozásáról, valamint az alkalmazásazonosító és titkos kulcs beszerzéséről: https://developers.google.com.

A Google-hitelesítés webalkalmazáshoz való engedélyezéséhez kövesse az alábbi lépéseket:

  1. Ha a projekt nyitva van a Visual Studio 2017-ben, nyissa meg a Startup.Auth.cs fájlt.

  2. Keresse meg a Kód Google-hitelesítés szakaszát:

    // 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. Távolítsa el a "//" karaktereket a kiemelt kódsorok kibontásához, majd adja hozzá az alkalmazásazonosítót és a titkos kulcsot. Miután hozzáadta ezeket a paramétereket, újrafordítheti a projektet:

    // 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. Amikor az F5 billentyűt lenyomva megnyitja a webalkalmazást a webböngészőben, látni fogja, hogy a Google külső hitelesítési szolgáltatásként lett definiálva:

    Kép – a kép meg van határozva a Google által

  5. Amikor a Google gombra kattint, a böngésző a Google bejelentkezési oldalára lesz átirányítva:

    Google bejelentkezési oldal képe

  6. Miután megadta Google-hitelesítő adatait, és Bejelentkezésgombra kattint, a Google kérni fogja, hogy ellenőrizze, hogy a webalkalmazás rendelkezik-e engedélyekkel a Google-fiókjához való hozzáféréshez:

    Google-engedélyek képe,

  7. Amikor a Elfogadógombra kattint, a böngésző vissza lesz irányítva a webalkalmazásba, amely kérni fogja a Google-fiókjához társítani kívánt felhasználónevet:

    webalkalmazás kérdésére megjelenő kép felhasználónév társításához,

  8. Miután megadta a felhasználónevet, és a Regisztráció gombra kattintott, a webalkalmazás megjeleníti a Google-fiókjához tartozó alapértelmezett kezdőlap:

    Google alapértelmezett kezdőlapjának képe,

A Microsoft-hitelesítés engedélyezése

A Microsoft-hitelesítéshez létre kell hoznia egy fejlesztői fiókot, amelyhez ügyfél-azonosítóra és titkos ügyfélkódra van szükség a működéshez. A Microsoft fejlesztői fiókjának létrehozásáról, valamint az ügyfélazonosító és az ügyfél titkos kódjának beszerzéséről a https://go.microsoft.com/fwlink/?LinkID=144070című témakörben talál további információt.

Miután beszerezte a fogyasztói kulcsot és a fogyasztói titkos kulcsot, az alábbi lépésekkel engedélyezheti a Microsoft-hitelesítést a webalkalmazáshoz:

  1. Amikor a projektd meg van nyitva a Visual Studio 2017 programban, nyissa meg a Startup.Auth.cs fájlt.

  2. Keresse meg a Microsoft-hitelesítési kódrészletet:

    // 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. Távolítsa el a "//" karaktereket a kiemelt kódsorok kibontásához, majd adja hozzá az ügyfélazonosítót és az ügyfél titkos kódját. Miután hozzáadta ezeket a paramétereket, újrafordítheti a projektet:

    // 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. Amikor az F5 billentyűt lenyomva megnyitja a webalkalmazást a webböngészőben, látni fogja, hogy a Microsoft külső hitelesítési szolgáltatásként lett definiálva:

    A Microsoft által definiált kép,

  5. Amikor a Microsoft gombra kattint, a böngésző a Microsoft bejelentkezési oldalára lesz átirányítva:

    Microsoft bejelentkezési oldal képe

  6. Miután megadta a Microsoft hitelesítő adatait, és Bejelentkezésgombra kattintott, a rendszer kérni fogja, hogy a webalkalmazás rendelkezik-e engedéllyel a Microsoft-fiók eléréséhez:

    Microsoft-engedélyek képe

  7. Amikor Igengombra kattint, a böngésző vissza lesz irányítva a webalkalmazásba, amely kérni fogja a Microsoft-fiókjához társítani kívánt felhasználónevet:

    Google-fiók képe

  8. Miután megadta a felhasználónevet, és a Regisztrálás gombra kattintott, a webalkalmazás megjeleníti a Microsoft-fiókjához tartozó alapértelmezett kezdőlap:

    A Microsoft alapértelmezett kezdőlapjának képe

Twitter-hitelesítés engedélyezése

A Twitter-hitelesítéshez létre kell hoznia egy fejlesztői fiókot, amelyhez egy fogyasztói kulcsra és egy fogyasztói titkos kódra van szükség a működéshez. A Twitter fejlesztői fiók létrehozásával, valamint a fogyasztói kulcs és a fogyasztói titkos kód beszerzésével kapcsolatos információkért lásd: https://go.microsoft.com/fwlink/?LinkID=252166.

Miután beszerezte a fogyasztói kulcsot és a fogyasztói titkos kulcsot, az alábbi lépésekkel engedélyezheti a Twitter-hitelesítést a webalkalmazáshoz:

  1. Amikor a projekt meg van nyitva a Visual Studio 2017-ben, nyissa meg a Startup.Auth.cs fájlt.

  2. Keresse meg a Twitter-hitelesítés kódrészletét:

    // 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. Távolítsa el a "//" karaktereket a kiemelt kódsorok kibontásához, majd adja hozzá a fogyasztói kulcsot és a fogyasztói titkos kulcsot. Miután hozzáadta ezeket a paramétereket, újra le tudja fordítani a projektet:

    // 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. Amikor az F5 billentyűt lenyomva megnyitja a webalkalmazást a webböngészőben, látni fogja, hogy a Twitter külső hitelesítési szolgáltatásként lett definiálva:

    A Twitter által definiált kép

  5. Amikor a Twitter gombra kattint, a böngésző a Twitter bejelentkezési oldalára lesz átirányítva:

    Twitter bejelentkezési oldal képe

  6. Miután megadta Twitter-hitelesítő adatait, és a Alkalmazás engedélyezésegombra kattintott, a böngésző vissza lesz irányítva a webalkalmazásba, amely kérni fogja a Twitter-fiókjához társítani kívánt felhasználónevet:

    A webalkalmazásban társítandó Twitter-fiók képe,

  7. Miután megadta a felhasználónevet, és a Regisztráció gombra kattintott, a webalkalmazás megjeleníti a Twitter-fiókjához tartozó alapértelmezett kezdőlap:

    A Twitter alapértelmezett kezdőlapjának képe

További információk

Az OAuth-ot és az OpenID-t használó alkalmazások létrehozásával kapcsolatos további információkért tekintse meg a következő URL-címeket:

Külső hitelesítési szolgáltatások kombinálása

A nagyobb rugalmasság érdekében egyszerre több külső hitelesítési szolgáltatást is meghatározhat – ez lehetővé teszi, hogy a webalkalmazás felhasználói az engedélyezett külső hitelesítési szolgáltatások bármelyikéből használhassanak fiókot:

Több külső hitelesítési szolgáltatás képe, kibontásához

Az IIS Express konfigurálása teljesen minősített tartománynév használatára.

Egyes külső hitelesítésszolgáltatók nem támogatják az alkalmazás http-cím, például http://localhost:port/használatával történő tesztelését. A probléma megoldásához hozzáadhat egy statikus, teljes mértékben meghatározott tartománynév (FQDN) leképezést a HOSTS-fájlhoz, és konfigurálhatja a Visual Studio 2017 projektbeállításait, hogy azt tesztelésre és hibakeresésre használja. Ehhez kövesse az alábbi lépéseket:

  • Adjon hozzá egy statikus teljes tartománynevet a HOSTS-fájlhoz való hozzárendelésként:

    1. Nyisson meg egy emelt szintű parancssort a Windowsban.

    2. Írja be a következő parancsot:

      jegyzettömb %WinDir%\system32\drivers\etc\hosts

    3. Adjon hozzá egy, a következőhöz hasonló bejegyzést a HOSTS-fájlhoz:

      127.0.0.1 www.wingtiptoys.com

    4. Mentse és zárja be a HOSTS-fájlt.

  • A Visual Studio-projekt konfigurálása az FQDN használatára:

    1. Ha a projekt meg van nyitva a Visual Studio 2017-ben, kattintson a Project menüre, majd válassza ki a projekt tulajdonságait. Például választhatja a WebApplication1 Tulajdonságok-t.
    2. Válassza a Webes lapot.
    3. Adja meg a projekt URL-címénekteljes tartománynevét. Például meg kell adnia http://www.wingtiptoys.com, ha ez volt a HOSTS-fájlhoz hozzáadott teljes tartománynév-megfeleltetés.
  • Konfigurálja az IIS Expresst az alkalmazás teljes tartománynevének használatára:

    1. Nyisson meg egy emelt szintű parancssort a Windowsban.

    2. Írja be a következő parancsot az IIS Express mappára való váltáshoz:

      cd /d "%ProgramFiles%\IIS Express"

    3. Írja be a következő parancsot az FQDN alkalmazáshoz való hozzáadásához:

      appcmd.exe konfiguráció beállítása -section:system.applicationHost/sites /+"[name='WebApplication1'].bindings. [protocol='http',bindingInformation='*:80:www.wingtiptoys.com"" /commit:apphost

    Ahol WebApplication1 a projekt neve, és bindingInformation tartalmazza a teszteléshez használni kívánt portszámot és teljes tartománynevet.

Alkalmazásbeállítások beszerzése a Microsoft-hitelesítéshez

Az alkalmazások összekapcsolása a Windows Live for Microsoft Authentication szolgáltatással egy egyszerű folyamat. Ha még nem csatolt egy alkalmazást a Windows Live-hoz, a következő lépéseket használhatja:

  1. Keresse fel a https://go.microsoft.com/fwlink/?LinkID=144070 hivatkozást, és amikor a rendszer kéri, adja meg a Microsoft-fióknevét és jelszavát, majd kattintson a Bejelentkezésgombra:

  2. Válassza Alkalmazás hozzáadása lehetőséget, és amikor a rendszer kéri, adja meg az alkalmazás nevét, majd kattintson a létrehozása gombra:

    Alkalmazás hozzáadásának képe,

  3. Válassza ki az alkalmazást a Név területen, és megjelenik az alkalmazás tulajdonságainak lapja.

  4. Adja meg az alkalmazás átirányítási tartományát. Másolja a alkalmazásazonosítót, és az Alkalmazás titkos kódterületen válassza a Jelszó létrehozásalehetőséget. Másolja ki a megjelenő jelszót. Az alkalmazásazonosító és a jelszó az ügyfél-azonosító és az ügyfél titkos kódja. Válassza Ok, majd Mentéslehetőséget.

    Átirányítási tartomány adatainak képe, kibontásához

Nem kötelező: Helyi regisztráció letiltása

Az aktuális ASP.NET helyi regisztrációs funkció nem akadályozza meg, hogy az automatizált programok (robotok) tagfiókokat hozzanak létre; például robotmegelőző és érvényesítési technológiával, például CAPTCHA. Emiatt el kell távolítania a helyi bejelentkezési űrlapot és a regisztrációs hivatkozást a bejelentkezési oldalon. Ehhez nyissa meg a _Login.cshtml lapot a projektben, majd fűzzön megjegyzést a helyi bejelentkezési panel és a regisztrációs hivatkozás soraihoz. Az eredményként kapott oldalnak a következő kódmintához hasonlóan kell kinéznie:

<!-- 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 -->

Miután a helyi bejelentkezési panel és a regisztrációs hivatkozás le lett tiltva, a bejelentkezési oldal csak az engedélyezett külső hitelesítésszolgáltatókat jeleníti meg:

Külső szolgáltatók bejelentkezési képe