Angular 4 and Ionic 3 : build facebook login – Part 1

 

In this article, I am going to explain how to build simple login screen using Angular 4 and Ionic 3, actually, I planned to publish a single  article on Facebook authentication but, due to length of the post I divided this into two parts in this part I am going to explain how to create simple login screen and my next part covers how to integrate Facebook authentication with hybrid application

Step 1: Setting up local environment

The first thing which I am going to do is set up a local environment for Ionic by running below commands the pre-requisites for this you must install node.js 6+ version in your local environment you can install node.js by downloading node installer 

Once the node.js installed just run below commands for Ionic and Cordova modules

Step 2: Creating new project

You can create new project by running below commands, the start command creates a new project called “ionic-facebook-login” using sidemenu template, if you don’t specify any template type then it takes tabs template as a default template, you can specify template type after the project name, the template type could be tabs,  sidemenu, blank or tutorials

Now, run below command to test ionic app, this command launches ionic app in the browser using 8100 port number  ex: http://localhost:8100/

Step 3: Creating Ionic Page

Create Ionic page to display user related information once the authentication is successful, here I am going to create new page called myprofile by running below Ionic command

A new myprofile page will be created under page folder just open myprofile.ts file and add below code

Step 4: Pass user information from home page to myprofile

There is an event handler called login() which will invoke on click of Facebook login button, in the login method I am redirecting to myprofile page by passing first name and gender details but in part two, these information will fetch from your facebook profile

Step 5: Applying themes

The first thing is applying some colors at globally those are background-color, text-color etc… for those I have edited variable.scss file which is under theme folder and added below styles

To apply some nice font family to the heading,  I am using Google fonts which are directly loaded on the index.html page

Now, open home.scss file which is under home page folder and add below styles

Step 6: Home Page Screen

Finally, open home.html file and add below code, I am using ion-icon to add facebook logo just before the login button

Now, run Ionic serve command and check output, the home page should render something like below

angular4-ionic3-hybrid-app

Step 7: MyProfile Page Screen

Now,  go to myprofile.html file which is under myprofile page folder and add below content

The myprofile page should render something like below

angular4-ionic3-hybrid-app

In my next article, I am going integrate this with facebook login using cordova-native plugin

Download Code