Ionic Facebook Login Tutorial

This lesson (ionic login with Facebook), we’re going to learn how to integrate Facebook login for ionic application and fetch user’s information from Facebook.

Ionic login with Facebook Video Lesson

First, we need to create a new project then we need to add platform

ionic <span class="hljs-built_in">start</span> fblogin blank
cd fblogin
ionic cordova <span class="hljs-built_in">platform</span> <span class="hljs-built_in">add</span> android

To add a Facebook plugin (cordova-plugin-facebook4) we need to create APP_ID and APP_NAME. If you don’t know, how to create APP_ID and APP_NAME, please visit https://codesundar.com/create-facebook-application/

ionic plugin add cordova-plugin-facebook<span class="hljs-number">4</span> --<span class="hljs-keyword">variable</span> APP<span class="hljs-number">_</span>ID=<span class="hljs-string">"YOUR_APP_ID"</span> --<span class="hljs-keyword">variable</span> APP<span class="hljs-number">_</span>NAME=<span class="hljs-string">"YOUR_APP_NAME"</span>
npm install --save <span class="hljs-meta">@ionic</span>-<span class="hljs-keyword">native</span>/facebook

Now we have to import modules on app.module.ts page then we can write a code for home pages

home.html

<span class="xml"><span class="hljs-tag"><<span class="hljs-name">ion-content</span> <span class="hljs-attr">padding</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">div</span> *<span class="hljs-attr">ngIf</span>=<span class="hljs-string">"isUserLoggedIn"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"text-align:center"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{userInfo.picture.data.url}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">h3</span>></span></span><span class="hljs-template-variable">{{userInfo.first_name}}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">h3</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">p</span>></span></span><span class="hljs-template-variable">{{userInfo.email}}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">p</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">ion-button</span> <span class="hljs-attr">clear</span> (<span class="hljs-attr">click</span>)=<span class="hljs-string">"logout()"</span>></span>Logout<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">ion-content</span>></span>
<span class="hljs-tag"><<span class="hljs-name">ion-footer</span> *<span class="hljs-attr">ngIf</span>=<span class="hljs-string">"!isUserLoggedIn"</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">ion-button</span> <span class="hljs-attr">block</span> (<span class="hljs-attr">click</span>)=<span class="hljs-string">"loginWithFB()"</span>></span>Login with Facebook<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">ion-footer</span>></span></span>

Explanation: We’ve created two buttons for login and logout; we also display images, name, and email address

home.ts

loginWithFB(){
  <span class="hljs-keyword">this</span>.fb.login([<span class="hljs-string">"public_profile"</span>,<span class="hljs-string">"email"</span>]).then( <span class="hljs-function"><span class="hljs-params">loginRes</span> =></span> {
    <span class="hljs-keyword">this</span>.fb.api(<span class="hljs-string">'me/?fields=id,email,first_name,picture'</span>,[<span class="hljs-string">"public_profile"</span>,<span class="hljs-string">"email"</span>]).then( <span class="hljs-function"><span class="hljs-params">apiRes</span> =></span> {

      <span class="hljs-keyword">this</span>.userInfo = apiRes;
      <span class="hljs-keyword">this</span>.isUserLoggedIn = <span class="hljs-literal">true</span>;

    }).catch( <span class="hljs-function"><span class="hljs-params">apiErr</span> =></span> <span class="hljs-built_in">console</span>.log(apiErr));

  }).catch( <span class="hljs-function"><span class="hljs-params">loginErr</span> =></span> <span class="hljs-built_in">console</span>.log(loginErr) )
}

logout(){
  <span class="hljs-keyword">this</span>.fb.logout().then( <span class="hljs-function"><span class="hljs-params">logoutRes</span> =></span> 
    <span class="hljs-keyword">this</span>.isUserLoggedIn = <span class="hljs-literal">false</span>
  ).catch(<span class="hljs-function"><span class="hljs-params">logoutErr</span> =></span> 
    <span class="hljs-built_in">console</span>.log(logoutErr)
  );
}

Explanation: we need to import {Facebook} from '@ionic-native/facebook' then we need to create an object. By using that created object we can call this.fb.login() for login, also we have used this.fb.api() to get user’s information