ionic-phonenumber-verification
phonenumber-authentication
phonenumber-authentication

Ionic AccountKit Integration: This article, we’re going to learn “How to authenticate user using SMS / Phone Number by Facebook AccountKit”

Requirements:

  • Facebook Developer Account
  • Ionic Setup

Create Client Token on Developer’s Account

Login with https://developers.facebook.com

ionic accountkit integration
ionic accountkit integration
Enable Accountkit
Enable Accountkit
ionic accountkit token generate
ionic accountkit token generate

Working with Ionic Project

Create new project

ionic start accountkit blank

Adding Platform

ionic cordova platform add android
ionic cordova platform add ios

Adding Plugin (Replace with your details)

ionic cordova plugin add cordova-plugin-accountkit --save \
   --variable APP_ID="767XXXXXXX58358" \
   --variable APP_NAME="CodeSundxxxxx" \
   --variable CLIENT_TOKEN="6d97e93101b1681dfcb868xxxxxxx" \
   --variable API_VERSION="v1.1"

Adding Button on home.html

<div>PhoneNumber: {{userInfo.country_code}}{{userInfo.phoneNumber}}</div>
<button ion-button color="primary" (click)="register()">Register</button>

Working with home.ts

register(){
  (<any>window).AccountKitPlugin.loginWithPhoneNumber({
    useAccessToken: true,
    defaultCountryCode: "IN",
    facebookNotificationsEnabled: true,
  }, data => {
  (<any>window).AccountKitPlugin.getAccount(
    info => this.userInfo = info,
    err => console.log(err));
  });
}

Screenshot

ionic-accountkit-integration-example
ionic-accountkit-integration-example

Facing any issues? feel free to comment below.

 

Sundaravel M

About the author: Hey! It's me sundar. (Yea, I'm the founder of codesundar.com). I'm a passionate computer programmer who loves modern web and mobile development. feel free to reach me : Facebook - Twitter - Google+