Configuration de la connexion externe Twitter avec ASP.NET Core

Par Valeriy Novytskyy et Rick Anderson

Cet exemple montre comment permettre aux utilisateurs de se connecter avec leur compte Twitter à l’aide de l’exemple de projet ASP.NET Core créé sur la page précédente.

Créer l’application dans Twitter

• Ajoutez le package NuGet Microsoft.AspNetCore.Authentication.MicrosoftAccount au projet.

• Accédez au tableau de bord du portail des développeurs Twitter et connectez-vous. Si vous n’avez pas encore de compte Twitter, utilisez le lien S’inscrire maintenant pour en créer un.

• Si vous n’avez pas de projet, créez-en un.

• Sélectionnez Ajouter. Renseignez le nom de l’application, puis enregistrez la clé API, le secret de clé API et le jeton du porteur générés. Celles-ci seront nécessaires ultérieurement.

• Dans la page Paramètres de l’application, sélectionnez Modifier dans la section Paramètres d’authentification, puis :

  • Activez l’authentification OAuth à 3 branches
  • Demandez l’adresse e-mail des utilisateurs
  • Renseignez les champs obligatoires, puis sélectionnez Enregistrer.

  Remarque

  Microsoft.AspNetCore exigeIdentity que les utilisateurs disposent d’une adresse e-mail par défaut. Pour les URL de rappel pendant le développement, utilisez https://localhost:{PORT}/signin-twitter, où l’espace {PORT} réservé correspond au port de l’application.

  Remarque

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

Stocker la clé et la valeur secrète de l’API consommateur Twitter

Stockez les paramètres sensibles, tels que la clé et la valeur secrète de l’API consommateur Twitter avec le Gestionnaire de secrets. Pour cet exemple, procédez comme suit :

1. Initialisez le projet pour le stockage secret en suivant les instructions dans Activer le stockage secret.

2. Stockez les paramètres sensibles dans le magasin secret local avec les clés secrètes Authentication:Twitter:ConsumerKey et Authentication:Twitter:ConsumerSecret :

   dotnet user-secrets set "Authentication:Twitter:ConsumerAPIKey" "<consumer-api-key>"
   dotnet user-secrets set "Authentication:Twitter:ConsumerSecret" "<consumer-secret>"
   

Le séparateur : ne fonctionne pas avec les clés hiérarchiques des variables d’environnement sur toutes les plateformes. Par exemple, le séparateur : n’est pas pris en charge par Bash. Le double trait de soulignement __ est :

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

Ces jetons se trouvent sous l’onglet Clés et jetons d’accès après la création d’une application Twitter :

Configurer l’authentification Twitter

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

    services.AddAuthentication().AddTwitter(twitterOptions =>
    {
        twitterOptions.ConsumerKey = Configuration["Authentication:Twitter:ConsumerAPIKey"];
        twitterOptions.ConsumerSecret = Configuration["Authentication:Twitter:ConsumerSecret"];
        twitterOptions.RetrieveUserDetails = true;
    });

}

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

services.AddAuthentication().AddTwitter(twitterOptions =>
    {
        twitterOptions.ConsumerKey = configuration["Authentication:Twitter:ConsumerAPIKey"];
        twitterOptions.ConsumerSecret = configuration["Authentication:Twitter:ConsumerSecret"];
    });

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.

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 Twitter, consultez la référence de l’API TwitterOptions. Cela peut être utilisé pour demander différentes informations sur l’utilisateur.

Se connecter avec Twitter

Exécutez l’application et sélectionnez Se connecter. Une option de connexion avec Twitter s’affiche :

La sélection de Twitter redirige vers Twitter pour l’authentification :

Après avoir entré vos informations d’identification Twitter, 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 Twitter :

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

• ASP.NET Core 2.x uniquement : si Identityn’est pas configuré en appelant services.AddIdentity dans 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 la configuration de Identity.
• 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 avec Twitter. 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é votre site web dans l’application web Azure, vous devez réinitialiser le ConsumerSecret dans le portail des développeurs Twitter.

• Définissez Authentication:Twitter:ConsumerKey et Authentication:Twitter:ConsumerSecret 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.