Configuration de la connexion externe Google dans ASP.NET Core

Article
11/30/2023

Ce tutoriel vous montre comment permettre aux utilisateurs de se connecter avec leur compte Google à l’aide du projet ASP.NET Core créé sur la page précédente.

Créer l’ID client et le secret Google OAuth 2.0

Suivez les conseils de l’article Intégration de Google Sign-In dans votre application Web (documentation Google).
Accédez à Google API & Services.
Un projet doit exister en premier. Vous devrez peut-être en créer un. Une fois qu’un projet est sélectionné, entrez le tableau de bord.
Dans l’écran de consentement Oauth du tableau de bord :
- Sélectionnez Type d’utilisateur – Externe et Créer.
- Dans la boîte de dialogue Informations sur l’application, indiquez un nom d’application, un e-mail de support utilisateur et les coordonnées du développeur.
- Suivez l’étape Étendues.
- Suivez l’étape Tester les utilisateurs.
- Passez en revue l’écran de consentement OAuth et revenez au tableau de bord de l’application.
Dans l’onglet Informations d’identification du tableau de bord de l’application, sélectionnez CREATE CREDENTIALS (Créer des informations d’identification)>ID client OAuth.
Sélectionnez Application type>Web application, choisissez un nom.
Dans la section URI de redirection autorisés, sélectionnez AJOUTER UN URI pour définir l’URI de redirection. Exemple d’URI de redirection : https://localhost:{PORT}/signin-google, où l’espace réservé {PORT} correspond au port de l’application.
Sélectionnez le bouton CRÉER.
Enregistrez l’ID client et la clé secrète client à utiliser dans la configuration de l’application.
Lors du déploiement du site, soit :
- Mettez à jour l’URI de redirection de l’application dans la console Google vers l’URI de redirection déployé de l’application.
- Créez une inscription d’API Google dans la console Google pour l’application de production avec son URI de redirection de production.

Stocker l’ID client Google et le secret

Stockez les paramètres sensibles tels que l’ID client Google et les valeurs secrètes avec le Gestionnaire de secrets. 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:Google:ClientId et Authentication:Google:ClientSecret :
```
dotnet user-secrets set "Authentication:Google:ClientId" "<client-id>"
dotnet user-secrets set "Authentication:Google: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 :

Vous pouvez gérer vos informations d’identification et votre utilisation de l’API dans la console API.

Configurer l’authentification Google

Ajoutez le package NuGet Microsoft.AspNetCore.Authentication.Google à l’application.

Ajoutez le service Authentification 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()
        .AddGoogle(options =>
        {
            IConfigurationSection googleAuthNSection =
                Configuration.GetSection("Authentication:Google");

            options.ClientId = googleAuthNSection["ClientId"];
            options.ClientSecret = googleAuthNSection["ClientSecret"];
        });
}

Ajoutez le service Authentification au Program :

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

services.AddAuthentication().AddGoogle(googleOptions =>
    {
        googleOptions.ClientId = configuration["Authentication:Google:ClientId"];
        googleOptions.ClientSecret = configuration["Authentication:Google:ClientSecret"];
    });

L’appel à AddIdentity configure les paramètres de schéma par défaut. 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.

Exécutez l’application et sélectionnez Se connecter. Une option de connexion avec Google s’affiche.
Sélectionnez le bouton Google, qui redirige vers Google pour l’authentification.
Après avoir entré vos informations d’identification Google, vous êtes redirigé vers le site Web.

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.

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 => { ... });

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

Modifier l’URI de rappel par défaut

Le segment URI /signin-google est défini comme rappel par défaut du fournisseur d’authentification Google. Vous pouvez modifier l’URI de rappel par défaut lors de la configuration de l’intergiciel d’authentification Google via la propriété RemoteAuthenticationOptions.CallbackPath héritée de la classe GoogleOptions.

Résolution des problèmes

Si la connexion ne fonctionne pas et que vous ne recevez pas d’erreurs, passez en mode développement pour faciliter le débogage du problème.
Si Identity n’est pas configuré en appelant services.AddIdentitydans ConfigureServices, une tentative d’authentification entraîne ArgumentException: L’option « SignInScheme » doit être fournie. Le modèle de projet utilisé dans ce tutoriel garantit que Identity est effectuée.
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. Sélectionnez Appliquer les migrations pour créer la base de données et actualisez pour continuer après l’erreur.
Erreur HTTP 500 après l’authentification réussie de la demande par le fournisseur OAuth 2.0 tel que Google : Consultez ce problème GitHub.
Comment implémenter l’authentification externe avec Google pour React et d’autres applications SPA : consultez ce problème GitHub.

Étapes suivantes

Cet article a montré comment vous pouvez vous authentifier avec Google. Vous pouvez suivre une approche similaire pour vous authentifier avec d’autres fournisseurs, répertoriés sur la page précédente.
Une fois que vous avez publié l’application sur Azure, réinitialisez le ClientSecret dans la console d’API Google.
Définissez Authentication:Google:ClientId et Authentication:Google:ClientSecret comme paramètres d’application dans le Portail Azure. Le système de configuration est configuré pour lire les clés des variables d'environnement.

Partage via

Créer l’ID client et le secret Google OAuth 2.0

Stocker l’ID client Google et le secret

Configurer l’authentification Google

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

Fournisseurs d’authentification multiple

Modifier l’URI de rappel par défaut

Résolution des problèmes

Étapes suivantes

Ressources supplémentaires

Partage via

Configuration de la connexion externe Google dans ASP.NET Core

Créer l’ID client et le secret Google OAuth 2.0

Stocker l’ID client Google et le secret

Configurer l’authentification Google

Se connecter avec Google

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

Fournisseurs d’authentification multiple

Modifier l’URI de rappel par défaut

Résolution des problèmes

Étapes suivantes

Ressources supplémentaires