あなたは私のコードを見ることができます。
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を使用する最良の方法は何ですか?
私は今日同じ問題に遭遇します。これが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
}
}
}
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
からアクセスできるようにする
最初に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で使用可能なメソッドを実行できるようになりました。
プラグインは、機能に関連するロジックを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>