【Vue.js】 vue-facebook-login-component を参考に Facebookログイン を実装してみた

とある要件でInstagram Graph APIを使う事になったのですが、
使用するにはFacebookログインを行なっている動画撮影と
アプリ申請が必要となることがわかりました。

• スタートガイド - Instagramプラットフォーム - ドキュメンテーション - Facebook for Developers
• Instagram Graph APIの審査を申請して承認されるまでのまとめ | Developers.IO
• Instagram Graph APIの審査から承認まで - Qiita

Facebookログインするやり方を素振りしましたので、
参考にしたものや調査・実装したなかでの注目点を
本記事にまとめておきたいと思います。

参考にしたFacebookログイン用のVueコンポーネント

vue-facebook-login-component という
Facebookログイン用のVueコンポーネントが公開されています。

github.com

vue-facebook-login-component/packages/vue-facebook-login-component/src/Sdk.jsに
Facebook JavaScript SDKをラッパーした実装が記述されていました。

Vue3 x TypeScriptでFacebookログインまで実装してみた

vue-facebook-login-componentの実装を参考に、
Facebookログインまでを実装し直してみたのが以下になります。

• typescript-sandbox/fb-login-sample at master · zakizaki-ri9/typescript-sandbox · GitHub

window.FBの定義

Facebook JavaScript SDKをscriptタグ等でダウンロード・実行すると、
window.FBに様々なメソッド等が定義されます。

これらをコード補完させたい（かつ型定義の練習のため）、
公式ドキュメントの仕様を元に一部API・レスポンス等を
以下tsファイルへ定義しました。

• typescript-sandbox/facebookSdkBuildInWindow.ts at master · zakizaki-ri9/typescript-sandbox · GitHub

/* ~省略~ */
interface Facebook {
  // https://developers.facebook.com/docs/javascript/reference/FB.init/v8.0
  init(param: FacebookInitParameter): void;

  // https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus
  getLoginStatus(callback: (response: FacebookCallbackResponse) => void): void;

  // https://developers.facebook.com/docs/reference/javascript/FB.login/v8.0
  login(callback: (response: FacebookCallbackResponse) => void): void;

  // https://developers.facebook.com/docs/reference/javascript/FB.logout/v8.0
  logout(callback: (response: FacebookCallbackResponse) => void): void;
}

interface Window {
  FB: Facebook;
}

余談

@types/facebook-js-sdkがあるので、
自分で型定義したくない方はこちらをどうぞ。

www.npmjs.com

Facebook JavaScript SDKのダウンロード

以下tsファイルのloadメソッドに実装しました。

• typescript-sandbox/facebookSdk.ts at master · zakizaki-ri9/typescript-sandbox · GitHub
  • typescript-sandbox/facebookSdk.ts at 47e79be435823bfdf18c1ad0c691b00a6df0c03f · zakizaki-ri9/typescript-sandbox · GitHub

// ~省略~
  private load(): void {
    if (document.getElementById(this.FACEBOOK_SCRIPT_ID)) {
      // facebookのsdkが読み込まれていたら終了
      return;
    }

    // sdkを読み込むためのscriptタグを生成
    const scriptElement = document.createElement("script");
    scriptElement.id = this.FACEBOOK_SCRIPT_ID;
    scriptElement.src = this.srcUrl;
    scriptElement.onerror = error => {
      console.error(`${this.srcUrl} load Fail.`);
      new Error(error.toString());
    };

    // headに仕込む＆読み込みさせる
    document.querySelector("head")?.appendChild(scriptElement);
  }
// ~省略~

コメント文通りですが、
headタグにscriptタグを追加することで
SDKをダウンロードさせています。

おわり・所感

あとは

1. 画面上に入力されたappIdでFB.init -> 初期化
2. FB.loginでログイン

するだけです。
yarn install && yarn serveすれば実行できます。

同じようなことをやりたい方の参考になれば幸いです。

そのた参考リソース

• window.FB実装時に参考にした
  • TypeScript で window 直下にいろいろ生やしたりグローバル変数を定義する | Developers.IO