web-dev-qa-db-ja.com

Nuxt.jsでFacebookSDKを使用する方法は？

あなたは私のコードを見ることができます。

npm install vue init nuxt/koa my-project（koa @ 2）

pages

 |- login.vue

<script>
export default {
  name: 'login',
  method: {
    login () {
      let vm = this
      FB.login(function (response) {
        vm.statusChangeCallback(response)
      }, {scope: 'publish_actions'})
    }
  },
  mounted () {
    console.log('mounted')
    let vm = this
    window.fbAsyncInit = () => {
      FB.init({
        appId: 'my-facebook-app-id',
        cookie: true,
        xfbml: true,
        version: 'v2.8'
      })
      FB.getLoginStatus(function (response) {
        vm.statusChangeCallback(response)
      })
    }

    (function(d, s, id){
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
  }
}
</script>

だが、

sdk.js：96 Uncaught TypeError：vm.statusChangeCallbackは関数ではありません

Nuxtプロジェクト（ nuxt/koa ）を使用する場合、Facebook SDKを使用する最良の方法は何ですか？

facebookloginsdkvue.jsnuxt.js
6
hyeokluv

私は今日同じ問題に遭遇します。これがnuxt.jsを使った私の解決策です

最初にプラグインを作成しますplugins/fb-sdk.js

const vue_fb = {}
vue_fb.install = function install(Vue, options) {
    (function(d, s, id){
        var js, fjs = d.getElementsByTagName(s)[0]
        if (d.getElementById(id)) {return}
        js = d.createElement(s)
        js.id = id
        js.src = "//connect.facebook.net/en_US/sdk.js"
        fjs.parentNode.insertBefore(js, fjs)
        console.log('setting fb sdk')
    }(document, 'script', 'facebook-jssdk'))

    window.fbAsyncInit = function onSDKInit() {
        FB.init(options)
        FB.AppEvents.logPageView()
        Vue.FB = FB
        window.dispatchEvent(new Event('fb-sdk-ready'))
    }
    Vue.FB = undefined
}

import Vue from 'vue'

Vue.use(vue_fb, {
    appId: 'your-app-id',
    autoLogAppEvents: true,
    xfbml: true,
    version: 'v2.9'
})

Vue.FBを使用してFBSDKのメソッドを呼び出し、次のようなコンポーネントでfb-sdk-readyイベントをリッスンできます。

export default{
    data: function () {
        return {isFBReady: false}
    },
    mounted: function () {
        this.isFBReady = Vue.FB != undefined
        window.addEventListener('fb-sdk-ready', this.onFBReady)
    },
    beforeDestroy: function () {
        window.removeEventListener('fb-sdk-ready', this.onFBReady)
    },
    methods: {
        onFBReady: function () {
          this.isFBReady = true
        }
    }
}
13
ChaoTangChang

combined inject を使用して、プラグインをコンテキストに挿入しました（したがって、ストアでプラグインにアクセスできるようにしました）。

plugins/fb-sdk.js：

const vue_fb = {}
vue_fb.install = function install(Vue, options) {
    (function(d, s, id){
        var js, fjs = d.getElementsByTagName(s)[0]
        if (d.getElementById(id)) {return}
        js = d.createElement(s)
        js.id = id
        js.src = "//connect.facebook.net/en_US/sdk.js"
        fjs.parentNode.insertBefore(js, fjs)
        console.log('setting fb sdk')
    }(document, 'script', 'facebook-jssdk'))

    window.fbAsyncInit = function onSDKInit() {
        FB.init(options)
        FB.AppEvents.logPageView()
        Vue.FB = FB
        window.dispatchEvent(new Event('fb-sdk-ready'))
        vue_fb.sdk = FB // do not forget this line
    }
    Vue.FB = undefined
}

import Vue from 'vue'

Vue.use(vue_fb, {
    appId: 'your-app-id',
    autoLogAppEvents: true,
    xfbml: true,
    version: 'v2.9'
})
// and this line
export default ({ app }, inject) => {
inject('fb', vue_fb)
}

this.$fbからアクセスできるようにする

4
WitoldW

最初にjavascriptファイルを作成し、static/jsフォルダーに含めます。

static/js/fb-sdk.js

以下のスクリプトをfb-sdk.jsファイルに含めます。

window.fbAsyncInit = function () {
  FB.init({
    appId: '<insert your app id>',
    autoLogAppEvents: true,
    xfbml: true,
    version: 'v2.10'
  })
  FB.AppEvents.logPageView()
};

(function (d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0]
  if (d.getElementById(id)) { return }
  js = d.createElement(s); js.id = id
  js.src = 'https://connect.facebook.net/en_US/sdk.js'
  fjs.parentNode.insertBefore(js, fjs)
}(document, 'script', 'facebook-jssdk'))

最後に、nuxt.config.jsのヘッダーセクションにスクリプトを含めます。

module.exports = {
  head: {
    title: 'myTitle',
    meta: [
      { charset: 'utf-8' }
    ],
    script: [
     { src: '/js/fb-sdk.js' }
    ]
  }
}

window.FBを使用して、コンポーネントのFBSDKで使用可能なメソッドを実行できるようになりました。

4
MSyakir

プラグインは、機能に関連するロジックをVueインスタンスに挿入するための良い方法ですが、VueインスタンスにはFacebookログインロジックがすべて含まれている必要はないと思います次のようなlogin-with-facebook-buttonコンポーネントを使用したいと思います。

<template>
  <v-btn v-if="facebookSdkReady" color="primary" dark type="button" @click="login">
    <v-layout mr-2>
      <v-icon name="brands/facebook"/>
    </v-layout>Login with Facebook
  </v-btn>
</template>

<script>
export default {
  name: 'LoginWithFacebook',

  data() {
    return {
      facebookSdkReady: false
    }
  },

  mounted() {
    const installFacebookSdkScript = (d, s, id) => {
      if (d.getElementById(id)) {
        this.facebookSdkReady = true
        return
      }
      let fjs = d.getElementsByTagName(s)[0]
      let js = d.createElement(s)
      js.id = id
      js.src = 'https://connect.facebook.net/en_US/sdk.js'
      fjs.parentNode.insertBefore(js, fjs)
    }
    installFacebookSdkScript(document, 'script', 'facebook-jssdk')

    window.fbAsyncInit = () => {
      FB.init({
        appId: '16653216336xxxxx',
        cookie: true,
        xfbml: true,
        version: 'v3.2'
      })

      FB.AppEvents.logPageView()
      this.facebookSdkReady = true
    }
  },

  methods: {
    // just a sample code copied from my code base.
    // here, you can replace this with your own.
    async login() {
      const url = await this.$store.dispatch('auth/fetchSocialLoginUrl', {
        provider: 'facebook'
      })

      window.location.href = url
    }
  }
}
</script>
0
Jinseok Oh