Vue.jsでFacebookログインボタンを実装する「vue-facebook-login-component」

vue-facebook-login-componentとは

vue-facebook-login-componentは、Vue.jsでFacebookログインボタンを実装するコンポーネントライブラリです。

環境

インストール

以下のnpm、yarn、CDNを使ってインストールします。

npm

npm install vue-facebook-login-component

yarn

yarn add vue-facebook-login-component

CDN

<script src="https://cdn.jsdelivr.net/npm/vue-facebook-login-component@2.2.1/dist/vueFacebookLoginComponent.umd.min.js"></script>

gitリポジトリは以下から取得できます。

https://github.com/adi518/vue-facebook-login-component

導入手順

1. ライブラリの取り込み

（1）ES6等の場合 [注意]モジュール版は未検証です。

import VFacebookLogin from 'vue-facebook-login-component'

（2）CDNの場合

なし

2.メソッドを設定

new Vue({
  el: '#app',
  data: {
    FB: {},
    model: {},
    scope: {}
  },
  methods: {
    handleSdkInit: function(a) {
      this.FB = a.FB;
      this.scope = a.scope;
    }
  }
});
 

3. テンプレートを準備

<v-facebook-login> を設定します。

[注意] サンプルはケバブケースで記載しています。

<div id="app">
  <v-facebook-login app-id="238734777526940" v-model="model" @sdk-init="handleSdkInit"></v-facebook-login>
</div>

app-idにFacebook アプリIDを設定します。

アプリIDを取得するには、デベロッパーアカウントの登録をする必要があります。
以下のサイトなどを参考にしてください。
https://biz.comlog.jp/manual2/20098.html

サンプル

https://kabanoki.github.io/vue/vue-facebook-login-component/

さいごに

Vue.jsでFacebookログインボタンを実装するコンポーネントライブラリでした。

今日はこの辺でー