Authentification et autorisation pour SPAsAuthentication and authorization for SPAs

ASP.NET Core 3,0 ou version ultérieure offre une authentification dans les applications à page unique (SPAs) à l’aide de la prise en charge de l’autorisation de l’API.ASP.NET Core 3.0 or later offers authentication in Single Page Apps (SPAs) using the support for API authorization. ASP.NET Core identité pour l’authentification et le stockage des utilisateurs est associée à IdentityServer pour l’implémentation d’Open ID Connect.ASP.NET Core Identity for authenticating and storing users is combined with IdentityServer for implementing Open ID Connect.

Un paramètre d’authentification a été ajouté aux modèles de projet angulaire et REACT qui est similaire au paramètre d’authentification dans les modèles de projet application Web (Model-View-Controller) et application Web (Razor pages).An authentication parameter was added to the Angular and React project templates that is similar to the authentication parameter in the Web Application (Model-View-Controller) (MVC) and Web Application (Razor Pages) project templates. Les valeurs de paramètre autorisées sont None et Individual.The allowed parameter values are None and Individual. Le modèle de projet REACT. js et Redux ne prend pas en charge le paramètre d’authentification pour l’instant.The React.js and Redux project template doesn't support the authentication parameter at this time.

Créer une application avec prise en charge des autorisations d’APICreate an app with API authorization support

L’authentification et l’autorisation de l’utilisateur peuvent être utilisées avec les deux types d’angle et de réaction.User authentication and authorization can be used with both Angular and React SPAs. Ouvrez une invite de commandes et exécutez la commande suivante :Open a command shell, and run the following command:

Angulaire:Angular:

dotnet new angular -o <output_directory_name> -au Individual

Réaction:React:

dotnet new react -o <output_directory_name> -au Individual

La commande précédente crée une application ASP.NET Core avec un répertoire ClientApp contenant le Spa.The preceding command creates an ASP.NET Core app with a ClientApp directory containing the SPA.

Description générale des composants ASP.NET Core de l’applicationGeneral description of the ASP.NET Core components of the app

Les sections suivantes décrivent les ajouts au projet lorsque la prise en charge de l’authentification est incluse :The following sections describe additions to the project when authentication support is included:

Classe StartupStartup class

La classe Startup présente les ajouts suivants :The Startup class has the following additions:

  • À l’intérieur de la méthode Startup.ConfigureServices :Inside the Startup.ConfigureServices method:

    • Identité avec l’interface utilisateur par défaut :Identity with the default UI:

      services.AddDbContext<ApplicationDbContext>(options =>
          options.UseSqlite(Configuration.GetConnectionString("DefaultConnection")));
      
      services.AddDefaultIdentity<ApplicationUser>()
          .AddDefaultUI(UIFramework.Bootstrap4)
          .AddEntityFrameworkStores<ApplicationDbContext>();
      
    • IdentityServer avec une méthode d’assistance AddApiAuthorization supplémentaire qui définit des conventions de ASP.NET Core par défaut par-dessus IdentityServer :IdentityServer with an additional AddApiAuthorization helper method that sets up some default ASP.NET Core conventions on top of IdentityServer:

      services.AddIdentityServer()
          .AddApiAuthorization<ApplicationUser, ApplicationDbContext>();
      
    • Authentification avec une méthode d’assistance AddIdentityServerJwt supplémentaire qui configure l’application pour valider les jetons JWT produits par IdentityServer :Authentication with an additional AddIdentityServerJwt helper method that configures the app to validate JWT tokens produced by IdentityServer:

      services.AddAuthentication()
          .AddIdentityServerJwt();
      
  • À l’intérieur de la méthode Startup.Configure :Inside the Startup.Configure method:

    • Intergiciel d’authentification responsable de la validation des informations d’identification de la demande et de la définition de l’utilisateur dans le contexte de la requête :The authentication middleware that is responsible for validating the request credentials and setting the user on the request context:

      app.UseAuthentication();
      
    • L’intergiciel IdentityServer qui expose les points de terminaison Open ID Connect :The IdentityServer middleware that exposes the Open ID Connect endpoints:

      app.UseIdentityServer();
      

AddApiAuthorizationAddApiAuthorization

Cette méthode d’assistance configure IdentityServer pour utiliser notre configuration prise en charge.This helper method configures IdentityServer to use our supported configuration. IdentityServer est une infrastructure puissante et extensible pour gérer les problèmes de sécurité des applications.IdentityServer is a powerful and extensible framework for handling app security concerns. En même temps, cela expose une complexité inutile pour les scénarios les plus courants.At the same time, that exposes unnecessary complexity for the most common scenarios. Par conséquent, un ensemble de conventions et d’options de configuration qui vous sont fournies est considéré comme un bon point de départ.Consequently, a set of conventions and configuration options is provided to you that are considered a good starting point. Une fois vos besoins d’authentification modifiés, toute la puissance de IdentityServer est toujours disponible pour personnaliser l’authentification en fonction de vos besoins.Once your authentication needs change, the full power of IdentityServer is still available to customize authentication to suit your needs.

AddIdentityServerJwtAddIdentityServerJwt

Cette méthode d’assistance configure un modèle de stratégie pour l’application en tant que gestionnaire d’authentification par défaut.This helper method configures a policy scheme for the app as the default authentication handler. La stratégie est configurée pour permettre à l’identité de traiter toutes les demandes routées vers n’importe quel sous-chemin dans l’espace d’URL d’identité « /Identity ».The policy is configured to let Identity handle all requests routed to any subpath in the Identity URL space "/Identity". Le JwtBearerHandler gère toutes les autres requêtes.The JwtBearerHandler handles all other requests. En outre, cette méthode enregistre une ressource API <<ApplicationName>>API avec IdentityServer avec une étendue par défaut de <<ApplicationName>>API et configure l’intergiciel de jeton de porteur JWT pour valider les jetons émis par IdentityServer pour l’application.Additionally, this method registers an <<ApplicationName>>API API resource with IdentityServer with a default scope of <<ApplicationName>>API and configures the JWT Bearer token middleware to validate tokens issued by IdentityServer for the app.

WeatherForecastControllerWeatherForecastController

Dans le fichier Controllers\WeatherForecastController.cs , notez l’attribut [Authorize] appliqué à la classe qui indique que l’utilisateur doit être autorisé en fonction de la stratégie par défaut pour accéder à la ressource.In the Controllers\WeatherForecastController.cs file, notice the [Authorize] attribute applied to the class that indicates that the user needs to be authorized based on the default policy to access the resource. La stratégie d’autorisation par défaut est configurée pour utiliser le schéma d’authentification par défaut, qui est configurée par AddIdentityServerJwt vers le schéma de stratégie mentionné plus haut, ce qui fait du JwtBearerHandler configuré par une telle méthode d’assistance le gestionnaire par défaut pour les demandes à l’application.The default authorization policy happens to be configured to use the default authentication scheme, which is set up by AddIdentityServerJwt to the policy scheme that was mentioned above, making the JwtBearerHandler configured by such helper method the default handler for requests to the app.

ApplicationDbContextApplicationDbContext

Dans le fichier Data\ApplicationDbContext.cs , Notez que la même DbContext est utilisée dans l’identité, à l’exception près qu’elle étend ApiAuthorizationDbContext (une classe plus dérivée de IdentityDbContext) pour inclure le schéma pour IdentityServer.In the Data\ApplicationDbContext.cs file, notice the same DbContext is used in Identity with the exception that it extends ApiAuthorizationDbContext (a more derived class from IdentityDbContext) to include the schema for IdentityServer.

Pour obtenir le contrôle total du schéma de base de données, héritez de l’une des classes d’identité DbContext disponibles et configurez le contexte pour inclure le schéma d’identité en appelant builder.ConfigurePersistedGrantContext(_operationalStoreOptions.Value) sur la méthode de OnModelCreating.To gain full control of the database schema, inherit from one of the available Identity DbContext classes and configure the context to include the Identity schema by calling builder.ConfigurePersistedGrantContext(_operationalStoreOptions.Value) on the OnModelCreating method.

OidcConfigurationControllerOidcConfigurationController

Dans le fichier Controllers\OidcConfigurationController.cs , notez le point de terminaison configuré pour servir les paramètres OIDC que le client doit utiliser.In the Controllers\OidcConfigurationController.cs file, notice the endpoint that's provisioned to serve the OIDC parameters that the client needs to use.

appsettings.jsonappsettings.json

Dans le fichier appSettings. JSON de la racine du projet, une nouvelle section IdentityServer décrit la liste des clients configurés.In the appsettings.json file of the project root, there's a new IdentityServer section that describes the list of configured clients. Dans l’exemple suivant, il existe un seul client.In the following example, there's a single client. Le nom du client correspond au nom de l’application et est mappé par Convention au paramètre ClientId OAuth.The client name corresponds to the app name and is mapped by convention to the OAuth ClientId parameter. Le profil indique le type d’application en cours de configuration.The profile indicates the app type being configured. Il est utilisé en interne pour générer des conventions qui simplifient le processus de configuration du serveur.It's used internally to drive conventions that simplify the configuration process for the server. Plusieurs profils sont disponibles, comme expliqué dans la section profils d’application .There are several profiles available, as explained in the Application profiles section.

"IdentityServer": {
  "Clients": {
    "angularindividualpreview3final": {
      "Profile": "IdentityServerSPA"
    }
  }
}

appsettings.Development.jsonappsettings.Development.json

Dans le appSettings. Fichier Development. JSON de la racine du projet, il existe une section IdentityServer qui décrit la clé utilisée pour signer les jetons.In the appsettings.Development.json file of the project root, there's an IdentityServer section that describes the key used to sign tokens. Lors du déploiement en production, une clé doit être approvisionnée et déployée parallèlement à l’application, comme expliqué dans la section déploiement en production .When deploying to production, a key needs to be provisioned and deployed alongside the app, as explained in the Deploy to production section.

"IdentityServer": {
  "Key": {
    "Type": "Development"
  }
}

Description générale de l’application angulaireGeneral description of the Angular app

L’authentification et la prise en charge de l’autorisation d’API dans le modèle angulaire résident dans son propre module angulaire dans le répertoire ClientApp\src\api-Authorization .The authentication and API authorization support in the Angular template resides in its own Angular module in the ClientApp\src\api-authorization directory. Le module est composé des éléments suivants :The module is composed of the following elements:

  • 3 composants :3 components:
    • login. Component. TS: gère le déroulement de la connexion de l’application.login.component.ts: Handles the app's login flow.
    • logout. Component. TS: gère le déroulement de la déconnexion de l’application.logout.component.ts: Handles the app's logout flow.
    • login-menu. Component. TS: un widget qui affiche l’un des ensembles de liens suivants :login-menu.component.ts: A widget that displays one of the following sets of links:
      • Gestion des profils utilisateur et déconnexion des liens lorsque l’utilisateur est authentifié.User profile management and log out links when the user is authenticated.
      • Enregistrement et connexion des liens lorsque l’utilisateur n’est pas authentifié.Registration and log in links when the user isn't authenticated.
  • AuthorizeGuard de la protection d’itinéraire qui peut être ajouté aux itinéraires et requiert qu’un utilisateur soit authentifié avant de visiter l’itinéraire.A route guard AuthorizeGuard that can be added to routes and requires a user to be authenticated before visiting the route.
  • AuthorizeInterceptor d’intercepteur HTTP qui associe le jeton d’accès aux requêtes HTTP sortantes ciblant l’API lorsque l’utilisateur est authentifié.An HTTP interceptor AuthorizeInterceptor that attaches the access token to outgoing HTTP requests targeting the API when the user is authenticated.
  • AuthorizeService de service qui gère les détails de niveau inférieur du processus d’authentification et expose des informations sur l’utilisateur authentifié au reste de l’application à des fins de consommation.A service AuthorizeService that handles the lower-level details of the authentication process and exposes information about the authenticated user to the rest of the app for consumption.
  • Module angulaire qui définit les itinéraires associés aux parties d’authentification de l’application.An Angular module that defines routes associated with the authentication parts of the app. Il expose le composant de menu de connexion, l’intercepteur, la protection et le service à consommer à partir du reste de l’application.It exposes the login menu component, the interceptor, the guard, and the service for consumption from the rest of the app.

Description générale de l’application REACTGeneral description of the React app

La prise en charge de l’authentification et de l’autorisation d’API dans le modèle REACT réside dans le répertoire ClientApp\src\components\api-Authorization .The support for authentication and API authorization in the React template resides in the ClientApp\src\components\api-authorization directory. Il se compose des éléments suivants :It's composed of the following elements:

  • 4 composants :4 components:
    • Login. js: gère le déroulement de la connexion de l’application.Login.js: Handles the app's login flow.
    • Logout. js: gère le déroulement de la déconnexion de l’application.Logout.js: Handles the app's logout flow.
    • LoginMenu. js: widget qui affiche l’un des ensembles de liens suivants :LoginMenu.js: A widget that displays one of the following sets of links:
      • Gestion des profils utilisateur et déconnexion des liens lorsque l’utilisateur est authentifié.User profile management and log out links when the user is authenticated.
      • Enregistrement et connexion des liens lorsque l’utilisateur n’est pas authentifié.Registration and log in links when the user isn't authenticated.
    • AuthorizeRoute. js: composant de routage qui requiert l’authentification d’un utilisateur avant le rendu du composant indiqué dans le paramètre Component.AuthorizeRoute.js: A route component that requires a user to be authenticated before rendering the component indicated in the Component parameter.
  • Une authService instance exportée de la classe AuthorizeService qui gère les détails de niveau inférieur du processus d’authentification et expose des informations sur l’utilisateur authentifié au reste de l’application à des fins de consommation.An exported authService instance of class AuthorizeService that handles the lower-level details of the authentication process and exposes information about the authenticated user to the rest of the app for consumption.

Maintenant que vous avez vu les principaux composants de la solution, vous pouvez examiner de manière plus détaillée les scénarios individuels de l’application.Now that you've seen the main components of the solution, you can take a deeper look at individual scenarios for the app.

Exiger une autorisation sur une nouvelle APIRequire authorization on a new API

Par défaut, le système est configuré pour demander facilement une autorisation pour les nouvelles API.By default, the system is configured to easily require authorization for new APIs. Pour ce faire, créez un nouveau contrôleur et ajoutez l’attribut [Authorize] à la classe de contrôleur ou à n’importe quelle action dans le contrôleur.To do so, create a new controller and add the [Authorize] attribute to the controller class or to any action within the controller.

Personnaliser le gestionnaire d’authentification d’APICustomize the API authentication handler

Pour personnaliser la configuration du gestionnaire JWT de l’API, configurez son JwtBearerOptions instance :To customize the configuration of the API's JWT handler, configure its JwtBearerOptions instance:

services.AddAuthentication()
    .AddIdentityServerJwt();

services.Configure<JwtBearerOptions>(
    IdentityServerJwtConstants.IdentityServerJwtBearerScheme,
    options =>
    {
        ...
    });

Le gestionnaire JWT de l’API déclenche des événements qui permettent de contrôler le processus d’authentification à l’aide de JwtBearerEvents.The API's JWT handler raises events that enable control over the authentication process using JwtBearerEvents. Pour assurer la prise en charge de l’autorisation d’API, AddIdentityServerJwt inscrit ses propres gestionnaires d’événements.To provide support for API authorization, AddIdentityServerJwt registers its own event handlers.

Pour personnaliser la gestion d’un événement, encapsulez le gestionnaire d’événements existant avec une logique supplémentaire, le cas échéant.To customize the handling of an event, wrap the existing event handler with additional logic as required. Par exemple :For example:

services.Configure<JwtBearerOptions>(
    IdentityServerJwtConstants.IdentityServerJwtBearerScheme,
    options =>
    {
        var onTokenValidated = options.Events.OnTokenValidated;       
        
        options.Events.OnTokenValidated = async context =>
        {
            await onTokenValidated(context);
            ...
        }
    });

Dans le code précédent, le gestionnaire d’événements OnTokenValidated est remplacé par une implémentation personnalisée.In the preceding code, the OnTokenValidated event handler is replaced with a custom implementation. Cette implémentation :This implementation:

  1. Appelle l’implémentation d’origine fournie par la prise en charge de l’autorisation d’API.Calls the original implementation provided by the API authorization support.
  2. Exécutez sa propre logique personnalisée.Run its own custom logic.

Protéger un itinéraire côté client (angulaire)Protect a client-side route (Angular)

La protection d’un itinéraire côté client s’effectue en ajoutant la protection d’autorisation à la liste des gardes à exécuter lors de la configuration d’un itinéraire.Protecting a client-side route is done by adding the authorize guard to the list of guards to run when configuring a route. Par exemple, vous pouvez voir comment la fetch-data itinéraire est configuré dans le module angulaire de l’application principale :As an example, you can see how the fetch-data route is configured within the main app Angular module:

RouterModule.forRoot([
  // ...
  { path: 'fetch-data', component: FetchDataComponent, canActivate: [AuthorizeGuard] },
])

Il est important de mentionner que la protection d’un itinéraire ne protège pas le point de terminaison réel (ce qui nécessite toujours un attribut [Authorize] qui lui est appliqué), mais qu’il empêche uniquement l’utilisateur de naviguer vers l’itinéraire donné côté client lorsqu’il n’est pas authentifié.It's important to mention that protecting a route doesn't protect the actual endpoint (which still requires an [Authorize] attribute applied to it) but that it only prevents the user from navigating to the given client-side route when it isn't authenticated.

Authentifier les demandes d’API (angulaires)Authenticate API requests (Angular)

L’authentification des demandes auprès des API hébergées parallèlement à l’application s’effectue automatiquement par le biais de l’intercepteur client HTTP défini par l’application.Authenticating requests to APIs hosted alongside the app is done automatically through the use of the HTTP client interceptor defined by the app.

Protéger un itinéraire côté client (REACT)Protect a client-side route (React)

Protégez un itinéraire côté client à l’aide du composant AuthorizeRoute au lieu du composant Route brut.Protect a client-side route by using the AuthorizeRoute component instead of the plain Route component. Par exemple, notez la configuration de l’itinéraire fetch-data dans le composant App :For example, notice how the fetch-data route is configured within the App component:

<AuthorizeRoute path='/fetch-data' component={FetchData} />

Protection d’un itinéraire :Protecting a route:

  • Ne protège pas le point de terminaison réel (qui requiert toujours un attribut [Authorize] qui lui est appliqué).Doesn't protect the actual endpoint (which still requires an [Authorize] attribute applied to it).
  • Empêche uniquement l’utilisateur de naviguer vers l’itinéraire donné côté client lorsqu’il n’est pas authentifié.Only prevents the user from navigating to the given client-side route when it isn't authenticated.

Authentifier les demandes d’API (REACT)Authenticate API requests (React)

Pour authentifier les demandes avec REACT, commencez par importer l’instance de authService à partir du AuthorizeService.Authenticating requests with React is done by first importing the authService instance from the AuthorizeService. Le jeton d’accès est récupéré à partir de la authService et est joint à la demande, comme indiqué ci-dessous.The access token is retrieved from the authService and is attached to the request as shown below. Dans les composants de réaction, ce travail est généralement effectué dans la méthode de cycle de vie componentDidMount ou en tant que résultat de certaines interactions de l’utilisateur.In React components, this work is typically done in the componentDidMount lifecycle method or as the result from some user interaction.

Importer le authService dans votre composantImport the authService into your component

import authService from './api-authorization/AuthorizeService'

Récupérer et attacher le jeton d’accès à la réponseRetrieve and attach the access token to the response

async populateWeatherData() {
  const token = await authService.getAccessToken();
  const response = await fetch('api/SampleData/WeatherForecasts', {
    headers: !token ? {} : { 'Authorization': `Bearer ${token}` }
  });
  const data = await response.json();
  this.setState({ forecasts: data, loading: false });
}

Déployer en productionDeploy to production

Pour déployer l’application en production, vous devez configurer les ressources suivantes :To deploy the app to production, the following resources need to be provisioned:

  • Une base de données pour stocker les comptes d’utilisateur d’identité et les autorisations IdentityServer.A database to store the Identity user accounts and the IdentityServer grants.
  • Certificat de production à utiliser pour la signature des jetons.A production certificate to use for signing tokens.
    • Il n’existe aucune exigence spécifique pour ce certificat. Il peut s’agir d’un certificat auto-signé ou d’un certificat approvisionné par le biais d’une autorité de certification.There are no specific requirements for this certificate; it can be a self-signed certificate or a certificate provisioned through a CA authority.
    • Il peut être généré à l’aide d’outils standard tels que PowerShell ou OpenSSL.It can be generated through standard tools like PowerShell or OpenSSL.
    • Il peut être installé dans le magasin de certificats sur les ordinateurs cibles ou déployé en tant que fichier . pfx avec un mot de passe fort.It can be installed into the certificate store on the target machines or deployed as a .pfx file with a strong password.

Exemple : déploiement sur sites Web AzureExample: Deploy to Azure Websites

Cette section décrit le déploiement de l’application sur des sites Web Azure à l’aide d’un certificat stocké dans le magasin de certificats.This section describes deploying the app to Azure websites using a certificate stored in the certificate store. Pour modifier l’application afin de charger un certificat à partir du magasin de certificats, le plan de App Service doit être au moins au niveau standard lorsque vous configurez dans une étape ultérieure.To modify the app to load a certificate from the certificate store, the App Service plan needs to be on at least the Standard tier when you configure in a later step. Dans le fichier appSettings. JSON de l’application, modifiez la section IdentityServer pour inclure les détails de la clé :In the app's appsettings.json file, modify the IdentityServer section to include the key details:

"IdentityServer": {
  "Key": {
    "Type": "Store",
    "StoreName": "My",
    "StoreLocation": "CurrentUser",
    "Name": "CN=MyApplication"
  }
}
  • Le nom du magasin représente le nom du magasin de certificats dans lequel le certificat est stocké.The store name represents the name of the certificate store where the certificate is stored. Dans ce cas, il pointe vers le magasin de l’utilisateur personnel.In this case, it points to the personal user store.
  • L’emplacement du magasin représente l’emplacement à partir duquel charger le certificat (CurrentUser ou LocalMachine).The store location represents where to load the certificate from (CurrentUser or LocalMachine).
  • La propriété Name du certificat correspond au sujet distinctif du certificat.The name property on certificate corresponds with the distinguished subject for the certificate.

Pour effectuer un déploiement sur des sites Web Azure, déployez l’application en suivant les étapes décrites dans déployer l’application sur Azure pour créer les ressources Azure nécessaires et déployer l’application en production.To deploy to Azure Websites, deploy the app following the steps in Deploy the app to Azure to create the necessary Azure resources and deploy the app to production.

Après avoir effectué les instructions précédentes, l’application est déployée dans Azure, mais n’est pas encore fonctionnelle.After following the preceding instructions, the app is deployed to Azure but isn't yet functional. Le certificat utilisé par l’application doit toujours être configuré.The certificate used by the app still needs to be set up. Localisez l’empreinte numérique du certificat à utiliser et suivez les étapes décrites dans charger vos certificats.Locate the thumbprint for the certificate to be used, and follow the steps described in Load your certificates.

Bien que ces étapes mentionnent SSL, il existe une section certificats privés sur le portail, dans laquelle vous pouvez télécharger le certificat approvisionné à utiliser avec l’application.While these steps mention SSL, there's a Private certificates section on the portal where you can upload the provisioned certificate to use with the app.

Après cette étape, redémarrez l’application et celle-ci doit être fonctionnelle.After this step, restart the app and it should be functional.

Autres options de configurationOther configuration options

La prise en charge de l’autorisation de l’API s’appuie sur IdentityServer avec un ensemble de conventions, de valeurs par défaut et d’améliorations pour simplifier l’expérience de la création de la demande.The support for API authorization builds on top of IdentityServer with a set of conventions, default values, and enhancements to simplify the experience for SPAs. Inutile de préciser que la pleine puissance de IdentityServer est disponible en arrière-plan si les intégrations de ASP.NET Core ne couvrent pas votre scénario.Needless to say, the full power of IdentityServer is available behind the scenes if the ASP.NET Core integrations don't cover your scenario. La prise en charge ASP.NET Core est axée sur les applications « internes », où toutes les applications sont créées et déployées par notre organisation.The ASP.NET Core support is focused on "first-party" apps, where all the apps are created and deployed by our organization. Par conséquent, le support n’est pas proposé pour les éléments tels que le consentement ou la Fédération.As such, support isn't offered for things like consent or federation. Pour ces scénarios, utilisez IdentityServer et suivez leur documentation.For those scenarios, use IdentityServer and follow their documentation.

Profils d’applicationApplication profiles

Les profils d’application sont des configurations prédéfinies pour les applications qui définissent davantage leurs paramètres.Application profiles are predefined configurations for apps that further define their parameters. À ce stade, les profils suivants sont pris en charge :At this time, the following profiles are supported:

  • IdentityServerSPA: représente un SPA hébergé en même temps que IdentityServer comme une unité unique.IdentityServerSPA: Represents a SPA hosted alongside IdentityServer as a single unit.
    • La valeur par défaut de la redirect_uri /authentication/login-callback.The redirect_uri defaults to /authentication/login-callback.
    • La valeur par défaut de la post_logout_redirect_uri /authentication/logout-callback.The post_logout_redirect_uri defaults to /authentication/logout-callback.
    • L’ensemble d’étendues comprend les openid, les profileet toutes les étendues définies pour les API dans l’application.The set of scopes includes the openid, profile, and every scope defined for the APIs in the app.
    • L’ensemble de types de réponses OIDC autorisés est id_token token ou chacun d’eux individuellement (id_token, token).The set of allowed OIDC response types is id_token token or each of them individually (id_token, token).
    • Le mode de réponse autorisé est fragment.The allowed response mode is fragment.
  • SPA: représente un SPA qui n’est pas hébergé avec IdentityServer.SPA: Represents a SPA that isn't hosted with IdentityServer.
    • L’ensemble d’étendues comprend les openid, les profileet toutes les étendues définies pour les API dans l’application.The set of scopes includes the openid, profile, and every scope defined for the APIs in the app.
    • L’ensemble de types de réponses OIDC autorisés est id_token token ou chacun d’eux individuellement (id_token, token).The set of allowed OIDC response types is id_token token or each of them individually (id_token, token).
    • Le mode de réponse autorisé est fragment.The allowed response mode is fragment.
  • IdentityServerJwt: représente une API hébergée conjointement avec IdentityServer.IdentityServerJwt: Represents an API that is hosted alongside with IdentityServer.
    • L’application est configurée pour avoir une seule étendue qui correspond par défaut au nom de l’application.The app is configured to have a single scope that defaults to the app name.
  • API: représente une API qui n’est pas hébergée avec IdentityServer.API: Represents an API that isn't hosted with IdentityServer.
    • L’application est configurée pour avoir une seule étendue qui correspond par défaut au nom de l’application.The app is configured to have a single scope that defaults to the app name.

Configuration via AppSettingsConfiguration through AppSettings

Configurez les applications par le biais du système de configuration en les ajoutant à la liste des Clients ou des Resources.Configure the apps through the configuration system by adding them to the list of Clients or Resources.

Configurez la propriété redirect_uri et post_logout_redirect_uri de chaque client, comme indiqué dans l’exemple suivant :Configure each client's redirect_uri and post_logout_redirect_uri property, as shown in the following example:

"IdentityServer": {
  "Clients": {
    "MySPA": {
      "Profile": "SPA",
      "RedirectUri": "https://www.example.com/authentication/login-callback",
      "LogoutUri": "https://www.example.com/authentication/logout-callback"
    }
  }
}

Lors de la configuration des ressources, vous pouvez configurer les étendues de la ressource comme indiqué ci-dessous :When configuring resources, you can configure the scopes for the resource as shown below:

"IdentityServer": {
  "Resources": {
    "MyExternalApi": {
      "Profile": "API",
      "Scopes": "a b c"
    }
  }
}

Configuration par le biais du codeConfiguration through code

Vous pouvez également configurer les clients et les ressources par le biais du code à l’aide d’une surcharge de AddApiAuthorization qui prend une mesure pour configurer les options.You can also configure the clients and resources through code using an overload of AddApiAuthorization that takes an action to configure options.

AddApiAuthorization<ApplicationUser, ApplicationDbContext>(options =>
{
    options.Clients.AddSPA(
        "My SPA", spa =>
        spa.WithRedirectUri("http://www.example.com/authentication/login-callback")
           .WithLogoutRedirectUri(
               "http://www.example.com/authentication/logout-callback"));

    options.ApiResources.AddApiResource("MyExternalApi", resource =>
        resource.WithScopes("a", "b", "c"));
});

Ressources supplémentairesAdditional resources