Configuration de la connexion externe Twitter avec ASP.NET CoreTwitter external sign-in setup with ASP.NET Core

Par Valeriy Novytskyy et Rick AndersonBy Valeriy Novytskyy and Rick Anderson

Cet exemple montre comment permettre aux utilisateurs de se connecter avec leur compte Twitter à l’aide d’un exemple de projet ASP.net Core 2,2 créé sur la page précédente.This sample shows how to enable users to sign in with their Twitter account using a sample ASP.NET Core 2.2 project created on the previous page.

Créer l’application dans TwitterCreate the app in Twitter

  • Accédez à https://apps.twitter.com/ et s’y connecter.Navigate to https://apps.twitter.com/ and sign in. Si vous ne disposez pas déjà d’un compte Twitter, utilisez le lien Inscrivez-vous maintenant pour en créer un.If you don't already have a Twitter account, use the Sign up now link to create one.

  • Appuyez sur créer une nouvelle application et renseignez le nomde l’application, la Description et l’URI du site Web public (cela peut être temporaire jusqu’à ce que vous enregistriez le nom de domaine) :Tap Create New App and fill out the application Name, Description and public Website URI (this can be temporary until you register the domain name):

  • Entrez votre URI de développement /signin-twitter avec ajouté dans le champ URI de redirection OAuth valide (par exemple https://webapp128.azurewebsites.net/signin-twitter:).Enter your development URI with /signin-twitter appended into the Valid OAuth Redirect URIs field (for example: https://webapp128.azurewebsites.net/signin-twitter). Le schéma d’authentification Twitter configuré plus tard dans cet exemple gère automatiquement les /signin-twitter demandes à l’itinéraire pour implémenter le Flow OAuth.The Twitter authentication scheme configured later in this sample will automatically handle requests at /signin-twitter route to implement the OAuth flow.

    Notes

    Le segment /signin-twitter d’URI est défini en tant que rappel par défaut du fournisseur d’authentification Twitter.The URI segment /signin-twitter is set as the default callback of the Twitter authentication provider. Vous pouvez modifier l’URI de rappel par défaut lors de la configuration de l’intergiciel d’authentification Twitter via la propriété héritée RemoteAuthenticationOptions. CallbackPath de la classe TwitterOptions .You can change the default callback URI while configuring the Twitter authentication middleware via the inherited RemoteAuthenticationOptions.CallbackPath property of the TwitterOptions class.

  • Remplissez le reste du formulaire et appuyez sur créer votre application Twitter.Fill out the rest of the form and tap Create your Twitter application. Les détails de la nouvelle application s’affichent :New application details are displayed:

Stockage de la clé et du secret de l’API du consommateur TwitterStoring Twitter Consumer API key and secret

Exécutez les commandes suivantes pour stocker ClientId et ClientSecret utiliser le Gestionnaire de secreten toute sécurité :Run the following commands to securely store ClientId and ClientSecret using Secret Manager:

dotnet user-secrets set Authentication:Twitter:ConsumerAPIKey <Key>
dotnet user-secrets set Authentication:Twitter:ConsumerSecret <Secret>

Liez des paramètres sensibles tels Consumer Key que Consumer Secret Twitter et à la configuration de votre application à l’aide du Gestionnaire de secret.Link sensitive settings like Twitter Consumer Key and Consumer Secret to your application configuration using the Secret Manager. Pour les besoins de cet exemple, nommez les jetons Authentication:Twitter:ConsumerKey et Authentication:Twitter:ConsumerSecret.For the purposes of this sample, name the tokens Authentication:Twitter:ConsumerKey and Authentication:Twitter:ConsumerSecret.

Ces jetons se trouvent sous l’onglet clés et jetons d’accès après la création d’une application Twitter :These tokens can be found on the Keys and Access Tokens tab after creating a new Twitter application:

Configurer l’authentification TwitterConfigure Twitter Authentication

Ajoutez le service Twitter dans la ConfigureServices méthode dans le fichier Startup.cs :Add the Twitter service in the ConfigureServices method in Startup.cs file:

public void ConfigureServices(IServiceCollection services)
{
    services.AddDbContext<ApplicationDbContext>(options =>
        options.UseSqlServer(
            Configuration.GetConnectionString("DefaultConnection")));
    services.AddDefaultIdentity<IdentityUser>()
        .AddDefaultUI(UIFramework.Bootstrap4)
        .AddEntityFrameworkStores<ApplicationDbContext>();

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

    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
}

L’appel à AddDefaultIdentity configure les paramètres de schéma par défaut.The call to AddDefaultIdentity configures the default scheme settings. Le AddAuthentication(String) surcharger définit le DefaultScheme propriété.The AddAuthentication(String) overload sets the DefaultScheme property. Le AddAuthentication (Action<AuthenticationOptions>) surcharge permet de configurer les options d’authentification, qui peuvent être utilisées pour définir des schémas d’authentification par défaut à des fins différentes.The AddAuthentication(Action<AuthenticationOptions>) overload allows configuring authentication options, which can be used to set up default authentication schemes for different purposes. Les appels suivants à AddAuthentication remplacement configuré précédemment AuthenticationOptions propriétés.Subsequent calls to AddAuthentication override previously configured AuthenticationOptions properties.

AuthenticationBuilder les méthodes d’extension qui inscrivent un gestionnaire d’authentification peuvent être appelées uniquement une fois par le schéma d’authentification.AuthenticationBuilder extension methods that register an authentication handler may only be called once per authentication scheme. Il existe des surcharges qui permettent de configurer les propriétés de schéma, le nom du schéma d’et le nom complet.Overloads exist that allow configuring the scheme properties, scheme name, and display name.

Fournisseurs d’authentification multipleMultiple authentication providers

Lorsque l’application nécessite plusieurs fournisseurs, chaînez les méthodes d’extension de fournisseur derrière AddAuthentication :When the app requires multiple providers, chain the provider extension methods behind 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 .See the TwitterOptions API reference for more information on configuration options supported by Twitter authentication. Cela peut être utilisé pour demander différentes informations sur l’utilisateur.This can be used to request different information about the user.

Se connecter avec TwitterSign in with Twitter

Exécutez l’application et sélectionnez se connecter.Run the app and select Log in. Une option permettant de se connecter avec Twitter s’affiche :An option to sign in with Twitter appears:

En cliquant sur Twitter , vous redirigez vers Twitter pour l’authentification :Clicking on Twitter redirects to Twitter for authentication:

Après avoir entré vos informations d’identification Twitter, vous êtes redirigé vers le site Web où vous pouvez définir votre adresse de messagerie.After entering your Twitter credentials, you are redirected back to the web site where you can set your email.

Vous êtes maintenant connecté à l’aide de vos informations d’identification Twitter :You are now logged in using your Twitter credentials:

Transférer les informations sur la demande avec un proxy ou un équilibreur de chargeForward request information with a proxy or load balancer

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.If the app is deployed behind a proxy server or load balancer, some of the original request information might be forwarded to the app in request headers. Ces informations incluent généralement le schéma de demande sécurisé (https), l’hôte et l’adresse IP du client.This information usually includes the secure request scheme (https), host, and client IP address. 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.Apps don't automatically read these request headers to discover and use the original request information.

Le schéma est utilisé dans la génération de lien qui affecte le flux d’authentification dans le cas de fournisseurs externes.The scheme is used in link generation that affects the authentication flow with external providers. 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.Losing the secure scheme (https) results in the app generating incorrect insecure redirect URLs.

Utilisez l’intergiciel Forwarded Headers afin de mettre les informations de demande d’origine à la disposition de l’application pour le traitement des demandes.Use Forwarded Headers Middleware to make the original request information available to the app for request processing.

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

Résolution des problèmesTroubleshooting

  • ASP.NET Core 2. x uniquement : Si l’identité n’est pas services.AddIdentity configurée en appelant dans ConfigureServices, toute tentative d’authentification entraînera l’exception ArgumentException : L’option « SignInScheme » doit être fournie.ASP.NET Core 2.x only: If Identity isn't configured by calling services.AddIdentity in ConfigureServices, attempting to authenticate will result in ArgumentException: The 'SignInScheme' option must be provided. Le modèle de projet utilisé dans cet exemple permet de s’assurer que cette opération est effectuée.The project template used in this sample ensures that this is done.
  • Si la base de données de site n’a pas été créé en appliquant la migration initiale, vous obtiendrez une opération de base de données a échoué lors du traitement de la demande erreur.If the site database has not been created by applying the initial migration, you will get A database operation failed while processing the request error. Appuyez sur appliquer les Migrations pour créer la base de données et actualiser pour passer à l’erreur.Tap Apply Migrations to create the database and refresh to continue past the error.

Étapes suivantesNext steps

  • Cet article vous a montré comment vous pouvez vous authentifier avec Twitter.This article showed how you can authenticate with Twitter. Vous pouvez suivre une approche similaire pour s’authentifier auprès d’autres fournisseurs répertoriés sur le page précédente.You can follow a similar approach to authenticate with other providers listed on the previous page.

  • Une fois que vous publiez votre site Web sur Azure Web App, vous ConsumerSecret devez réinitialiser le dans le portail des développeurs Twitter.Once you publish your web site to Azure web app, you should reset the ConsumerSecret in the Twitter developer portal.

  • Définir le Authentication:Twitter:ConsumerKey et Authentication:Twitter:ConsumerSecret en tant que paramètres d’application dans le portail Azure.Set the Authentication:Twitter:ConsumerKey and Authentication:Twitter:ConsumerSecret as application settings in the Azure portal. Le système de configuration est conçu pour lire les clés à partir de variables d’environnement.The configuration system is set up to read keys from environment variables.