Enable Facebook Login in Orchard Core CMS

4 minutes to read

Orchard Core CMS allows you to create a new user with Facebook Login. Here is the step by step to enable Facebook Login in Orchard Core CMS website.

Create a new Facebook App

Go to https://developers.facebook.com/apps/.
Create a new Facebook App with your personal information.
After a Facebook App has been created, add a new product, select Facebook Login.
Then click Settings of Facebook Login product.
Verify if Client OAuth login and Web OAuth login are turned on
Set callback URL to https://your-domain.com/signin-facebook e.g. https://www.orchardexample.com/signin-facebook
Click Save Changes button to save your settings.
Go to the main Settings of Facebook App and click Basic.
Set App domain, Privacy Policy and Category.
More information of how to create Facebook App, please refer to following links.
- https://www.loginradius.com/blog/engineering/login-with-facebook/
- https://docs.microsoft.com/en-us/aspnet/core/security/authentication/social/facebook-logins

Go to your Orchard Core CMS website and log in to admin site.
Go to Configuration > Features > Enable Facebook Login (Id: OrchardCore.Facebook) module. This will also enable Facebook module which Facebook Login module depends on.
Go to Configuration > Settings > Facebook App
Enter Facebook's APP Id and Secret Id that we can copy from Basic settings section of your Facebook App.

We can control how a user can register with Facebook log in by enabling "User Registration" module
In admin site, go to Configuration > Features > enable Users Registration module.
Go to Security > Settings > User Registration and configure these settings:
- Please note that we want to simplify our setup so we disable some strict rules.
- Set Configure users registration to AllowOnlyExternalUsers to let a user can register with Facebook Login only.
- Uncheck Users must verify their email address to by pass verifying email address.
- Uncheck Users must be approved before they can log in to allow user can log in without click activation link.
- Check Use site theme for registration page to use the same theme for registration page.
- Check Use a script to generate userName based on external provider claims
- Set the following code to generate a username from Facebook user's first name.
```
log('Information', JSON.stringify(context));
context.userName = context.externalClaims.find(
  c => c.type.includes('givenname')
).value.toLowerCase();
```
- Code reference for a custom script to set a username.
Check Do not ask username.
Check Do not ask email address.
Check Do not create local password for external users.

If your website runs under a proxy server, you may get incorrect generated callback URL. Therefor, you need to enable Reverse Proxy Configuration module.
Go to Configuration > Settings > Reverse Proxy >.
Enable these settings:
- Enables the forwarding of the HTTP header X-Forwarded-For
- Enables the forwarding of the HTTP header X-Forwarded-Proto
- Enables the forwarding of the HTTP header X-Forwarded-Hos
More information about how to fix an incorrect callback URL for a website that runs under a proxy server.

Loading comments...