Connexion à l’utilisation de sites externes dans un site pages Web ASP.NET (Razor)

par Tom FitzMacken

Cet article explique comment se connecter à votre site pages Web ASP.NET (Razor) à l’aide de Facebook, Google, Twitter, Yahoo et d’autres sites, c’est-à-dire comment prendre en charge OAuth et OpenID dans votre site.

Ce que vous allez apprendre :

• Comment activer la connexion à partir d’autres sites lorsque vous utilisez le modèle Site de démarrage WebMatrix.

Il s’agit de la ASP.NET fonctionnalité introduite dans l’article :

• L’assistance OAuthWebSecurity .

Versions logicielles utilisées dans le tutoriel

• pages Web ASP.NET (Razor) 2
• WebMatrix 3

pages Web ASP.NET inclut la prise en charge des fournisseurs OAuth et OpenID. À l’aide de ces fournisseurs, vous pouvez permettre aux utilisateurs de se connecter à votre site à l’aide de leurs informations d’identification existantes de Facebook, Twitter, Microsoft et Google. Par exemple, pour se connecter à l’aide d’un compte Facebook, les utilisateurs peuvent simplement choisir une icône Facebook, qui les redirige vers la page de connexion Facebook où ils entrent leurs informations d’utilisateur. Ils peuvent ensuite associer la connexion Facebook à leur compte sur votre site. Une amélioration associée aux fonctionnalités d’appartenance aux pages web est que les utilisateurs peuvent associer plusieurs connexions (y compris les connexions à partir de sites de réseaux sociaux) à un seul compte sur votre site web.

Cette image montre la page Connexion à partir du modèle de site de démarrage , où un utilisateur peut choisir une icône Facebook, Twitter, Google ou Microsoft pour activer la connexion avec un compte externe :

Vous pouvez activer l’appartenance À OAuth et OpenID en supprimant les marques de commentaire de quelques lignes de code dans le modèle Site de démarrage . Les méthodes et propriétés que vous utilisez pour travailler avec les fournisseurs OAuth et OpenID font partie de la WebMatrix.Security.OAuthWebSecurity classe . Le modèle Site de démarrage comprend une infrastructure d’appartenance complète, avec une page de connexion, une base de données d’appartenance et tout le code dont vous avez besoin pour permettre aux utilisateurs de se connecter à votre site à l’aide d’informations d’identification locales ou de celles d’un autre site.

Cette section fournit un exemple de la façon de permettre aux utilisateurs de se connecter à partir de sites externes à un site basé sur le modèle Site de démarrage . Après avoir créé un site de démarrage, procédez comme suit (plus d’informations sont les suivantes) :

• Pour les sites qui utilisent un fournisseur OAuth (Facebook, Twitter et Microsoft), vous créez une application sur le site externe. Cela vous donne les clés d’application dont vous aurez besoin pour appeler la fonctionnalité de connexion pour ces sites.

• Pour les sites qui utilisent un fournisseur OpenID (Google), vous n’avez pas besoin de créer une application. Pour tous ces sites, vous devez disposer d’un compte pour vous connecter et créer des applications de développement.

  Notes

  Les applications Microsoft acceptent uniquement une URL active pour un site web de travail. Vous ne pouvez donc pas utiliser une URL de site web local pour tester les connexions.

• Modifiez quelques fichiers dans votre site web afin de spécifier le fournisseur d’authentification approprié et d’envoyer une connexion au site que vous souhaitez utiliser.

Cet article fournit des instructions distinctes pour les tâches suivantes :

• Activation des connexions Google
• Activation des connexions Facebook
• Activation des connexions Twitter

Activation des connexions Google

1. Créez ou ouvrez un site pages Web ASP.NET basé sur le modèle Site de démarrage WebMatrix.

2. Ouvrez la page _AppStart.cshtml et supprimez les marques de commentaire de la ligne de code suivante.

   OAuthWebSecurity.RegisterGoogleClient();
   

Test de la connexion Google

1. Exécutez la page default.cshtml de votre site et choisissez le bouton Se connecter .

2. Dans la page Connexion , dans la section Utiliser un autre service pour vous connecter , choisissez le bouton Envoyer Google ou Yahoo . Cet exemple utilise la connexion Google.

   La page web redirige la demande vers la page de connexion Google.

   

3. Entrez les informations d’identification d’un compte Google existant.

4. Si Google vous demande si vous souhaitez autoriser Localhost à utiliser les informations du compte, cliquez sur Autoriser.

   Le code utilise le jeton Google pour authentifier l’utilisateur, puis retourne à cette page sur votre site web. Cette page permet aux utilisateurs d’associer leur connexion Google à un compte existant sur votre site web ou d’inscrire un nouveau compte sur votre site pour associer la connexion externe.

   

5. Choisissez le bouton Associer . Le navigateur retourne à la page d’accueil de votre application.

Activation des connexions Facebook

1. Accédez au site des développeurs Facebook (connectez-vous si vous n’êtes pas déjà connecté).

2. Choisissez le bouton Créer une application , puis suivez les invites pour nommer et créer l’application.

3. Dans la section Sélectionner la façon dont votre application s’intégrera à Facebook, choisissez la section Site web .

4. Renseignez le champ URL du site avec l’URL de votre site (par exemple, http://www.example.com). Le champ Domaine est facultatif ; vous pouvez l’utiliser pour fournir l’authentification pour un domaine entier (par exemple , example.com).

   Notes

   Si vous exécutez un site sur votre ordinateur local avec une URL telle que http://localhost:12345 (où le numéro est un numéro de port local), vous pouvez ajouter cette valeur au champ URL du site pour tester votre site. Toutefois, chaque fois que le numéro de port de votre site local change, vous devez mettre à jour le champ URL du site de votre application.

5. Choisissez le bouton Enregistrer les modifications .

6. Choisissez à nouveau l’onglet Applications , puis affichez la page de démarrage de votre application.

7. Copiez les valeurs ID d’application et Secret d’application pour votre application et collez-les dans un fichier texte temporaire. Vous passerez ces valeurs au fournisseur Facebook dans le code de votre site web.

8. Quittez le site des développeurs Facebook.

Vous apportez maintenant des modifications à deux pages de votre site web afin que les utilisateurs puissent se connecter au site à l’aide de leur compte Facebook.

1. Créez ou ouvrez un site pages Web ASP.NET basé sur le modèle Site de démarrage WebMatrix.

2. Ouvrez la page _AppStart.cshtml et supprimez les marques de commentaire du code du fournisseur OAuth Facebook. Le bloc de code sans commentaire ressemble à ce qui suit :

   OAuthWebSecurity.RegisterFacebookClient(
           appId: "",
           appSecret: "");
   

3. Copiez la valeur de l’ID d’application de l’application Facebook comme valeur du appId paramètre (entre guillemets).

4. Copiez la valeur du secret d’application de l’application Facebook en tant que valeur de appSecret paramètre.

5. Enregistrez et fermez le fichier.

Test de la connexion Facebook

1. Exécutez la page default.cshtml du site et choisissez le bouton Connexion .

2. Dans la page Connexion , dans la section Utiliser un autre service pour se connecter , choisissez l’icône Facebook .

   La page web redirige la demande vers la page de connexion Facebook.

   

3. Connectez-vous à un compte Facebook.

   Le code utilise le jeton Facebook pour vous authentifier, puis retourne à une page dans laquelle vous pouvez associer votre connexion Facebook à la connexion de votre site. Votre nom d’utilisateur ou votre adresse e-mail est renseigné dans le champ Email du formulaire.

   

4. Choisissez le bouton Associer .

   Le navigateur retourne à la page d’accueil et vous êtes connecté.

Activation des connexions Twitter

1. Accédez au site des développeurs Twitter.

2. Choisissez le lien Créer une application , puis connectez-vous au site.

3. Dans le formulaire Créer une application , renseignez les champs Nom et Description .

4. Dans le champ Site web , entrez l’URL de votre site (par exemple, http://www.example.com).

   Notes

   Si vous testez votre site localement (à l’aide d’une URL telle que http://localhost:12345), Twitter risque de ne pas accepter l’URL. Toutefois, vous pouvez peut-être utiliser l’adresse IP de bouclage local (par exemple http://127.0.0.1:12345). Cela simplifie le processus de test de votre application localement. Toutefois, chaque fois que le numéro de port de votre site local change, vous devez mettre à jour le champ WebSite de votre application.

5. Dans le champ URL de rappel , entrez une URL pour la page de votre site web que vous souhaitez que les utilisateurs retournent après s’être connectés à Twitter. Par exemple, pour envoyer des utilisateurs à la page d’accueil du site de démarrage (qui reconnaîtra leur status connecté), entrez la même URL que celle que vous avez entrée dans le champ Site web.

6. Acceptez les termes et choisissez le bouton Créer votre application Twitter .

7. Dans la page d’accueil Mes applications , choisissez l’application que vous avez créée.

8. Sous l’onglet Détails , faites défiler jusqu’en bas et choisissez le bouton Créer mon jeton d’accès .

9. Sous l’onglet Détails , copiez les valeurs Clé du consommateur et Secret consommateur pour votre application et collez-les dans un fichier texte temporaire. Vous passerez ces valeurs au fournisseur Twitter dans le code de votre site web.

10. Quittez le site Twitter.

Vous apportez maintenant des modifications à deux pages de votre site web afin que les utilisateurs puissent se connecter au site à l’aide de leur compte Twitter.

1. Créez ou ouvrez un site pages Web ASP.NET basé sur le modèle Site de démarrage WebMatrix.

2. Ouvrez la page _AppStart.cshtml et supprimez les marques de commentaire du code du fournisseur OAuth Twitter. Le bloc de code sans commentaire ressemble à ceci :

   OAuthWebSecurity.RegisterTwitterClient(
           consumerKey: "",
           consumerSecret: "");
   

3. Copiez la valeur clé du consommateur à partir de l’application Twitter comme valeur du consumerKey paramètre (entre guillemets).

4. Copiez la valeur Consumer Secret de l’application Twitter comme valeur du consumerSecret paramètre.

5. Enregistrez et fermez le fichier.

Test de la connexion Twitter

1. Exécutez la page default.cshtml de votre site et choisissez le bouton Connexion .

2. Dans la page Connexion , dans la section Utiliser un autre service pour se connecter , choisissez l’icône Twitter .

   La page web redirige la demande vers une page de connexion Twitter pour l’application que vous avez créée.

   

3. Connectez-vous à un compte Twitter.

4. Le code utilise le jeton Twitter pour authentifier l’utilisateur, puis vous renvoie à une page dans laquelle vous pouvez associer votre connexion à votre compte de site web. Votre nom ou votre adresse e-mail est renseigné dans le champ Email du formulaire.

   

5. Choisissez le bouton Associer .

   Le navigateur retourne à la page d’accueil et vous êtes connecté.

Ressources supplémentaires

• Personnalisation du comportement à l’échelle du site
• Ajout de la sécurité et de l’appartenance à un site pages Web ASP.NET