Integrate Facebook login to an application using Asgardeo

Due to the rapid growth of applications and systems in the world, it has become arduous to create user accounts and mange the credentials separately for each application. Addressing this concern, Social Login has become one of the most widely adopted login options. Social Login is a simple process where the user can select a social network provider. Then the login request will be sent to that provider and once the user identity is confirmed, the user will get access to the application.

Asgardeo is an IDaaS that helps developers implement secure authentication flows to applications in a few simple steps. It provides the capability to integrate social login such as Google, Facebook, GitHub with your applications. In this blog, I will describe how easy it is to integrate Facebook login into your application using Asgardeo. Once it is enabled, the users will be able to log in with their Facebook accounts.

This can be done in the following 3 steps.

  1. Register Asgardeo as an app through the Facebook developer portal
  2. Register Facebook IDP
  3. Enable Facebook login in your application

Each of these steps is described under the below sub topics.

The only prerequisite to completing this guide is to have an Asgardeo account and a Facebook account.

Register Asgardeo as an app through the Facebook developer portal

As the first step, you need to configure Facebook and obtain the client ID and the secret. You can follow the below steps to create an app and obtain those configurations.

  1. Log in to the Facebook developer portal.
  2. Navigate to “My Apps” and click Create App.
  3. Select “Consumer” as the app type and continue.
  4. Then you can provide the display name for your application and create the application.
  5. Then you’ll be directed to a page where you can add products to your app. There, click “Set up” on the Facebook login card.
  6. Then select “Web” as the platform for the app and provide the site URL as https://api.asgardeo.io/t/{organization_name} . Then save the changes and continue.
  7. On the left panel, go to Settings under Facebook Login.

9. Add https://api.asgardeo.io/t/{organization_name}/commonauth as the Valid OAuth Redirect URI.

10. Enable Client OAuth Login and Web OAuth Login and click Save Changes.

11. Now you can obtain the App ID and the App Secret from Settings -> Basic on the main side panel.

Register Facebook IDP

The 2nd step is to register the Facebook IDP in your Asgardeo organization.

  1. On Asgardeo console, navigate to Develop -> Connections.
  2. Click Create Connection and select Facebook.
  3. Enter a unique name for the Facebook IDP, add the app ID and the app secret obtained from Facebook, and click Finish.

Enable Facebook login in your application

Now this is the final step where you can enable Facebook login in your application. If you don’t have an application registered in Asgardeo, you can refer the documentation and configure an application.

  1. On Asgardeo console, navigate to Develop -> Applications.
  2. Select your application and navigate to the Sign-in Method tab.
  3. Click on “Start with default configuration”.
  4. There click on “Add Authentication” and select the Facebook IDP configured before, and click Add.

5. Finally click Update.

Now all the configurations are done. It’s time to test your application login. Access your application URL and click Login. In the Asgardeo login page, “Sign In With Facebook” option should be shown.

With that option, now you can access the application by signing in using an existing Facebook account.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rashmini Naranpanawa

Rashmini Naranpanawa

Software Engineer @WSO2 | Graduate @Department of Computer Science and Engineering, University of Moratuwa