vue-facebook-login-componentを使ってみた

概要

Nuxt.jsで作成しているサイトにFacebookのログインボタンを配置したいと思って、facebook for developersにあるSDKを使おうとしたのですが中々うまく動かせませんでした。。ただ、Vue用に「vue-facebook-login-component」なるものがあり、今回使ってみましたのでメモを残しておきます。

事前準備

Facebookデベロッパーの登録方法を画面入りで解説2019年版を参考にデベロッパーの登録をします。登録後、Facebook App IDを取得します。

vue-facebook-login-componentのドキュメント

VUE FACEBOOK LOGINにあります。

サンプルソース

今回はFacebookにログイン後、ID・名前・アイコン画像・メールアドレスを取得するサンプルを作成しました。

FacebookAuthComponent.vue

<template>
  <div>
    <v-facebook-login
      app-id="Facebook App IDを入力"
      version="v5.0"
      :login-options="scope"
      @sdk-init="setSdk"
      @connect="connected"
      @logout="onLogout"
    >
      <span slot="login">Facebookで登録</span>
      <span slot="logout">Facebookからログアウト</span>
    </v-facebook-login>
  </div>
</template>
<script>
import VFacebookLogin from "vue-facebook-login-component";

export default {
  components: {
    VFacebookLogin
  },
  data() {
    return {
      sdkFB: undefined,
      scope: { scope: "public_profile, email" },
      isFacebookAuth: false,
      facebookInfo: undefined
    };
  },
  methods: {
    // sdkの読み込み完了
    setSdk(sdk) {
      this.sdkFB = sdk.FB;
    },
    // 認証が完了したらconnectedが呼ばれる
    connected() {
      this.isFacebookAuth = true;
      // id、名前、写真、メールアドレスを取得
      this.sdkFB.api(
        "/me?fields=id,name,picture,email",
        function(response) {
          // 取得したデータを設定
          this.facebookInfo = {
            id: response.id,
            name: response.name,
            email: response.email,
            pictureUrl: response.picture.data.url
          };
        }.bind(this)
      );
    },
    // ログアウト時は認証フラグをfalse
    onLogout(response) {
      this.isFacebookAuth = false;
    }
  }
};
</script>

ボタンのイメージ

【ログイン前】

【認証中】

【ログイン後】