웹개발/ionic
[아이오닉] 전화번호 인증 - Facebook AccountKit
신수동이
2018. 7. 30. 00:44
Facebook AccountKit으로 SMS / 전화 번호를 사용하여 사용자를 인증
Requirements:
- Facebook AccountKit
1. 페이스북 개발자 계정 생성 - https://developers.facebook.com
2. Facebook AccountKit 기능 추가 - 아이오닉 프로젝트에서 cordova plugin 설치
ionic cordova plugin add cordova-plugin-accountkit --save \
--variable APP_ID="app id" \
--variable APP_NAME=“app name” \
--variable CLIENT_TOKEN="client token" \
--variable API_VERSION=“v1.0”
- ionic project 코드
- phone.html
<ion-content padding>
<div>
PhoneNumber: {{userInfo.country_code}} {{userInfo.phoneNumber}}
</div>
<button ion-button block color="primary" (click)="register()">Register</button>
</ion-content>
- phone.ts
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
@Component({
selector: 'page-phone',
templateUrl: 'phone.html',
})
export class PhonePage {
userInfo: any = {};
constructor(public navCtrl: NavController, public navParams: NavParams) {}
register(){
(<any>window).AccountKitPlugin.loginWithPhoneNumber({
useAccessToken: true,
defaultCountryCode: "IN",
facebookNotificationsEnabled: true,
}, data => {
(<any>window).AccountKitPlugin.getAccount(
info => this.userInfo = info,
err => console.log(err)
);
});
}
}
- 인증 결과 화면
- 참고
cordova-plugin-accountkit : https://github.com/gurisko/cordova-plugin-accountkit