Ionic/Angular Capacitor插件和firebase FB身份验证：FacebookLogin没有Web实现错误

Question

这是我的"sign in"函数，在Android上完美工作，并允许我在myapp中使用Facebookauth:

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);

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

Answer 1

Simon at Devdactic.com整理了一个关于Ionic Facebook Login with Capacitor的教程。要使web实现正常工作，需要设置一些东西。

1. 加载Facebook SDK
2. 注册Facebook web插件与电容器
3. 设置一个开关，根据应用程序运行的平台来决定使用哪个版本的Facebook登录。

在index.html中添加JavaScript来初始化Facebook SDK。在body标签

之后添加这个脚本标签

<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插件电容器和设置开关

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;
}
}