How to add facebook login to your Ionic App
Introduction
This section explains how you can create an app with user registration using Facebook Login and Parse Server core features through Back4App.
After following this tutorial, you will be able to do this:
At any time, you can access the complete Android Project built with this tutorial at our GitHub repository.
Prerequisites
To complete this quickstart, you need:
- Visual Studio Code (or any web IDE you like).
- Ionic Framework.
- An app created at Back4App.
- Follow the New Parse App tutorial to learn how to create a Parse app at Back4App.
- Followed the User registration with email verification tutorial to learn how to implement sign up, sign in and log out with Back4App.
- A Facebook account for creating the app.
Step 1 - Facebook Set up
To start using Facebook functions, you need to:
- Go to the Facebook Developer Website and create an account and log in.
- Go to My Apps and click on
Add a New App
: - At the left panel, click on
Settings
>Basic
. In this page:- Take note of your
App ID
- Add a
Privacy Police URL
- Select a
Category
- Scroll down and hit
Save changes
- Take note of your
- At the top of the same page, click on the
Off
button and Confirm to make your app live. - Scroll down at the same page and click on
Add platform
.- For this tutorial, let’s choose Android
- Add your
Google Play Package Name
which in our case is com.back4app.myapp - Add the
Key Hashes
of your machine (runkeytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64
to find out yours) Save changes
- At the left panel, to back to
Dashboard
, scroll down and click onFacebook Login
.
Step 2 - Link your Facebook App with Back4App
- Go to your App dashboard at Back4App Website and click on
Server Settings
. - Find the “Facebook Login” block and click on
Settings
. The “Facebook Login” block looks like this: - Add the Facebook
App ID
taken note in the previous step.
Step 3 - Set up
In this tutorial, we will be starting from where we left off in the previous User registration with email verification one.
Step 4 - Facebook Login
Let’s first install Facebook cordova plugins:
$ ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="XXXXXXXX" --variable APP_NAME="XXXXXXXX"
$ npm install --save @ionic-native/facebook
Now, let’s implement the facebookLogin()
method:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
async facebookLogin() {
try {
// Log in to Facebook and request user data
let facebookResponse = await this.facebook.login(['public_profile', 'email']);
let facebookAuthData = {
id: facebookResponse.authResponse.userID,
access_token: facebookResponse.authResponse.accessToken,
};
// Request the user from parse
let toLinkUser = new Parse.User();
let user = await toLinkUser._linkWith('facebook', {authData: facebookAuthData});
// If user did not exist, updates its data
if (!user.existed()) {
let userData = await this.facebook.api('me?fields=id,name,email,first_name,picture.width(720).height(720).as(picture)', []);
user.set('username', userData.name);
user.set('name', userData.name);
user.set('email', userData.email);
await user.save();
}
this.navCtrl.setRoot('HomePage');
} catch (err) {
console.log('Error logging in', err);
this.toastCtrl.create({
message: err.message,
duration: 2000
}).present();
}
}
Finally, let’s add a button to our Login
page and make it call the method we just created:
1
2
3
4
5
<div text-center>
<button ion-button color="facebook" (click)="facebookLogin()">
LOG IN WITH FACEBOOK
</button>
</div>
Step 5 - Test your app
- Since Facebook log in does’t work on a browser, test your app by running
ionic cordova run android
. - Login at Back4App Website.
- Find your app and click on
Dashboard
>Core
>Browser
>User
to see the user that you’ve created!
It’s done!
At this stage, you can log in, register and log out of your app with Facebook using Parse Server core features through Back4App!