How to add Facebook login?¶
For integrating social login functionalities Sylius uses the HWIOAuthBundle. Here you will find the tutorial for integrating Facebook login into Sylius:
Set up the HWIOAuthBundle¶
- Add HWIOAuthBundle to your project:
composer require hwi/oauth-bundle php-http/httplug-bundle
php-http/httplug-bundle is optional, require this dependency if you don’t want to provide your own services. For more information, please visit Setting up HWIOAuthBundle.
- Enable the bundle:
// config/bundles.php return [ // ... Http\HttplugBundle\HttplugBundle::class => ['all' => true], // If you require the php-http/httplug-bundle package. HWI\Bundle\OAuthBundle\HWIOAuthBundle::class => ['all' => true], ];
- Import the routing:
# config/routes.yaml hwi_oauth_redirect: resource: "@HWIOAuthBundle/Resources/config/routing/redirect.xml" prefix: /connect hwi_oauth_connect: resource: "@HWIOAuthBundle/Resources/config/routing/connect.xml" prefix: /connect hwi_oauth_login: resource: "@HWIOAuthBundle/Resources/config/routing/login.xml" prefix: /login facebook: path: /login/check-facebook
Configure the connection to Facebook¶
To properly connect to Facebook you will need a Facebook developer account.
Having an account create a new app for your website.
In your app dashboard you will have the
client_id (App ID) and the
client_secret (App Secret),
which are needed for the configuration.
# config/packages/hwi_oauth.yaml hwi_oauth: firewall_names: [shop] resource_owners: facebook: type: facebook client_id: <client_id> client_secret: <client_secret> scope: "email"
Sylius uses email as the username, that’s why we choose emails as
scope for this connection.
If you cannot connect to your localhost with the Facebook app, configure its settings in such a way:
- App Domain:
+Add Platformand choose “Website” type.
- Provide the Site URL of the platform - your local server on which you run Sylius:
Alternatively, you could temporarily expose your localhost to be publicly accessible, using a tool like ngrok. Facebook app configuration would be similar to:
- App Domain:
- Site URL
Configure the security layer¶
As Sylius already has a service that implements the OAuthAwareUserProviderInterface -
sylius.oauth.user_provider - we can only
configure the oauth firewall.
security: firewalls: shop: keys in the
security.yaml configure like below:
# config/packages/security.yaml security: firewalls: shop: oauth: resource_owners: facebook: "/login/check-facebook" login_path: sylius_shop_login use_forward: false failure_path: sylius_shop_login oauth_user_provider: service: sylius.oauth.user_provider anonymous: true