Facebook SSO.docx
- 1. Facebook SSO Integration with Mendix This blog will explain about social login benefits and how we can implement Sign In using Facebook on our Mendix app. There are more than 1 million websites or apps are using "SignIn with Facebook" or "Login with Facebook". Do you know why they are using Facebook login and how it is beneficial in conversion? According to multiple surveys, there are more than 3 billion users worldwide are using social media and it is around 50% of the world's population.
- 2. The biggest challenge and most important things are to make user registration and login quick and easy while developing our application. The registration forms required a lot of data that need to be filled by users manually and it causes lost, potential users. Additionally, users need to enter their usernames/emails and passwords in the login forms to authenticate themselves and also need to remember more individual IDs and passwords. Social Login allows customers to bring their existing social identities and use them to register and log in without creating a new profile explicitly. Facebook is the most favourite social media provider in comparison to other social media providers and the number of active Facebook users growing day by day.
- 3. In this blog, I will explain how you can implement “Log in with Facebook” on your Mendix Application or mobile app in a very easy manner. Facebook work on the OAuth 2.0 protocol and most of the social providers like Facebook, Google, Microsoft, LinkedIn are supporting OAuth 2.0. What do we need? Check that you have everything you need before we begin. Make sure your Facebook cloud platform account has been created. Additionally, your Mendix App has to include a few marketplace modules: Community Commons Encryption Nanoflow Commons OIDC Module Getting started Create Your Facebook Login App Here you can find the complete step by step guide to create your Facebook Login App. Step 1 Go to Facebook Developer and log in using your Facebook credentials.
- 4. NOTE: Please do not log in using a business account as Facebook will not allow you to create an app if you do so. Step 2 Select the My Apps as displayed on the below screen.
- 5. Step 3 Click on Add a New App as displayed in the below screen.
- 6. Step 4 Input display name and contact email. Once you have done so, click on Create App ID
- 7. Step 5 In the security check, Complete the security steps and click on the submit button.
- 8. Step 6 Once you land on the App dashboard, Select Facebook Login, and click Set Up.
- 9. Step 7 Click on Settings in the sidebar under Facebook Login. Turn on Client OAuth Login. Turn on Web OAuth Login. Put the valid redirect URL on "Valid OAuth redirect URIs". Click on the Save button.
- 11. Step 8 Click on Basic under settings in the sidebar. Under App, Domains include your website Url. Enter all the required details. Change the status of the app from Development to Live from the top-right corner. Click on the Save Changes button. Note down the App-id and App secret. Now your Facebook app is ready. You can start implementing Facebook login
- 12. Data Selection When a user logs into your website or app via Facebook Login, you can access the user's data stored on Facebook. Facebook only allows the basic profile data permissions for a new Facebook app. To get more data according to your business requirement, you need to enable additional permissions on your Facebook app. Facebook is supporting around 42 permissions. You need to choose user data that you want to collect from Facebook. Submit Your Facebook Login App for Review To grab more than basic profile data points or asking for additional permissions from your users, your Facebook apps go through the review process. Sometimes businesses require some additional permissions on the Facebook app and for that, you need to submit your Facebook app for approval before starting to ask for additional information. The Facebook app review process is pretty much simple, Please refer to this document here for the Facebook App Review Process. Let’s come back to the Mendix In Studio Pro Now for the Mendix section of this build! In order to ensure anonymous user’s can access the required pages, we need to ensure our app is configured to have security on and also to allow anonymous user’s access. For this we will need a Guest user role which we can select as the anonymous user.
- 14. Also make sure your Guest user role is assigned to the OIDC module as the Anonymous module role, as well as the Admin needs to be assigned the Administrator user role for the same OIDC module. We must also enable the user to access the sign-in page now that security and user roles have been configured. Add a role-based home page for guests in your projects' Navigation. You may do this by choosing the OIDC module's "OIDC.Login Web Button" page. Additionally, provide a role based home page for the User.
- 15. Add a page OIDC_Client_Overview and make sure Admin have access to it.
- 16. Run your app locally, and login as a admin. Navigate to the OIDC Client Overview page. Click on new to create a new config. Fill in the Alias as Facebook (You can use any name for your reference). Enter your client ID and set the status too Active. Most importantly, you need to add the automatic config URL for google (https://www.facebook.com/.well-known/openid-configuration) and click “Import configuration”. This will automatically populate the few fields.
- 17. If it’s hard to zoom into the input fields. Find it here. Alias Name: Facebook Client ID: {Your client id} Client Assertion: Client I D and Secret Active: Yes Use PKCE: Yes
- 18. Endpoint URLs Automatic configuration URL: https://www.facebook.com/.well-known/openid-configuration Authorization endpoint: https://www.facebook.com/dialog/oauth Token endpoint: https://graph.facebook.com/v2.8/oauth/access_token User info endpoint: https://graph.facebook.com/v14.0/oauth/access_token?me?fields=id,name,birthday,email JWKS uri: https://www.facebook.com/.well-known/oauth/openid/jwks/ Issuer: https://www.facebook.com Custom call-back URL: https://contentmanagement103-sandbox.mxapps.io/oauth/v2/callback
- 19. Testing the login When a guest user lands on your site, they will now see the following page, the user should click “Log in via SSO” Next, they will see this screen which prompts the user to select the google account they would like to login with.
- 21. If you configuration is successful, the user should land on the home page as an authenticated user. In order to be sure this setup was working I added a data view to the home page which returns the logged in user’s account, and I displayed the $Account/Full Name attribute using a label.