Login with Facebook

This video tutorial shows how to log in with Facebook on the ionic mobile app. Login with facebook on the android mobile app step by step.

Create blank project

$ ionic start MyIonicProject blank --type=ionic-angular

Then goto MyIonicProject folder and add platform

$ ionic cordova platform add android

Open config.xml and copy package name

<widget id="com.ionic.fblogin" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

First goto https://developers.facebook.com  

and create project 

Go to java bin folder

/Library/Java/JavaVirtualMachines/jdk1.8.0_121.jdk/Contents/Home/bin

then run below command with admin access according your release and debug keystores path and alias-name

$ keytool -exportcert -alias androiddebugkey -keystore <your-keystore-parh> | openssl sha1 -binary | openssl base64

Now project has been done. copy APP ID and move to our project

Run below command according your APP ID and APP NAME

$ ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="123456789" --variable APP_NAME="myApplication"

install npm package

$ npm install --save @ionic-native/facebook@4

Edit home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Facebook, FacebookLoginResponse } from '@ionic-native/facebook';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController,
public fb: Facebook) { }
login() {
this.fb.login(['public_profile', 'user_friends', 'email'])
.then((res: FacebookLoginResponse) =>
// console.log('Logged into Facebook!', res)
alert(JSON.stringify(res))
)
.catch(e => console.log('Error logging into Facebook', e));
}
}

Edit home.html

<ion-header>
<ion-navbar>
<ion-title>FB Login</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<buttonion-buttoncolor="secondary"(click)="login()">FB login</button>
</ion-content>

Edit app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { Facebook } from '@ionic-native/facebook';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
Facebook,
{ provide: ErrorHandler, useClass: IonicErrorHandler }
]
})
export class AppModule { }

Finally run

$ ionic cordova build android
$ ionic cordova run android

Follow up with high-quality video tutorial on YouTube

4 thoughts on “Login with Facebook

  1. Hello dilip
    I have open facebook login popup but issue with hash key is not vaild like this ..
    Please guide me.

Leave a Reply

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