Facebook Login Oauth2 from Angular 6

Image for post
Image for post
Login with Facebook

Logging in with Facebook and other social media platforms has made the life easier for both users and developers.

This blog will help you to develop a basic Angular app to log-in with Facebook. Though, this blog walks you through with writing code in latest version of Angular as of now i.e Angular 6, you can still achieve the same with minute changes using previous versions i.e Angular 2, 4, 5.

Before you start writing code, you need some prerequisites that need your app to integrate with Facebook Login service.

To implement Facebook Login, you need a Facebook App ID, which you can create and retrieve in the App Dashboard.

Start by creating a Facebook App ID to register your app with Facebook at App Dashboard.

Image for post
Image for post
  • Enter your Display Name of your app and Contact Email.
  • Click “Create App ID”.
Image for post
Image for post
  • That’s it!! You have created an APP ID which you can see on the top.
  • Now to integrate Facebook Login, you need to add “Facebook Login” product.
  • Click on “Set Up” button of “Facebook Login” section.
Image for post
Image for post
  • Now select “Web” since you are creating an Angular web application.
Image for post
Image for post
  • Enter your URL of your website. If you are running on your localhost and port 4200, you can add “localhost:4200”. Else change it as per your configuration.
Image for post
Image for post
  • Click “Save”.
  • Now Click “Continue” and repeat the same and just go through the description to understand it.
  • Don’t worry! we will go step by step.

Great!!! Now create a login component in your Application.

  • Import NgOnInit and add the following code to download Facebook SDK on load in your component.ts file.
  • Declare a variable FB after the imports.
  • Now you can access Facebook Graph API by calling Facebook functions or calling graph APIs directly passing the required fields with access token.
  • Add the Html code in your component.html file which is a button which call submitLogin() function.
  • Now let’s define the submitLogin() function in the component.ts file which calls login api “FB.login()”.
  • The function authenticates and returns back success with logged in user’s userid and access code on success.
  • You can write your custom code to redirect to home page or create session, etc on success and error responses based on your requirement.
  • That’s it!!! Try starting your Angular app and click the log in to Facebook button and you can see the Facebook dialog prompting for credentials.
  • On success you can use Facebook Graph APIs to get more Facebook and Instagram info about user passing the access token you have received on successful login response.
  • Now use the Facebook Graph APIs by passing the access token or by using Facebook functions. You can get clear Reference for Facebook Graph APIs HERE.
  • Now you have access to the fields Facebook offers (like user’s name, email, gender, interests, user photos, etc). Check out Graph API Explorer to see the fields you can get about a specific user.
  • That’s IT!! Code On!!!

ERRORS:

  • Just in case if you come across below error while calling your APIs

Error: “(#210) This call requires a Page access token.”

Solution: Check the fields you are trying to access. Some might not have permission.

Good Day!!!

Written by

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