Configuration de la connexion externe du compte Microsoft avec ASP.NET Core

Article
11/30/2023

Cet exemple vous montre comment permettre aux utilisateurs de se connecter avec leur compte Microsoft professionnel, scolaire ou personnel à l'aide du projet ASP.NET Core 6.0 créé à la page précédente.

Créer l'application dans le Video Indexer Developer Portal Microsoft

Ajoutez le package NuGet Microsoft.AspNetCore.Authentication.MicrosoftAccount au projet.
Accédez à la page Azure portal – inscriptions d’applications et créez ou connectez-vous à un compte Microsoft :

Si vous n'avez pas de compte Microsoft, sélectionnez Créer un. Après vous être connecté, vous êtes redirigé vers la page d'inscriptions d’applications :

Sélectionnez Nouvelle inscription.
Saisissez un Nom.
Sélectionnez une option pour Types de compte pris en charge.
- Le package MicrosoftAccount prend en charge les inscriptions d'applications créées à l'aide des options "Comptes dans n'importe quel répertoire organisationnel" ou "Comptes dans n'importe quel répertoire organisationnel et comptes Microsoft" par défaut.
- Pour utiliser d'autres options, définissez AuthorizationEndpoint et TokenEndpoint membres de MicrosoftAccountOptions utilisés pour initialiser l'authentification du compte Microsoft sur les URL affichées sur la page Points de terminaison de l'inscription de l'application après sa création (disponible en cliquant sur Points de terminaison sur la page Présentation).
Sous URI de redirection, entrez votre URL de développement avec en annexe /signin-microsoft. Par exemple : https://localhost:5001/signin-microsoft. Le schéma d'authentification Microsoft configuré ultérieurement dans cet exemple gérera automatiquement les demandes au niveau de la route /signin-microsoft pour implémenter le flux OAuth.
Sélectionnez Inscrire.

Créer un secret client

Dans le volet gauche, sélectionnez Certificats et secrets.
Sous Clés secrètes client, sélectionnez Nouvelle clé secrète client
- Ajoutez une description pour le secret client.
- Sélectionnez le bouton Ajouter.
Sous Clés secrètes client, copiez la valeur de la clé secrète client.

Le segment URI /signin-microsoft est défini comme rappel par défaut du fournisseur d'authentification Microsoft. Vous pouvez modifier l'URI de rappel par défaut lors de la configuration du middleware d'authentification Microsoft via la propriété héritée RemoteAuthenticationOptions.CallbackPath de la classe MicrosoftAccountOptions.

Stocker l'ID client Microsoft et le secret

Stockez les paramètres sensibles tels que l’ID d’application (client) Microsoft qui se trouve dans la page Vue d’ensemble de l’inscription d’application et la Clé secrète client que vous avez créée dans la page Certificats et secrets avec Secret Manager. Pour cet exemple, procédez comme suit :

Initialisez le projet pour le stockage secret en suivant les instructions de Activer le stockage secret.
Stockez les paramètres sensibles dans le magasin secret local avec les clés secrètes Authentication:Microsoft:ClientId et Authentication:Microsoft:ClientSecret :
```
dotnet user-secrets set "Authentication:Microsoft:ClientId" "<client-id>"
dotnet user-secrets set "Authentication:Microsoft:ClientSecret" "<client-secret>"
```

Le séparateur : ne fonctionne pas avec les clés hiérarchiques des variables d’environnement sur toutes les plateformes. Le double trait de soulignement __ est :

Pris en charge par toutes les plateformes. Par exemple, le séparateur : n’est pas pris en charge par Bash, mais __ est pris en charge.
Remplacé automatiquement par :

Configurer l'authentification de compte Microsoft

Ajoutez le service Authentification au Program :

var builder = WebApplication.CreateBuilder(args);
var services = builder.Services;
var configuration = builder.Configuration;

services.AddAuthentication().AddMicrosoftAccount(microsoftOptions =>
    {
        microsoftOptions.ClientId = configuration["Authentication:Microsoft:ClientId"];
        microsoftOptions.ClientSecret = configuration["Authentication:Microsoft:ClientSecret"];
    });

La surcharge AddAuthentication(IServiceCollection, String) définit la propriété DefaultScheme. La surcharge AddAuthentication(IServiceCollection, Action<AuthenticationOptions>) permet de configurer des options d'authentification, qui peuvent être utilisées pour configurer des schémas d'authentification par défaut à des fins différentes. Appels ultérieurs pour AddAuthentication remplacer les propriétés précédemment configurées AuthenticationOptions.

les méthodes d'extension AuthenticationBuilder qui enregistrent un gestionnaire d'authentification ne peuvent être appelées qu'une seule fois par schéma d'authentification. Il existe des surcharges qui permettent de configurer les propriétés du schéma, le nom du schéma et le nom d'affichage.

Pour plus d'informations sur les options de configuration prises en charge par l'authentification de compte Microsoft, consultez la référence de l'API MicrosoftAccountOptions. Cela peut être utilisé pour demander différentes informations sur l'utilisateur.

Exécutez l'application et sélectionnez Se connecter. Une option de connexion avec Microsoft s'affiche.
Sélectionnez pour vous connecter avec Microsoft. Vous êtes redirigé vers Microsoft pour l'authentification. Après vous être connecté avec votre compte Microsoft, vous serez invité à autoriser l'application à accéder à vos informations :
Sélectionnez Oui. Vous êtes redirigé vers le site Web où vous pouvez définir votre adresse e-mail.

Vous êtes maintenant connecté à l'aide de vos informations d'identification Microsoft.

Fournisseurs d’authentification multiple

Lorsque l'application nécessite plusieurs fournisseurs, enchaînez les méthodes d'extension de fournisseur derrière AddAuthentication :

services.AddAuthentication()
    .AddMicrosoftAccount(microsoftOptions => { ... })
    .AddGoogle(googleOptions => { ... })
    .AddTwitter(twitterOptions => { ... })
    .AddFacebook(facebookOptions => { ... });

Transférer les informations sur la demande avec un proxy ou un équilibreur de charge

Si l’application est déployée derrière un serveur proxy ou un équilibreur de charge, certaines informations sur la demande d’origine peuvent être transférées vers l’application dans les en-têtes de demande. Ces informations incluent généralement le schéma de demande sécurisé (https), l’hôte et l’adresse IP du client. Les applications ne lisent pas automatiquement ces en-têtes de demande pour découvrir et d’utiliser les informations sur la demande d’origine.

Le schéma est utilisé dans la génération de lien qui affecte le flux d’authentification dans le cas de fournisseurs externes. En cas de perte du schéma sécurisé (https), l’application génère des URL de redirection incorrectes et non sécurisées.

Utilisez l’intergiciel Forwarded Headers afin de mettre les informations de demande d’origine à la disposition de l’application pour le traitement des demandes.

Pour plus d’informations, consultez l’article Configurer ASP.NET Core pour l’utilisation de serveurs proxy et d’équilibreurs de charge.

Dépannage

Si le fournisseur de compte Microsoft vous redirige vers une page d'erreur de connexion, notez les paramètres de chaîne de requête de titre et de description de l'erreur directement après le (hashtag) # dans l'Uri.

Bien que le message d'erreur semble indiquer un problème d'authentification Microsoft, la cause la plus fréquente est que l'URI de votre application ne correspond à aucun des URI de redirection spécifiés pour la plate-forme Web.
Si Identity n'est pas configuré en appelant services.AddIdentitydans ConfigureServices, une tentative d'authentification entraînera ArgumentException: L'option 'SignInScheme' doit être fournie. Le modèle de projet utilisé dans cet exemple garantit que cela est fait.
Si la base de données du site n'a pas été créée en appliquant la migration initiale, vous obtiendrez l'erreur Une opération de base de données a échoué lors du traitement de la requête. Appuyez sur Appliquer les migrations pour créer la base de données et actualisez pour continuer après l'erreur.

Étapes suivantes

Cet article a montré comment vous pouvez vous authentifier auprès de Microsoft. Vous pouvez suivre une approche similaire pour vous authentifier auprès d'autres fournisseurs répertoriés sur la page précédente.
Une fois que vous avez publié votre site Web sur l'application Web Azure, créez de nouveaux secrets client dans Video Indexer Developer Portal Microsoft.
Définissez les Authentication:Microsoft:ClientId et Authentication:Microsoft:ClientSecret comme paramètres d'application dans le Portail Microsoft Azure. Le système de configuration est configuré pour lire les clés des variables d'environnement.

Cet exemple vous montre comment permettre aux utilisateurs de se connecter avec leur compte Microsoft professionnel, scolaire ou personnel à l'aide du projet ASP.NET Core 3.0 créé à la page précédente.

Créer l'application dans le Video Indexer Developer Portal Microsoft

Ajoutez le package NuGet Microsoft.AspNetCore.Authentication.MicrosoftAccount au projet.
Accédez à la page Azure portal – inscriptions d’applications et créez ou connectez-vous à un compte Microsoft :

Si vous n'avez pas de compte Microsoft, sélectionnez Créer un. Après vous être connecté, vous êtes redirigé vers la page d'inscriptions d’applications :

Sélectionnez Nouvelle inscription.
Saisissez un Nom.
Sélectionnez une option pour Types de compte pris en charge.
- Le package MicrosoftAccount prend en charge les inscriptions d'applications créées à l'aide des options "Comptes dans n'importe quel répertoire organisationnel" ou "Comptes dans n'importe quel répertoire organisationnel et comptes Microsoft" par défaut.
- Pour utiliser d'autres options, définissez AuthorizationEndpoint et TokenEndpoint membres de MicrosoftAccountOptions utilisés pour initialiser l'authentification du compte Microsoft sur les URL affichées sur la page Points de terminaison de l'inscription de l'application après sa création (disponible en cliquant sur Points de terminaison sur la page Présentation).
Sous URI de redirection, entrez votre URL de développement avec en annexe /signin-microsoft. Par exemple : https://localhost:5001/signin-microsoft. Le schéma d'authentification Microsoft configuré ultérieurement dans cet exemple gérera automatiquement les demandes au niveau de la route /signin-microsoft pour implémenter le flux OAuth.
Sélectionnez Inscrire.

Créer un secret client

Dans le volet gauche, sélectionnez Certificats et secrets.
Sous Clés secrètes client, sélectionnez Nouvelle clé secrète client
- Ajoutez une description pour le secret client.
- Sélectionnez le bouton Ajouter.
Sous Clés secrètes client, copiez la valeur de la clé secrète client.

Stocker l'ID client Microsoft et le secret

Initialisez le projet pour le stockage secret en suivant les instructions de Activer le stockage secret.
Stockez les paramètres sensibles dans le magasin secret local avec les clés secrètes Authentication:Microsoft:ClientId et Authentication:Microsoft:ClientSecret :
```
dotnet user-secrets set "Authentication:Microsoft:ClientId" "<client-id>"
dotnet user-secrets set "Authentication:Microsoft:ClientSecret" "<client-secret>"
```

Le séparateur : ne fonctionne pas avec les clés hiérarchiques des variables d’environnement sur toutes les plateformes. Le double trait de soulignement __ est :

Pris en charge par toutes les plateformes. Par exemple, le séparateur : n’est pas pris en charge par Bash, mais __ est pris en charge.
Remplacé automatiquement par :

Configurer l'authentification de compte Microsoft

Ajoutez le service de compte Microsoft au Startup.ConfigureServices :

public void ConfigureServices(IServiceCollection services)
{
    services.AddDbContext<ApplicationDbContext>(options =>
        options.UseSqlServer(
            Configuration.GetConnectionString("DefaultConnection")));
    services.AddDefaultIdentity<IdentityUser>(options => options.SignIn.RequireConfirmedAccount = true)
        .AddEntityFrameworkStores<ApplicationDbContext>();
    services.AddRazorPages();

    services.AddAuthentication().AddMicrosoftAccount(microsoftOptions =>
    {
        microsoftOptions.ClientId = Configuration["Authentication:Microsoft:ClientId"];
        microsoftOptions.ClientSecret = Configuration["Authentication:Microsoft:ClientSecret"];
    });
}

Exécutez l'application et sélectionnez Se connecter. Une option de connexion avec Microsoft s'affiche. Lorsque vous sélectionnez sur Microsoft, vous êtes redirigé vers Microsoft pour l'authentification. Après vous être connecté avec votre compte Microsoft, vous serez invité à autoriser l'application à accéder à vos informations :

Appuyez sur Oui et vous serez redirigé vers le site Web où vous pourrez définir votre adresse e-mail.

Vous êtes maintenant connecté à l'aide de vos informations d'identification Microsoft.

Fournisseurs d’authentification multiple

Lorsque l'application nécessite plusieurs fournisseurs, enchaînez les méthodes d'extension de fournisseur derrière AddAuthentication :

services.AddAuthentication()
    .AddMicrosoftAccount(microsoftOptions => { ... })
    .AddGoogle(googleOptions => { ... })
    .AddTwitter(twitterOptions => { ... })
    .AddFacebook(facebookOptions => { ... });

Transférer les informations sur la demande avec un proxy ou un équilibreur de charge

Utilisez l’intergiciel Forwarded Headers afin de mettre les informations de demande d’origine à la disposition de l’application pour le traitement des demandes.

Pour plus d’informations, consultez l’article Configurer ASP.NET Core pour l’utilisation de serveurs proxy et d’équilibreurs de charge.

Dépannage

Si le fournisseur de compte Microsoft vous redirige vers une page d'erreur de connexion, notez les paramètres de chaîne de requête de titre et de description de l'erreur directement après le (hashtag) # dans l'Uri.

Bien que le message d'erreur semble indiquer un problème d'authentification Microsoft, la cause la plus fréquente est que l'URI de votre application ne correspond à aucun des URI de redirection spécifiés pour la plate-forme Web.
Si Identity n'est pas configuré en appelant services.AddIdentitydans ConfigureServices, une tentative d'authentification entraînera ArgumentException: L'option 'SignInScheme' doit être fournie. Le modèle de projet utilisé dans cet exemple garantit que cela est fait.
Si la base de données du site n'a pas été créée en appliquant la migration initiale, vous obtiendrez l'erreur Une opération de base de données a échoué lors du traitement de la requête. Appuyez sur Appliquer les migrations pour créer la base de données et actualisez pour continuer après l'erreur.

Étapes suivantes

Cet article a montré comment vous pouvez vous authentifier auprès de Microsoft. Vous pouvez suivre une approche similaire pour vous authentifier auprès d'autres fournisseurs répertoriés sur la page précédente.
Une fois que vous avez publié votre site Web sur l'application Web Azure, créez de nouveaux secrets client dans Video Indexer Developer Portal Microsoft.
Définissez les Authentication:Microsoft:ClientId et Authentication:Microsoft:ClientSecret comme paramètres d'application dans le Portail Microsoft Azure. Le système de configuration est configuré pour lire les clés des variables d'environnement.

Partager via

Créer l'application dans le Video Indexer Developer Portal Microsoft

Créer un secret client

Stocker l'ID client Microsoft et le secret

Configurer l'authentification de compte Microsoft

Fournisseurs d’authentification multiple

Transférer les informations sur la demande avec un proxy ou un équilibreur de charge

Dépannage

Étapes suivantes

Créer l'application dans le Video Indexer Developer Portal Microsoft

Créer un secret client

Stocker l'ID client Microsoft et le secret

Configurer l'authentification de compte Microsoft

Fournisseurs d’authentification multiple

Transférer les informations sur la demande avec un proxy ou un équilibreur de charge

Dépannage

Étapes suivantes

Ressources supplémentaires

Partager via

Configuration de la connexion externe du compte Microsoft avec ASP.NET Core

Créer l'application dans le Video Indexer Developer Portal Microsoft

Créer un secret client

Stocker l'ID client Microsoft et le secret

Configurer l'authentification de compte Microsoft

Connectez-vous avec un compte Microsoft

Fournisseurs d’authentification multiple

Transférer les informations sur la demande avec un proxy ou un équilibreur de charge

Dépannage

Étapes suivantes

Créer l'application dans le Video Indexer Developer Portal Microsoft

Créer un secret client

Stocker l'ID client Microsoft et le secret

Configurer l'authentification de compte Microsoft

Connectez-vous avec un compte Microsoft

Fournisseurs d’authentification multiple

Transférer les informations sur la demande avec un proxy ou un équilibreur de charge

Dépannage

Étapes suivantes

Ressources supplémentaires