Account kit integartion (for ionic 4 app)

  1. Login Facebook Developer Account

  2. Get Facebook App ID (APP_ID) and AccountKit client token (CLIENT_TOKEN) - read document on medium to get APP_ID and CLIENT_TOKEN- https://medium.com/react-native-training/passwordless-authentication-in-react-native-using-facebook-account-kit-part-1-8d83e92077e9

  3. Install the plugin in your app

cordova plugin add cordova-plugin-accountkit --save --variable APP_ID="123456789" --variable APP_NAME="myApplication" --variable CLIENT_TOKEN="abcdefghijklmnopqrstuvwxyz" --variable API_VERSION="v1.1"

4. Uncomment the code in ../src/app/account/login/login.page.ts and ../src/app/account/login/register.page.tsfile

loginWithPhone(){
this.phoneLogingInn = true;
(<any>window).AccountKitPlugin.loginWithPhoneNumber({
useAccessToken: true,
defaultCountryCode: "IN",
facebookNotificationsEnabled: true,
}, data => {
(<any>window).AccountKitPlugin.getAccount(
info => this.handlePhoneLogin(info),
err => this.handlePhoneLogin(err));
});
}
handlePhoneLogin(info){
if(info.phoneNumber) {
this.api.postItem('phone_number_login', {
"phone": info.phoneNumber,
}).subscribe(res => {
this.status = res;
if (this.status.errors) {
this.errors = this.status.errors;
} else if (this.status.data) {
this.settings.customer.id = this.status.ID;
if (this.platform.is('cordova')){
this.oneSignal.getIds().then((data: any) => {
this.form.onesignal_user_id = data.userId;
this.form.onesignal_push_token = data.pushToken;
});
this.api.postItem('update_user_notification', this.form).subscribe(res =>{});
}
if(this.status.allcaps.dc_vendor || this.status.allcaps.seller || this.status.allcaps.wcfm_vendor){
this.settings.vendor = true;
}
this.navCtrl.navigateBack('/tabs/account');
}
this.phoneLogingInn = false;
}, err => {
this.phoneLogingInn = false;
});
} else this.phoneLogingInn = false;
}
handlePhoneLoginError(error){
this.phoneVerificationError = error;
this.phoneLogingInn = false;
}

5. Uncomment Login button in ../src/app/account/login/login.page.html and ../src/app/account/login/register.page.htmlfile

<!--ion-button expand="block" color="{{settings.theme.button}}" shape="round" mode="ios" fill="outline" (click)="loginWithPhone()" [disabled]="phoneLogingInn"><ion-spinner name="dots" color="{{settings.theme.button}}" *ngIf="phoneLogingInn"></ion-spinner><span *ngIf="!phoneLogingInn">{{"Login with OTP"| translate}}</span></ion-button-->