Programme d’installation de Facebook login externe dans ASP.NET CoreFacebook external login setup in ASP.NET Core

Par Valeriy Novytskyy et Rick AndersonBy Valeriy Novytskyy and Rick Anderson

Ce didacticiel avec des exemples de code montre comment permettre à vos utilisateurs de se connecter avec leur compte Facebook à l’aide d’un exemple de projet ASP.NET Core 2,0 créé sur la page précédente.This tutorial with code examples shows how to enable your users to sign in with their Facebook account using a sample ASP.NET Core 2.0 project created on the previous page. Nous commençons par créer un ID d’application Facebook en suivant le étapes officiels.We start by creating a Facebook App ID by following the official steps.

Créer l’application dans FacebookCreate the app in Facebook

  • Accédez à la développeurs Facebook app page et s’y connecter.Navigate to the Facebook Developers app page and sign in. Si vous ne disposez pas d’un compte Facebook, utilisez le s’inscrire à Facebook sur la page de connexion pour créer un lien.If you don't already have a Facebook account, use the Sign up for Facebook link on the login page to create one.

  • Appuyez sur la ajouter une nouvelle application bouton dans le coin supérieur droit pour créer un ID d’application.Tap the Add a New App button in the upper right corner to create a new App ID.

    Facebook pour le portail des développeurs ouverte dans Microsoft Edge

  • Remplissez le formulaire, puis appuyez sur la Create App ID bouton.Fill out the form and tap the Create App ID button.

    Créer un formulaire de nouvel ID d’application

  • Sur le sélectionner un produit , cliquez sur Set Up sur le connexion Facebook carte.On the Select a product page, click Set Up on the Facebook Login card.

    Page d’installation du produit

  • Le Quickstart Assistant lancera avec choisir une plate-forme en tant que la première page.The Quickstart wizard will launch with Choose a Platform as the first page. Ignorer l’Assistant pour l’instant en cliquant sur le paramètres lien dans le menu de gauche :Bypass the wizard for now by clicking the Settings link in the menu on the left:

    Démarrage rapide de Skip

  • Vous voyez la paramètres du Client OAuth page :You are presented with the Client OAuth Settings page:

    Page Paramètres OAuth du client

  • Entrez votre développement URI avec /signin-facebook ajoutées dans le URI de redirection OAuth valides champ (par exemple : https://localhost:44320/signin-facebook).Enter your development URI with /signin-facebook appended into the Valid OAuth Redirect URIs field (for example: https://localhost:44320/signin-facebook). L’authentification Facebook configurée plus loin dans ce didacticiel gère automatiquement les demandes à /signin-facebook itinéraire pour implémenter le flux OAuth.The Facebook authentication configured later in this tutorial will automatically handle requests at /signin-facebook route to implement the OAuth flow.

Notes

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

  • Cliquez sur enregistrer les modifications.Click Save Changes.

  • Cliquez sur paramètres > base lien dans le volet de navigation gauche.Click Settings > Basic link in the left navigation.

    Dans cette page, prenez note de votre App ID et votre App Secret.On this page, make a note of your App ID and your App Secret. Vous allez ajouter à la fois dans votre application ASP.NET Core dans la section suivante :You will add both into your ASP.NET Core application in the next section:

  • Lorsque vous déployez le site dont vous avez besoin de revenir sur le connexion Facebook page d’installation et inscrire un nouvel URI public.When deploying the site you need to revisit the Facebook Login setup page and register a new public URI.

ID d’application de Store Facebook et Secret d’applicationStore Facebook App ID and App Secret

Lier des paramètres sensibles comme Facebook App ID et App Secret à votre configuration d’application en utilisant le Secret Manager.Link sensitive settings like Facebook App ID and App Secret to your application configuration using the Secret Manager. Dans le cadre de ce didacticiel, nommez les jetons Authentication:Facebook:AppId et Authentication:Facebook:AppSecret.For the purposes of this tutorial, name the tokens Authentication:Facebook:AppId and Authentication:Facebook:AppSecret.

Quand vous utilisez des clés hiérarchiques dans des variables d’environnement, le séparateur deux-points (:) risque de ne pas fonctionner sur toutes les plateformes (par exemple, Bash).When working with hierarchical keys in environment variables, a colon separator (:) may not work on all platforms (for example, Bash). Un trait de soulignement double (__) est pris en charge par toutes les plateformes et automatiquement remplacé par un signe deux-points.A double underscore (__) is supported by all platforms and is automatically replaced by a colon.

Exécutez les commandes suivantes à stocker en toute sécurité App ID et App Secret à l’aide de Secret Manager :Execute the following commands to securely store App ID and App Secret using Secret Manager:

dotnet user-secrets set Authentication:Facebook:AppId <app-id>
dotnet user-secrets set Authentication:Facebook:AppSecret <app-secret>

Configurer l’authentification FacebookConfigure Facebook Authentication

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

services.AddDefaultIdentity<IdentityUser>()
        .AddDefaultUI(UIFramework.Bootstrap4)
        .AddEntityFrameworkStores<ApplicationDbContext>();

services.AddAuthentication().AddFacebook(facebookOptions =>
{
    facebookOptions.AppId = Configuration["Authentication:Facebook:AppId"];
    facebookOptions.AppSecret = Configuration["Authentication:Facebook:AppSecret"];
});

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

Installer le Microsoft.AspNetCore.Authentication.Facebook package.Install the Microsoft.AspNetCore.Authentication.Facebook package.

  • Pour installer ce package avec Visual Studio 2017, cliquez sur le projet, puis sélectionnez gérer les Packages NuGet.To install this package with Visual Studio 2017, right-click on the project and select Manage NuGet Packages.

  • Pour installer avec l’interface CLI .NET Core, exécutez le code suivant dans votre répertoire de projet :To install with .NET Core CLI, execute the following in your project directory:

    dotnet add package Microsoft.AspNetCore.Authentication.Facebook

Ajoutez l’intergiciel (middleware) Facebook dans le Configure méthode dans Startup.cs fichier :Add the Facebook middleware in the Configure method in Startup.cs file:

app.UseFacebookAuthentication(new FacebookOptions()
{
    AppId = Configuration["Authentication:Facebook:AppId"],
    AppSecret = Configuration["Authentication:Facebook:AppSecret"]
});

Consultez le FacebookOptions référence des API pour plus d’informations sur les options de configuration prises en charge par l’authentification Facebook.See the FacebookOptions API reference for more information on configuration options supported by Facebook authentication. Options de configuration peuvent être utilisées pour :Configuration options can be used to:

  • Demander différentes informations sur l’utilisateur.Request different information about the user.
  • Ajouter des arguments de chaîne de requête pour personnaliser l’expérience de connexion.Add query string arguments to customize the login experience.

Se connecter avec FacebookSign in with Facebook

Exécutez votre application et cliquez sur connectez-vous.Run your application and click Log in. Vous voyez une option pour vous connecter avec Facebook.You see an option to sign in with Facebook.

Application Web : Utilisateur non authentifié

Lorsque vous cliquez sur Facebook, vous êtes redirigé vers Facebook pour l’authentification :When you click on Facebook, you are redirected to Facebook for authentication:

Page d’authentification Facebook

Les demandes d’authentification de Facebook publique profil et adresse de messagerie par défaut :Facebook authentication requests public profile and email address by default:

Écran de consentement de page de l’authentification Facebook

Une fois que vous entrez vos informations d’identification Facebook, vous êtes redirigé vers votre site où vous pouvez définir votre adresse de messagerie.Once you enter your Facebook credentials you are redirected back to your site where you can set your email.

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

Application Web : Utilisateur authentifié

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 ce didacticiel permet de s’assurer que cela est fait.The project template used in this tutorial ensures that this is done.
  • Si la base de données de site n’a pas été créé en appliquant la migration initiale, vous obtenez 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 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

  • Ajoutez le package NuGet Microsoft. AspNetCore. Authentication. Facebook à votre projet pour les scénarios d’authentification Facebook avancés.Add the Microsoft.AspNetCore.Authentication.Facebook NuGet package to your project for advanced Facebook authentication scenarios. Ce package n’est pas nécessaire pour intégrer la fonctionnalité de connexion externe Facebook à votre application.This package isn't required to integrate Facebook external login functionality with your app.

  • Cet article vous a montré comment vous pouvez vous authentifier avec Facebook.This article showed how you can authenticate with Facebook. 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 à l’application web Azure, vous devez réinitialiser le AppSecret dans le portail des développeurs Facebook.Once you publish your web site to Azure web app, you should reset the AppSecret in the Facebook developer portal.

  • Définir le Authentication:Facebook:AppId et Authentication:Facebook:AppSecret en tant que paramètres d’application dans le portail Azure.Set the Authentication:Facebook:AppId and Authentication:Facebook:AppSecret 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.