AngularでFacebookAccountkitを実装する

株式会社キネカでフロントエンドを主に担当している、安達です！
クライアントサイドで実装するFacebookAccountkit実装例を紹介します。
Angular v6使用しています。

0. FacebookAppを登録します。

AccountKitを使用し、APPIDとAccountkitのバージョン番号をメモっておきます。

1. ng2-account-kitのインストール

npm i — save-dev ng2-account-kit

2. Index.htmlにスクリプトを埋め込む

<script src=”https://sdk.accountkit.com/en_US/sdk.js"></script>

3. 電話番号認証処理

カントリーコード、電話番号は必須項目です。
カントリーコードはFacebookApp -> Accountkit -> Settingsの
Country Codes Whitelistと組み合わせる、電話番号は初期値が不要であれば空文字を指定。

login(): void {
  AccountKit.login(‘PHONE’, { countryCode: ‘+81’, phoneNumber: ""  }).then(
 (response: AuthResponse) => console.log(response),
 (error: any) => console.error(error)
 );
}

4. Facebook GraphAPIでFacebookアカウント情報取得

state,status, codeがレスポンスされてくるので、
stateの一致とstatusを確認。
codeを使ってgraphAPIを叩いてFacebookアカウント情報取得できます。

参考: Using the Graph API — Account Kit