Dela via


Externa autentiseringstjänster med ASP.NET webb-API (C#)

För ny webbappsutveckling rekommenderar vi minimala API:er

Vi rekommenderar att du använder det säkraste autentiseringsalternativet. Information om .NET-appar som distribuerats till Azure finns i:

Azure Key Vault och .NET Aspire är det säkraste sättet att lagra och hämta hemligheter. Azure Key Vault är en molntjänst som skyddar krypteringsnycklar och hemligheter som certifikat, anslutningssträngar och lösenord. Information om .NET Aspire finns i Säker kommunikation mellan värd- och klientintegreringar.

Undvik att bevilja autentiseringsuppgifter för resursägares lösenord eftersom det:

  • Exponerar användarens lösenord för klienten.
  • Är en betydande säkerhetsrisk.
  • Bör endast användas när andra autentiseringsflöden inte är möjliga.

När appen distribueras till en testserver kan en miljövariabel användas för att ange anslutningssträngen till en testdatabasserver. Miljövariabler lagras vanligtvis i oformaterad, okrypterad text. Om datorn eller processen komprometteras kan miljövariabler nås av ej betrodda parter. Vi rekommenderar att du inte använder miljövariabler för att lagra en produktionsanslutningssträng eftersom det inte är den säkraste metoden.

Riktlinjer för konfigurationsdata:

  • Lagra aldrig lösenord eller andra känsliga data i konfigurationsproviderns kod eller i konfigurationsfiler för oformaterad text.
  • Använd inte produktionshemligheter i utvecklings- eller testmiljöer.
  • Ange hemligheter utanför projektet så att de inte av misstag kan checkas in på en källkodslagringsplats.

Visual Studio 2017 och ASP.NET 4.7.2 utökar säkerhetsalternativen för ensidesprogram (SPA) och webb-API tjänster för integrering med externa autentiseringstjänster, som omfattar flera OAuth/OpenID- och autentiseringstjänster för sociala medier: Microsoft-konton, Twitter, Facebook och Google.

I den här genomgången

Förutsättningar

Om du vill följa exemplen i den här genomgången måste du ha följande:

Använda externa autentiseringstjänster

Det stora antalet externa autentiseringstjänster som för närvarande är tillgängliga för webbutvecklare bidrar till att minska utvecklingstiden när nya webbprogram skapas. Webbanvändare har vanligtvis flera befintliga konton för populära webbtjänster och webbplatser för sociala medier, och när ett webbprogram implementerar autentiseringstjänster från en extern webbtjänst eller en webbplats för sociala medier sparar det den utvecklingstid som skulle ha lagts på att skapa en autentiseringsimplementering. Om du använder en extern autentiseringstjänst sparas slutanvändarna från att behöva skapa ett annat konto för ditt webbprogram och även från att behöva komma ihåg ett annat användarnamn och lösenord.

Tidigare har utvecklare haft två alternativ: skapa en egen autentiseringsimplementering eller lära sig att integrera en extern autentiseringstjänst i sina program. På den mest grundläggande nivån illustrerar följande diagram ett enkelt flöde för begäran för en användaragent (webbläsare) som begär information från ett webbprogram som är konfigurerat för att använda en extern autentiseringstjänst:

Bild av ett enkelt begärandeflöde för en användaragent

I föregående diagram skickar användaragenten (eller webbläsaren i det här exemplet) en begäran till ett webbprogram som omdirigerar webbläsaren till en extern autentiseringstjänst. Användaragenten skickar sina autentiseringsuppgifter till den externa autentiseringstjänsten, och om användaragenten har autentiserats omdirigerar den externa autentiseringstjänsten användaragenten till det ursprungliga webbprogrammet med någon form av token som användaragenten skickar till webbprogrammet. Webbprogrammet använder token för att verifiera att användaragenten har autentiserats av den externa autentiseringstjänsten, och webbprogrammet kan använda token för att samla in mer information om användaragenten. När programmet har bearbetat användaragentens information returnerar webbprogrammet lämpligt svar till användaragenten baserat på dess auktoriseringsinställningar.

I det andra exemplet förhandlar användaragenten med webbprogrammet och den externa auktoriseringsservern, och webbprogrammet utför ytterligare kommunikation med den externa auktoriseringsservern för att hämta ytterligare information om användaragenten:

Bild av användaragenten som förhandlar med webbprogrammet

Visual Studio 2017 och ASP.NET 4.7.2 gör integrering med externa autentiseringstjänster enklare för utvecklare genom att tillhandahålla inbyggd integrering för följande autentiseringstjänster:

  • Facebook
  • Google
  • Microsoft-konton (Windows Live ID-konton)
  • Twitter

Exemplen i den här genomgången visar hur du konfigurerar var och en av de externa autentiseringstjänster som stöds med hjälp av den nya mallen ASP.NET webbprogram som levereras med Visual Studio 2017.

Not

Om det behövs kan du behöva lägga till ditt fullständiga domännamn i inställningarna för din externa autentiseringstjänst. Det här kravet baseras på säkerhetsbegränsningar för vissa externa autentiseringstjänster som kräver FQDN i dina programinställningar för att matcha det FQDN som används av dina klienter. (Stegen för detta varierar kraftigt för varje extern autentiseringstjänst. Du måste läsa dokumentationen för varje extern autentiseringstjänst för att se om detta krävs och hur du konfigurerar de här inställningarna.) Om du behöver konfigurera IIS Express för att använda ett FQDN för att testa den här miljön kan du läsa avsnittet Konfigurera IIS Express för att använda ett fullständigt kvalificerat domännamn senare i den här genomgången.

Skapa ett exempelwebbprogram

Följande steg leder dig genom att skapa ett exempelprogram med hjälp av mallen ASP.NET webbprogram, och du kommer att använda det här exempelprogrammet för var och en av de externa autentiseringstjänsterna senare i den här genomgången.

Starta Visual Studio 2017 och välj Nytt projekt på startsidan. I menyn Arkiv väljer du Ny och sedan Project.

När dialogrutan Nytt projekt visas väljer du Installerat och expanderar Visual C#. Under Visual C#väljer du Web. I listan med projektmallar väljer du ASP.NET Web Application (.Net Framework). Ange ett namn för projektet och klicka på OK.

dialogrutan bild av nytt projekt

När New ASP.NET Project visas väljer du mallen ensidesprogram och klickar på Skapa projekt.

Bild av mallval

Vänta när Visual Studio 2017 skapar projektet.

När Visual Studio 2017 har skapat projektet öppnar du den Startup.Auth.cs fil som finns i mappen App_Start.

När du först skapar projektet aktiveras ingen av de externa autentiseringstjänsterna i Startup.Auth.cs fil. Följande illustrerar vad din kod kan likna, med avsnitten markerade för var du skulle aktivera en extern autentiseringstjänst och eventuella relevanta inställningar för att använda Microsoft-konton, Twitter-, Facebook- eller Google-autentisering med ditt ASP.NET-program:

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

När du trycker på F5 för att skapa och felsöka webbprogrammet visas en inloggningsskärm där du ser att inga externa autentiseringstjänster har definierats.

Bild av inloggningsskärmen

I följande avsnitt får du lära dig hur du aktiverar var och en av de externa autentiseringstjänster som tillhandahålls med ASP.NET i Visual Studio 2017.

Aktivera Facebook-autentisering

Om du använder Facebook-autentisering måste du skapa ett Facebook-utvecklarkonto, och ditt projekt kräver ett program-ID och en hemlig nyckel från Facebook för att fungera. Information om hur du skapar ett Facebook-utvecklarkonto och hämtar ditt program-ID och din hemliga nyckel finns i https://go.microsoft.com/fwlink/?LinkID=252166.

När du har fått ditt program-ID och din hemliga nyckel använder du följande steg för att aktivera Facebook-autentisering för ditt webbprogram:

  1. När projektet är öppet i Visual Studio 2017 öppnar du filen Startup.Auth.cs.

  2. Hitta avsnittet för Facebook-autentisering i koden.

    // 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. Ta bort tecknen "//" för att avkommenta de markerade kodraderna och lägg sedan till ditt program-ID och din hemliga nyckel. När du har lagt till dessa parametrar kan du kompilera om 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. När du trycker på F5 för att öppna webbprogrammet i webbläsaren ser du att Facebook har definierats som en extern autentiseringstjänst:

    Bild av Facebook definierad

  5. När du klickar på knappen Facebook omdirigeras webbläsaren till Inloggningssidan för Facebook:

    Bild av Facebook-inloggningssidan

  6. När du har angett dina Facebook-autentiseringsuppgifter och klickat på Logga inomdirigeras webbläsaren tillbaka till webbprogrammet, vilket uppmanar dig att ange Användarnamn som du vill associera med ditt Facebook-konto:

    Bild av webbprogram

  7. När du har angett ditt användarnamn och klickat på knappen Registrera dig visas standardsidan startsida för ditt Facebook-konto.

    bild som visar facebooks standardstartsida

Aktivera Google-autentisering

Om du använder Google-autentisering måste du skapa ett Google-utvecklarkonto, och ditt projekt kräver ett program-ID och en hemlig nyckel från Google för att fungera. Information om hur du skapar ett Google-utvecklarkonto och hämtar ditt program-ID och din hemliga nyckel finns i https://developers.google.com.

Använd följande steg för att aktivera Google-autentisering för ditt webbprogram:

  1. När projektet är öppet i Visual Studio 2017 öppnar du filen Startup.Auth.cs.

  2. Hitta Google-autentiseringsavsnittet i koden:

    // 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. Ta bort tecknen "//" för att avkommenta de markerade kodraderna och lägg sedan till ditt program-ID och din hemliga nyckel. När du har lagt till dessa parametrar kan du kompilera om 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. När du trycker på F5 för att öppna webbprogrammet i webbläsaren ser du att Google har definierats som en extern autentiseringstjänst:

    Image Google har definierats

  5. När du klickar på knappen Google omdirigeras webbläsaren till Google-inloggningssidan:

    Bild av Google-inloggningssidan

  6. När du har angett dina Google-autentiseringsuppgifter och klickat på Logga inuppmanar Google dig att kontrollera att webbprogrammet har behörighet att komma åt ditt Google-konto:

    Bild av Google-behörigheter

  7. När du klickar på Accepteraomdirigeras webbläsaren tillbaka till webbprogrammet, vilket uppmanar dig att ange Användarnamn som du vill associera med ditt Google-konto:

    Bild av webbappens uppmaning om användarnamn för att associera

  8. När du har angett ditt användarnamn och klickat på knappen Registrera dig visas standardinställningen startsida för ditt Google-konto:

    Bild av Googles standardstartsida

Aktivera Microsoft-autentisering

Microsoft-autentisering kräver att du skapar ett utvecklarkonto och kräver ett klient-ID och en klienthemlighet för att fungera. Information om hur du skapar ett Microsoft-utvecklarkonto och hämtar ditt klient-ID och din klienthemlighet finns i https://go.microsoft.com/fwlink/?LinkID=144070.

När du har fått din konsumentnyckel och konsumenthemlighet använder du följande steg för att aktivera Microsoft-autentisering för ditt webbprogram:

  1. När projektet är öppet i Visual Studio 2017 öppnar du filen Startup.Auth.cs.

  2. Hitta avsnittet för Microsoft-autentisering i koden.

    // 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. Ta bort tecknen "//" för att avkommenta de markerade kodraderna och lägg sedan till klient-ID och klienthemlighet. När du har lagt till dessa parametrar kan du kompilera om 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. När du trycker på F5 för att öppna webbprogrammet i webbläsaren ser du att Microsoft har definierats som en extern autentiseringstjänst:

    Microsoft-definierad bild

  5. När du klickar på knappen Microsoft omdirigeras webbläsaren till Microsofts inloggningssida:

    Bild av Microsoft-inloggningssidan

  6. När du har angett dina Microsoft-autentiseringsuppgifter och klickat på Logga inuppmanas du att kontrollera att webbprogrammet har behörighet att komma åt ditt Microsoft-konto:

    Bild av Microsoft-behörigheter

  7. När du klickar på Jaomdirigeras webbläsaren tillbaka till webbprogrammet, vilket uppmanar dig att ange Användarnamn som du vill associera med ditt Microsoft-konto:

    Bild på Google-konto för att koppla till

  8. När du har angett ditt användarnamn och klickat på knappen Registrera dig visas standardinställningen startsida för ditt Microsoft-konto:

    Bild av Microsofts standardstartsida

Aktivera Twitter-autentisering

Twitter-autentisering kräver att du skapar ett utvecklarkonto, och det kräver en konsumentnyckel och konsumenthemlighet för att fungera. Information om hur du skapar ett Twitter-utvecklarkonto och hämtar din konsumentnyckel och konsumenthemlighet finns i https://go.microsoft.com/fwlink/?LinkID=252166.

När du har fått din konsumentnyckel och konsumenthemlighet använder du följande steg för att aktivera Twitter-autentisering för ditt webbprogram:

  1. När projektet är öppet i Visual Studio 2017 öppnar du filen Startup.Auth.cs.

  2. Lokalisera sektionen för Twitter-autentisering i koden.

    // 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. Ta bort "//"-tecknen för att ta bort kommentarer till de markerade kodraderna och lägg sedan till din konsumentnyckel och konsumenthemlighet. När du har lagt till dessa parametrar kan du kompilera om 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. När du trycker på F5 för att öppna webbprogrammet i webbläsaren ser du att Twitter har definierats som en extern autentiseringstjänst:

    Twitter-bild definierad

  5. När du klickar på knappen Twitter omdirigeras webbläsaren till Inloggningssidan för Twitter:

    Bild av Twitter-inloggningssidan

  6. När du har angett dina Twitter-autentiseringsuppgifter och klickat på Auktorisera appomdirigeras webbläsaren tillbaka till webbprogrammet, vilket uppmanar dig att ange Användarnamn som du vill associera med ditt Twitter-konto:

    Bild av Twitter-konto som ska associeras i webbappen

  7. När du har angett ditt användarnamn och klickat på knappen Registrera dig visar webbapplikationen den förvalda startsidan för ditt Twitter-konto:

    Bild av standardstartsidan för Twitter

Ytterligare information

Mer information om hur du skapar program som använder OAuth och OpenID finns i följande URL:er:

Kombinera externa autentiseringstjänster

Om du vill ha större flexibilitet kan du definiera flera externa autentiseringstjänster samtidigt – detta gör att webbprogrammets användare kan använda ett konto från någon av de aktiverade externa autentiseringstjänsterna:

Bild av flera externa autentiseringstjänster

Konfigurera IIS Express för att använda ett fullständigt domännamn

Vissa externa autentiseringsprovidrar stöder inte testning av ditt program med hjälp av en HTTP-adress som http://localhost:port/. Du kan lösa det här problemet genom att lägga till en statisk FQDN-mappning (Fullständigt domännamn) i HOSTS-filen och konfigurera projektalternativen i Visual Studio 2017 för att använda FQDN för testning/felsökning. Använd följande steg för att göra det:

  • Lägg till en statisk FQDN-mappning i din HOSTS-fil.

    1. Öppna en upphöjd kommandotolk i Windows.

    2. Skriv följande kommando:

      anteckningar %WinDir%\system32\drivers\etc\hosts

    3. Lägg till en post som följande i HOSTS-filen:

      127.0.0.1 www.wingtiptoys.com

    4. Spara och stäng HOSTS-filen.

  • Konfigurera ditt Visual Studio-projekt så att det använder FQDN:

    1. När projektet är öppet i Visual Studio 2017 klickar du på menyn Project och väljer sedan projektets egenskaper. Du kan till exempel välja WebApplication1-egenskaper.
    2. Välj fliken Web.
    3. Ange ditt FQDN för -projekt-URL:en. Du kan till exempel ange http://www.wingtiptoys.com om det var den FQDN-mappning som du lade till i HOSTS-filen.
  • Konfigurera IIS Express för att använda FQDN för ditt program:

    1. Öppna en upphöjd kommandotolk i Windows.

    2. Skriv följande kommando för att ändra till din IIS Express-mapp:

      cd /d "%ProgramFiles%\IIS Express"

    3. Skriv följande kommando för att lägga till FQDN i ditt program:

      appcmd.exe ange config -section:system.applicationHost/sites /+"[name='WebApplication1'].bindningar.[protocol='http',bindingInformation='*:80:www.wingtiptoys.com']" /commit:apphost

    Där WebApplication1 är namnet på projektet och bindingInformation innehåller portnumret och FQDN som du vill använda för testningen.

Hämta programinställningar för Microsoft-autentisering

Att länka ett program till Windows Live för Microsoft-autentisering är en enkel process. Om du inte redan har länkat ett program till Windows Live kan du använda följande steg:

  1. Bläddra till https://go.microsoft.com/fwlink/?LinkID=144070 och ange ditt Microsoft-kontonamn och lösenord när du uppmanas att göra det. Klicka sedan på Logga in:

  2. Välj Lägg till en app och ange namnet på ditt program när du uppmanas till det och klicka sedan på Skapa:

    Bild av att lägga till en app

  3. Välj din app under Namn och dess programegenskaper visas.

  4. Ange omdirigeringsdomänen för ditt program. Kopiera program-ID:t och under Programhemligheterväljer du Generera lösenord. Kopiera lösenordet som visas. Program-ID och lösenord är ditt klient-ID och klienthemlighet. Välj Ok och sedan Spara.

    bild av omdirigeringsdomäninformation

Valfritt: Inaktivera lokal registrering

Den aktuella ASP.NET lokala registreringsfunktionen hindrar inte automatiserade program (robotar) från att skapa medlemskonton. genom att till exempel använda en robotskydds- och valideringsteknik som CAPTCHA-. Därför bör du ta bort det lokala inloggningsformuläret och registreringslänken på inloggningssidan. Om du vill göra det öppnar du sidan _Login.cshtml i projektet och kommenterar sedan ut raderna för den lokala inloggningspanelen och registreringslänken. Den resulterande sidan bör se ut som följande kodexempel:

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

När den lokala inloggningspanelen och registreringslänken har inaktiverats visar inloggningssidan endast de externa autentiseringsprovidrar som du har aktiverat:

Bild av inloggning endast för externa leverantörer