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¶
Note
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.
Tip
If you cannot connect to your localhost with the Facebook app, configure its settings in such a way:
App Domain:
localhost
Click
+Add Platform
and choose “Website” type.Provide the Site URL of the platform - your local server on which you run Sylius:
https://localhost:8000
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:
abcde12345.ngrok.io
Site URL
https://abcde12345.ngrok.io
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.
Under the 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