Ошибка входа в Facebook: «FB» не определен с Vue.js - PullRequest
Новая
       9

Ошибка входа в Facebook: «FB» не определен с Vue.js

0 голосов
/ 02 июля 2019

Я использую Facebook Login в Vue-cli, но он показывает, что «FB» не определен.

Я разделяю код в двух файлах: application.js & app.vue

./assets/js/application.js

// Facebook Login
(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/zh_TW/sdk.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

App.vue 

mounted: function(){
    window.fbAsyncInit = function() {
    FB.init({
      appId      : '<appID>',
      cookie     : true,
      xfbml      : true,
      version    : '{api-version}'
    });
    FB.AppEvents.logPageView();  
    };
  }

main.js 

import './assets/js/application.js'
import App from './App.vue'

1 Ответ

0 голосов
/ 02 июля 2019

У вас нет FB в вашей области. Вам нужно импортировать его из библиотеки, которую вы хотите использовать, например 

import { FB as VFacebookLogin } from 'vue-facebook-login-component'

Я не уверен, какую библиотеку вы используете. Этот в моем ответе от https://github.com/adi518/vue-facebook-login-component

UPDATE

Вы разделяете код на два файла, это может быть причиной проблемы. Другая причина может заключаться в том, что вы не ждете, пока он загрузится. Таким образом, ваш mounted работает до загрузки https://connect.facebook.net/zh_TW/sdk.js.

Вот хороший пример того, как это можно сделать:

https://github.com/adi518/vue-facebook-login-component/blob/master/src/modules/helpers.js#L7

https://github.com/adi518/vue-facebook-login-component/blob/master/src/modules/helpers.js#L27

https://github.com/adi518/vue-facebook-login-component/blob/master/src/components/FBLogin.Scope.js#L51

function initFbSdk(options) {
  return new Promise(resolve => {
    window.fbAsyncInit = function () {
      const defaults = { cookie: true, xfbml: true }
      options = { ...defaults, ...options }
      window.FB.init(options)
      resolve()
    };
    /* eslint-disable */
    (function (d, s, id) {
      const fjs = d.getElementsByTagName(s)[0]
      if (d.getElementById(id)) { return; }
      const js = d.createElement(s); js.id = id
      js.src = '//connect.facebook.net/zh_TW/sdk.js'
      fjs.parentNode.insertBefore(js, fjs)
    }(document, 'script', 'facebook-jssdk'))
    /* eslint-enable */
  })
}

function getFbSdk(options) {
  return new Promise(async resolve => {
    if (window.FB) {
      resolve(window.FB)
    } else {
      await initFbSdk(options)
      resolve(window.FB)
    }
  })
}

Тогда вы можете использовать его как 

const sdk = await getFbSdk({ appId, version, options }) //sdk === FB in this case
...