如何将 Facebook SDK 与 Nuxt.js 一起使用？

Posted 2023-02-22

【中文标题】如何将 Facebook SDK 与 Nuxt.js 一起使用？

【英文标题】：How to use Facebook SDK with Nuxt.js?

【发布时间】：2017-09-25 16:21:34

【问题描述】：

你可以看到我的代码。

npm install vue init nuxt/koa my-project (koa@2)

页面 |- 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 is not a function

在使用 Nuxt 项目 (nuxt/koa) 时，使用 Facebook SDK 的最佳方式是什么？

【问题讨论】：

试试statusChangeCallback(response)，看这里***.com/questions/35319801/…

谢谢你。但是，我在哪里声明这个代码？ (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')); 因为，“定义FB”错误。

Vuejs component wait for facebook sdk to load的可能重复

多亏了你，我解决了。祝你好运。

【参考方案1】：

我今天遇到了同样的问题。这是我使用 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 调用FB SDK 中的方法并在任何组件中监听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
        
    

【参考方案2】：

我使用 [combined injection][1] 将插件插入到上下文中（从而使其在商店中可访问）：

在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 使其可以访问 [1]：https://nuxtjs.org/guide/plugins/

【参考方案3】：

插件是将一些与功能相关的逻辑注入 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>

【参考方案4】：

您可以使用nuxt-auth 非常简单

安装后将其添加到您的 nuxt-config

auth: 
redirect: 
  login: '/login',
  logout: '/',
  callback: '/callback',
  home: '/'
,
strategies: 
  facebook: 
    endpoints: 
      userInfo: 'https://graph.facebook.com/v6.0/me?fields=id,name,pictureurl',
    ,
    callback: '/callback',
    clientId: 'YOUR_APP_CLIENT_ID', 
    scope: ['public_profile', 'email'],

  ,
,

然后，如果您的回调组件中需要，则创建回调组件，您可以从this.$route.query; 访问 Facebook 数据

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review

【参考方案5】：

首先创建一个 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 在您的组件中执行 FB SDK 中可用的方法。

【讨论】：

这应该是更好的答案，因为这正是 Facebook SDK 官方文档所建议的方式：developers.facebook.com/docs/javascript/quickstart?locale=en_US

这就是答案，因为如果您将其注册为插件，您将在每次加载时加载它，而不是只加载所需的页面。