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-->

Last updated