Configuration de la connexion externe Google dans ASP.NET Core

Par Valeriy Novytskyy, Rick Anderson et Sharaf Abacery

Ce tutoriel montre comment activer la connexion de l’utilisateur avec des comptes Google à l’aide d’un exemple de projet ASP.NET Core créé à l’aide de fournisseurs de connexion externes avec Identity ASP.NET Core. Suivez les instructions officielles de Google dans La connexion avec Google pour web : configuration pour créer un ID client d’API Google.

Créer l’application dans Google

• Accédez à la page Google API &Services de la plateforme Google Cloud.
• Si aucun projet n’existe, créez un projet en sélectionnant le bouton Créer un projet . Pour sélectionner un projet différent d’un projet existant qui se charge, sélectionnez le bouton du projet chargé dans le coin supérieur gauche de l’interface utilisateur, suivi du projet. Pour ajouter un nouveau projet, sélectionnez le bouton du projet chargé dans le coin supérieur gauche de l’interface utilisateur, suivi du bouton Nouveau projet .
• Lors de la création d’un projet :
  • Entrez un Nom de projet.
  • Si vous le souhaitez, sélectionnez une organisation pour le projet.
  • Cliquez sur le bouton Créer.

Après avoir créé le projet, la page Tableau de bord du projet se charge, où il est possible de configurer le projet.

Ouvrez l’onglet Informations d’identification pour créer le client OAuth.

La configuration requise pour créer les informations d’identification consiste à configurer l’écran de consentement OAuth. Si le consentement n’est pas configuré, il existe une invite pour configurer l’écran de consentement.

• Sélectionnez Configurer l’écran de consentement ou sélectionnez l’écran de consentement OAuth dans la barre latérale.
• Dans l’écran de consentement OAuth, sélectionnez Prise en main.
• Définissez le nom de l’application et l’e-mail de support utilisateur.
• Définissez le type d’audience sur External.
• Ajoutez des informations de contact en entrant une adresse e-mail de contact.
• Acceptez les termes.
• Cliquez sur Créer.

Créez les informations d’identification du client pour l’application en ouvrant l’élément de menu de barre latérale Clients :

• Sélectionnez le bouton Créer un client .
• Sélectionnez l’application web comme type d’application.
• Entrez un nom pour le client.
• Ajoutez un URI de redirection autorisé. Pour les tests locaux, utilisez l’adresse https://localhost:{PORT}/signin-googlepar défaut, où l’espace {PORT} réservé est le port de l’application.
• Sélectionnez le bouton Créer pour créer le client.
• Enregistrez l’ID client et la clé secrète client, qui sont utilisés ultérieurement dans la configuration de l’application ASP.NET.

Remarque

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

Lors du déploiement de l’application, effectuez les opérations suivantes :

• Mettez à jour l’URI de redirection de l’application dans la console Google vers l’URI de redirection déployée 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 et le secret Google

Stockez les paramètres sensibles, tels que l’ID client Google et les valeurs de secret, avec Secret Manager. Pour cet exemple, procédez comme suit :

1. Initialisez le projet pour le stockage secret en fonction des instructions de stockage sécurisé des secrets d’application dans le développement dans ASP.NET Core.

2. Stockez les paramètres sensibles dans le magasin de secrets local avec les clés secrètes Authentication:Google:ClientId (valeur : {CLIENT ID} espace réservé) et Authentication:Google:ClientSecret (valeur : {CLIENT SECRET} espace réservé) :

   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 des clés hiérarchiques de variable d’environnement sur toutes les plateformes. Par exemple, le séparateur : n’est pas pris en charge par Bash. Le trait de soulignement double, __, est :

• Pris en charge par toutes les plateformes.
• Remplacé automatiquement par deux points, :.

Gérer les informations d’identification et l’utilisation de l’API dans la console API.

Configurer l’authentification Google

Ajoutez le service d’authentification au Program fichier :

services.AddAuthentication().AddGoogle(googleOptions =>
{
    googleOptions.ClientId = configuration["Authentication:Google:ClientId"];
    googleOptions.ClientSecret = configuration["Authentication:Google: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. Les appels suivants à AddAuthentication remplacent les propriétés AuthenticationOptions précédemment configurées.

AuthenticationBuilder méthodes d’extension qui inscrivent 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.

Se connecter avec Google

• Exécutez l’application et sélectionnez Se connecter.
• Sous Utiliser un autre service pour vous connecter., sélectionnez Google.
• Le navigateur est redirigé vers Google pour l’authentification.
• Sélectionnez le compte Google pour vous connecter ou entrer des informations d’identification Google.
• Si c’est la première fois que vous vous connectez, vous êtes invité à autoriser l’application à accéder aux informations du compte Google.
• Le navigateur est redirigé vers l’application, où il est possible de définir l’e-mail.

L’utilisateur est maintenant connecté à l’aide des informations d’identification Google.

Dépannage

• Si la connexion ne fonctionne pas sans recevoir d’erreurs, basculez vers le mode de développement pour faciliter le débogage de l’application et de l’inscription Google.
• Si la base de données du site n’a pas été créée en appliquant la migration initiale, l’erreur suivante se produit : une opération de base de données a échoué lors du traitement de la demande. Sélectionnez Appliquer des migrations pour créer la base de données et actualiser la page pour continuer après l’erreur.
• Pour plus d’informations sur une erreur HTTP 500 après l’authentification réussie de la requête par le fournisseur OAuth 2.0, tel que Google, et des informations sur l’implémentation de l’authentification externe avec Google pour React et d’autres applications SPA, consultez Middleware qui ne gère pas l’itinéraire « signin-google » après l’authentification réussie dans Asp.Net Core Web Api External Login Authentication (dotnet/AspNetCore.Docs #14169).

Étapes suivantes

• Cet article illustre l’authentification avec Google. Pour plus d’informations sur l’authentification auprès d’autres fournisseurs externes, consultez Utilisation de fournisseurs de connexion externes avec Identity ASP.NET Core.
• Une fois l’application déployée sur Azure, réinitialisez-la ClientSecret dans la console d’API Google.
• Définissez les Authentication:Google:ClientId paramètres et Authentication:Google:ClientSecret en tant qu’application dans le portail Azure. Le système de configuration est configuré pour lire des clés à partir des variables d’environnement.