Angular facebook login example

Facebook is most popular social website and another hand angular is also popular JS framework. Today we are going to learn Angular facebook login example. So let’s get start with the Angular facebook login example

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

Next, Click on Add a New App. The next screen will looks like this

Enter display name and click on the Create App ID

After clicking on the Create App ID the facebook will redirect you to the Select a Scenario screen here choose Integrate Facebook Login option and click on Confirm button. Now you are in the App Dashboard which will looks like this

Here choose the Settings then Basic menu in the left hand side, will open the setting page. Here enter your website url in the App Domain input box then click on the Save Changes

Next, We will dive in the code. To do that we need a new component for the login, I will work on the app.component. so let’s get started

Access Facebook Graph API

We need Facebook sdk to make any interaction with facebook api. Let’s include Facebook Graph API in our project.

Open app.component.ts file and add the below method. You can put this code in your component.ts file

fbLibrary() {

    (window as any).fbAsyncInit = function() {
      window['FB'].init({
        appId      : '869805000070130',
        cookie     : true,
        xfbml      : true,
        version    : 'v3.1'
      });
      window['FB'].AppEvents.logPageView();
    };

    (function(d, s, id){
       var js, fjs = d.getElementsByTagName(s)[0];
       if (d.getElementById(id)) {return;}
       js = d.createElement(s); js.id = id;
       js.src = "https://connect.facebook.net/en_US/sdk.js";
       fjs.parentNode.insertBefore(js, fjs);
     }(document, 'script', 'facebook-jssdk'));

}

Here, change the appId property with your appId

You may noticed that we have declare the fbAsyncInit method, The facebook will called this method when the facebook sdk loaded completely. Under the fbAsyncInit method we have initialized the app

next, call the above method from the ngOnInit method

ngOnInit() {
    this.fbLibrary();
}

Create a facebook login button,

Next, We need a login button which will call facebook login method

Open app.component.html file and put the below html. You can put this html in your component.ts file

<div class="container mt-5">
  <h2>Facebook Login</h2>
  <div class="row mt-5">
    <div class="col-md-4 mt-2 m-auto ">
        <button class="loginBtn loginBtn--facebook" (click)="login()">
            Login with Facebook
          </button>
    </div>    
  </div>
</div>

Facebook Login

Next, We need to create a new method where we will call the facebook login method.

Open app.component.ts file and add the below method. You can put this code in your component.ts file

login() {

    window['FB'].login((response) => {
        console.log('login response',response);
        if (response.authResponse) {

          window['FB'].api('/me', {
            fields: 'last_name, first_name, email'
          }, (userInfo) => {

            console.log("user information");
            console.log(userInfo);
          });
          
        } else {
          console.log('User login failed');
        }
    }, {scope: 'email'});
}

By default facebook return only first_name, last_name and user_id. If you want more user information. You can use the scope parameter

Here is the list of parameter you can pass in the scope

https://developers.facebook.com/docs/facebook-login/permissions

Running application:

Run the application using ng serve --o

Preview

37 Comments

  1. Diving Zenobia said:

    I hope that you won’t stop writing such interesting articles. I’m waiting for more of your content. I’m going to follow you!

    October 3, 2019
    Reply
  2. viagra buy said:

    I needed to create you one little observation just to say thank you as before for these gorgeous knowledge you’ve discussed here. It has been certainly particularly generous of people like you to convey freely all that a lot of people could possibly have made available as an e book to earn some cash for their own end, especially considering the fact that you could possibly have done it if you ever decided. The guidelines also acted like a fantastic way to be sure that other individuals have similar dreams just like my own to grasp a whole lot more in terms of this issue. I’m sure there are many more fun occasions ahead for individuals that go through your blog post. https://gemerekliler.com/

    January 7, 2021
    Reply
  3. propecia without a prescription said:

    I’m commenting to let you be aware of of the amazing discovery my child developed browsing the blog. She came to find a good number of details, including how it is like to have a great coaching character to get a number of people clearly completely grasp a number of advanced issues. You actually did more than her desires. I appreciate you for churning out such beneficial, dependable, edifying and cool guidance on that topic to Emily. https://harrington-service.com/

    January 8, 2021
    Reply
  4. cheap elavil said:

    I enjoy you because of all of your effort on this blog. Ellie enjoys doing internet research and it’s easy to see why. All of us hear all about the compelling manner you create functional ideas by means of the blog and as well cause contribution from other ones about this article and my child is being taught a great deal. Enjoy the remaining portion of the new year. You’re the one carrying out a fantastic job. https://elavilamitriptylines.com/

    January 8, 2021
    Reply
  5. geodon cheap said:

    My husband and i felt absolutely ecstatic Edward could complete his homework from the ideas he discovered from your very own site. It’s not at all simplistic just to be giving for free helpful tips that men and women could have been making money from. And we do know we have the blog owner to appreciate because of that. Most of the explanations you’ve made, the easy blog menu, the friendships you assist to engender – it’s everything excellent, and it’s assisting our son and our family do think that content is brilliant, and that’s extremely fundamental. Many thanks for all the pieces! https://geodonziprasidone.com/

    January 8, 2021
    Reply
  6. endep cheap said:

    I enjoy you because of all of your efforts on this site. Ellie enjoys doing internet research and it’s easy to see why. All of us hear all concerning the compelling manner you deliver functional information by means of the blog and as well cause contribution from other people about this concept plus my daughter is being taught a lot. Enjoy the remaining portion of the new year. You’re the one carrying out a first class job. https://endepamitriptyline.com/

    January 8, 2021
    Reply
  7. pamelor price said:

    I precisely needed to appreciate you once again. I am not sure the things that I might have gone through in the absence of the entire opinions documented by you directly on such a problem. It had been a very frightening difficulty in my circumstances, however , looking at the skilled manner you managed that made me to jump over fulfillment. I am happier for this help and even hope you find out what a great job you are doing instructing others through the use of your site. I know that you have never encountered all of us. https://pamelornortriptyline.com/

    January 8, 2021
    Reply
  8. Devon said:

    Useful info. Fortunate me I found your web site by accident, and I’m surprised
    why this accident did not happened in advance! I bookmarked it.

    my web-site – cheap flights

    January 31, 2021
    Reply
  9. Cecila said:

    I really like reading a post that can make men and women think.
    Also, thanks for permitting me to comment!

    Feel free to visit my blog post cheap flights

    February 1, 2021
    Reply
  10. Colby said:

    bookmarked!!, I love your web site!

    Feel free to visit my homepage :: cheap flights

    February 1, 2021
    Reply
  11. Darrin said:

    I am really enjoying the theme/design of your website.
    Do you ever run into any internet browser compatibility issues?

    A couple of my blog visitors have complained about
    my website not working correctly in Explorer but looks great in Firefox.
    Do you have any recommendations to help fix this problem?

    my website … cheap flights (http://tinyurl.com/)

    February 3, 2021
    Reply
  12. Iesha said:

    An outstanding share! I’ve just forwarded this onto a
    colleague who was doing a little homework on this. And he in fact bought me dinner because I discovered
    it for him… lol. So allow me to reword this….
    Thanks for the meal!! But yeah, thanx for spending the time
    to talk about this subject here on your internet site.

    Feel free to surf to my web page; cheap flights

    February 3, 2021
    Reply
  13. Marcia said:

    It’s a pity you don’t have a donate button! I’d definitely donate to this brilliant blog!
    I suppose for now i’ll settle for bookmarking and adding your RSS feed to my Google account.

    I look forward to fresh updates and will share this
    site with my Facebook group. Talk soon!

    Have a look at my blog – cheap flights (tinyurl.com)

    February 3, 2021
    Reply
  14. Sang said:

    Wonderful beat ! I would like to apprentice whilst you amend
    your site, how can i subscribe for a blog site? The account aided me a
    acceptable deal. I were tiny bit acquainted of this your broadcast offered vibrant
    clear concept

    Feel free to surf to my site cheap flights (http://tinyurl.com/y5oeymgz)

    February 12, 2021
    Reply
  15. Labxguany said:

    cialis commercial why two bathtubs cialis inname cialis regelmäßig

    February 15, 2021
    Reply
  16. JamesDox said:

    http://bio-catalyst.com/ – noroxin for sale
    generic flagyl
    [url=http://bio-catalyst.com/]minocin tablets[/url] buy cephalexin generic

    February 16, 2021
    Reply
  17. Murray Reints said:

    I want to start a website to post merchandise from home. Would a blog be fine? Or are there free sources for creating websites?.

    February 17, 2021
    Reply
  18. Russell Loviska said:

    I want to have a secret blogspot page, but some people I know have been able to find my URL via a Google search…is there a way I can prevent this? I don’t want anyone to be able to realistically find the URL unless I give it to them. . . (Please don’t suggest that I switch to another blog site.) . . Thanks!.

    February 17, 2021
    Reply
  19. Ara said:

    It is appropriate time to make some plans for the future and it is time to be happy.

    I’ve read this post and if I could I wish to suggest you some interesting things or advice.
    Perhaps you can write next articles referring to this article.

    I desire to read more things about it!

    Take a look at my site :: shell download

    February 18, 2021
    Reply
  20. Mai said:

    Wow that was odd. I just wrote an extremely long comment but after I clicked submit my
    comment didn’t show up. Grrrr… well I’m not writing all that
    over again. Regardless, just wanted to say great blog!

    Feel free to surf to my site Instagram takipçi satın alma

    February 18, 2021
    Reply
  21. Cathy said:

    Somebody necessarily help to make significantly posts I’d state.
    This is the first time I frequented your website page and to this point?
    I amazed with the research you made to create this particular submit incredible.
    Excellent activity!

    Here is my webpage; takipci satin al

    February 18, 2021
    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *