Création sites internet Bassin d'Arcachon - La Teste de Buch - Gujan Mestras - Biganos - Le Teich - Mios - Marcheprime - Audenge - Lanton - Andernos - Arés - Lège Cap Ferret

Symfony 3 : Login avec Facebook connect

Afin de faciliter la connexion des utilisateurs à votre site, et augmenter accessoirement le nombre d’inscrits, il est de plus en plus fréquent d’offrir la possibilité de le faire via le compte Facebook connect, Twitter ou Google+. En effet, tous ces réseaux sociaux permettent d’utiliser leurs api respectives pour se connecter à des sites tiers.

Pour ce faire, il existe un bundle très utilisé sur Symfony une panoplie de services et de fonctionnalités pour arriver à notre fin, il s’agit de HWIOAuthBundle qui supporte actuellement pas moins de 58 services différents:

  • 37signals,
  • Amazon,
  • Asana,
  • Auth0,
  • Azure,
  • Bitbucket,
  • Bitly,
  • Box,
  • BufferApp,
  • Clever,
  • Dailymotion,
  • Deezer,
  • DeviantArt,
  • Discogs,
  • Disqus,
  • Dropbox,
  • EVE Online,
  • Facebook,
  • FI-WARE,
  • Flickr,
  • Foursquare,
  • GitHub,
  • Google,
  • Hubic,
  • Instagram,
  • Itembase,
  • Jawbone,
  • JIRA,
  • LinkedIn,
  • Mail.ru
  • Odnoklassniki,
  • Office365,
  • PayPal,
  • QQ,
  • RunKeeper,
  • Salesforce,
  • Sensio Connect,
  • Sina Weibo,
  • Slack,
  • Soundcloud,
  • Spotify,
  • Stack Exchange,
  • Stereomood,
  • Strava,
  • Toshl,
  • Trakt,
  • Trello,
  • Twitch,
  • Twitter,
  • VKontakte,
  • Windows Live,
  • WordPress,
  • Wunderlist,
  • XING,
  • Yahoo,
  • Yandex,
  • Youtube

Avant de commencer, pour la suite de cet article on suppose que vous avez déjà mis en place une connexion à votre site en utilisant FOSUserBundle (plus de détails github et symfony).

Installation de HWIOAuthBundle

Il suffit de se connecter à la console et de taper la commande suivante :

Une fois le téléchargement terminé, il faut modifier le fichier app/AppKernel.php en ajoutant les lignes

Par la suite, il nous faut importer les routes qui suivent dans le fichier app/config/routing.yml en veillant les importer avant les routes de FOSUserBundle et idéalement avant même vos propres routes, pour éviter les bugs.

Configuration de HWIOAuthBundle

Dans cet article, on va voir uniquement la connexion via Facebook connect, mai sachez pour pour les autres services, le traitement est presque le même.

Commençons par nous connecter à la console développeur de Facebook et commencer par créer une nouvelle application en renseignant le nom d’usage (nom de votre site)

Puis choisir Configurer du produit Facebook Login dans la liste qui s’affiche puis choisir Web comme plateforme de l’app.

Cliquer ensuite sur Paramètres en indiquer dans URI de redirection OAuth valides, l’url qui correspond, dans mon exemple il s’agit de https://www.site.fr/connect/check-facebook, pensez à changer www.site.fr pour le votre.

Attention : Depuis quelques temps, il n’est plus possible d’utiliser une url non sécurisée (https) pour les redirections

Une fois ces informations enregistrées, il faut aller sur les Paramètres (1), puis renseigner une URL pour la politique de confidentialité (2)  (obligatoire lors de la publication de l’application), puis copier les identifiants de l’app et la clé secrète qu’on va utiliser plus tard (3) et (4).

Maintenant nous allons modifier le fichier config.yml pour ajouter la configuration nécéssaire au bon fonctionnement de HWIOAuthBundle.

Puis dans le fichier app/config/services.yml, on ajoute

Nous allons par la suite créer le fichier FOSUBUserProvider indiqué plus haut dans services.yml

Il faut ensuite apporter quelques modifications à notre entité UserBundle/Entity/User.php

La dernière modification va se faire sur le fichier security.yml

Tester le fonctionnement de HWIOAuthBundle

Maintenant qu’on a enfin pu terminer avec la configuration, on va pouvoir tester le bon fonctionnement de la connexion.

Accéder directement à l’url https://www.site.fr/connect (en utilisant votre propre url), vous trouverez un lien Facebook, cliquez dessus, il va vous rediriger pour vous autoriser l’application à se connecter à votre compte.

Voila, il ne vous reste plus maintenant qu’à personnaliser votre formulaire de connexion pour ajouter le bouton Connexion avec Facebook, il y a pleins de tutoriels qui vous proposent ça !

Les commentaires sont fermés.