Ionic/Angular Capacitor plugin & firebase FB auth : FacebookLogin does not have web implementation 错误

Question

这是我的 "sign in" 函数，可以在 Android 上完美运行，并允许我在 myapp 中使用 Facebook auth :

  async signIn(): Promise<void> {
    const FACEBOOK_PERMISSIONS = ['public_profile', 'email'];

    const result = await Plugins.FacebookLogin.login({ permissions: FACEBOOK_PERMISSIONS });
    if (result && result.accessToken) {
      let user = { token: result.accessToken.token, userId: result.accessToken.userId }
      let navigationExtras: NavigationExtras = {
        queryParams: {
          userinfo: JSON.stringify(user)
        }
      };
      this.router.navigate(["/feed"], navigationExtras);
    }
  }

我想像以前在浏览器上那样测试我的应用程序，但我收到了这个错误： 错误：

core.js:4197 ERROR Error: Uncaught (in promise): FacebookLogin does not have web implementation.
at resolvePromise (VM1677 polyfills.js:3904)
at VM1677 polyfills.js:3811
at rejected (VM1678 vendor.js:113087)
at ZoneDelegate.invoke (VM1677 polyfills.js:3470)
at Object.onInvoke (VM1678 vendor.js:62348)
at ZoneDelegate.invoke (VM1677 polyfills.js:3469)
at Zone.run (VM1677 polyfills.js:3229)
at VM1677 polyfills.js:3963
at ZoneDelegate.invokeTask (VM1677 polyfills.js:3505)
at Object.onInvokeTask (VM1678 vendor.js:62336)

我尝试使用

注册我的电容器插件

import { registerWebPlugin } from '@capacitor/core';

registerWebPlugin(FacebookLogin);

但这根本不起作用，这是我通过 google 搜索找到的唯一解决方案。

Answer 1

西蒙在 Devdactic.com put together a great tutorial about Ionic Facebook Login with Capacitor。需要设置一些内容才能使 Web 实现正常工作。

加载 Facebook SDK
使用 Capacitor 注册 Facebook 网络插件
设置一个开关，根据应用运行所在的平台确定使用哪个版本的 Facebook 登录。

在index.html中加入JavaScript初始化Facebook SDK。在正文标签后添加此脚本标签

<script>
  window.fbAsyncInit = function () {
    FB.init({
      appId: '#YOUR_APP_ID_HERE#',
      cookie: true, // enable cookies to allow the server to access the session
      xfbml: true, // parse social plugins on this page
      version: 'v5.0' // use graph api current version
    });
  };

  // Load the SDK asynchronously
  (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'));
</script>

接下来（第 2 步和第 3 步）将 FacebookLogin 作为 Web 插件注册到 Capacitor 并设置开关

import { Component } from '@angular/core';
import { FacebookLoginPlugin } from '@capacitor-community/facebook-login';
import { Plugins, registerWebPlugin } from '@capacitor/core';
import { isPlatform } from '@ionic/angular';
import { HttpClient } from '@angular/common/http';

import { FacebookLogin } from '@capacitor-community/facebook-login';
registerWebPlugin(FacebookLogin);

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage {
  fbLogin: FacebookLoginPlugin;
  user = null;
  token = null;
 
  constructor(private http: HttpClient) {
    this.setupFbLogin();
  }
 
  async setupFbLogin() {
    if (isPlatform('desktop')) {
      this.fbLogin = FacebookLogin;
    } else {
      // Use the native implementation inside a real app!
      const { FacebookLogin } = Plugins;
      this.fbLogin = FacebookLogin;
    } 
  }
 
  async login() {
    const FACEBOOK_PERMISSIONS = ['email', 'user_birthday'];
    const result = await this.fbLogin.login({ permissions: FACEBOOK_PERMISSIONS });
 
    if (result.accessToken && result.accessToken.userId) {
      this.token = result.accessToken;
      this.loadUserData();
    } else if (result.accessToken && !result.accessToken.userId) {
      // Web only gets the token but not the user ID
      // Directly call get token to retrieve it now
      this.getCurrentToken();
    } else {
      // Login failed
    }
  }
 
  async getCurrentToken() {    
    const result = await this.fbLogin.getCurrentAccessToken();
 
    if (result.accessToken) {
      this.token = result.accessToken;
      this.loadUserData();
    } else {
      // Not logged in.
    }
  }
 
  async loadUserData() {
    const url = `https://graph.facebook.com/${this.token.userId}?fields=id,name,picture.width(720),birthday,email&access_token=${this.token.token}`;
    this.http.get(url).subscribe(res => {
      this.user = res;
    });
  }
 
  async logout() {
    await this.fbLogin.logout();
    this.user = null;
    this.token = null;
  }
}

Ionic/Angular Capacitor plugin & firebase FB auth : FacebookLogin does not have web implementation 错误

Ionic/Angular Capacitor plugin & firebase FB auth : FacebookLogin does not have web implementation error

angular

firebase

ionic-framework

facebook-authentication

capacitor