Adding Facebook login functionality to Angular2 and .Net Core

Posted by on Feb 21, 2017 in IXD, Scripted Technologies | No Comments

Author: David Hales

I recently was working on my personal blog site, and I wanted to enable users to log into Facebook, in order to access features of my site.

After looking into multiple options, and playing around, I finally decided to use an Angular 2 wrapper around the Facebook Javascript SDK.

I am doing two things. I am allowing users to log in, and I am saving their email and basic profile information. The SDK, can be leveraged to allow you to post to their account, and all sorts of things, and I might later utilize this, but for now I am not.

First thing you need to do is get a Facebook Developer account. To do this, login to Facebook.
Go to https://developers.facebook.com/ and click the register button in the top left corner.

 

Click the Create App ID button to create your first app.

Fill in the data and click Create App ID

create an app ID

After the app is created, it will automatically put you to the Add product page. Click the Get Started button for the Facebook Login section:

product setup on facebook

It will then ask you to choose a platform. Select Web:

choose a platform for your app

Enter your URL, and click Save

tell us about your website

The remainder of the setup for that gives you the Javascript code to access the SDK, but since we are going to do this in angular 2, you can just click continue through the rest of the screens here.

Now click on the settings under the Facebook Login section on the left hand navigation.

facebook login

You will need to enter your website into the Valid OAuth redirect URIs section, or you won’t be able to do OAuth authentication with Facebook. You can enter multiple here, so you can have your local, dev, test and production URL listed.

client OAuth Settings

Click the Save Changes at the bottom of the page.

Up at the top of the page, is your APP ID.

test app

You will need this, in order to access your app from the SDK stuff.

 

So now to your angular app.

I am using an Angular 2 wrapper, that you can install using the following, in your Package Manager Console:

npm install ng2-facebook-rxjs –-save

You will also need to add the Facebook SDK script tag to your page, I put it in the _Layout page in my MVC portion of the project, so it is in the base of my whole site.

<script id="facebook-jssdk" src="//connect.facebook.net/en_US/sdk.js"></script>

I am implementing the Facebook button and logic into my navbar component. I will give the full code for this component, so you can see the usage.

navmenu.component.ts

The import section:

import section

I use the Router for doing a redirect on logout. The UserService is my own service where I save data back to my DB that I get from Facebook.

Set the API ID:

set the API ID

Create the Component:

create the component

The following snippet is the rest of the code for the component.ts file. You have to make sure to pass the services into the constructor, as well as the Router.

I do an initial check against Facebook to see of the user is already logged in. If you are logged in, it gets the latest information from Facebook, and saves it back to the Database using my UserService.

export class

You will want to add a login and logout methods. You can see both below. On logout, I redirect back to the home page, just to make sure you don’t get stranded on some logged in page.

You will see on the login call, I specify the Scope, this.fb.login({ scope: ’email,public_profile’ }), this asks the user for permission to access their email and profile. It does not grant access to post for them, or get access to friends list, etc. You can refer to the Javascript SDK for other options of things to request.

Javascript SDK

You will also see me call this.fb.api(‘/me’, ‘get’, { fields: ‘email, first_name,last_name’ }). This is how to tell the facebook Graph API what fields you want to get. You will also get the ID back from Facebook, which is an ID specific to the user and Facebook App. I then also save this information back to my database using the UserService.

The following is the snippet of how I send the data back to my API(MVC controller that does the save to the database)

User Data

Navmenu.component.html

navmenu.component.html

This is an excerpt from the HTML, where you can see how I am using *ngIf to show or hide buttons based on isLoggedIn which is being set in the .ts file. You can see where I am putting the first name from the object on the screen, as well as I’m changing the Logout or Login button based on the logged in Status.

profile button

Possible Pitfalls:

I ran into an issue along the way, which was the following error:

error TS2304: Cannot find name 'FBUIParams'.

The creator of the wrapper says you can run this, and it should fix the issue:

typings install --global --source=dt --save fbsdk

This did not work for me, but I removed the FBUIParams from the facebook.service.ts file, and the issue was resolved.

 

Author: David Hales

Logo Header Menu