angular - Ionic/Angular Capacitor plugin & firebase FB auth : FacebookLogin 没有网络实现错误
问题描述
这是我的功能"sign in"
,可以完美运行Android
并允许我使用:Facebook
auth
myapp
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);
但这根本不起作用,这是我通过谷歌搜索找到的唯一解决方案。
解决方案
Devdactic.com的Simon整理了一个关于Ionic Facebook Login with Capacitor的精彩教程。需要设置一些东西才能使 Web 实现正常工作。
- 加载 Facebook SDK
- 使用 Capacitor 注册 Facebook 网络插件
- 设置一个开关,以根据应用程序运行的平台确定要使用的 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 注册为 Capacitor 的 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;
}
}
推荐阅读
- python - 使用 matplotlib.figure 更改刻度间隔
- excel - 用于乘数
- stress-testing - 如何正确使用 Inventor 的应力分析软件来查找装配体中的扭转位移?
- ruby-on-rails - 在 macOS Catalina 上使用 Ruby 2.2.6 安装 OpenSSL 时出现问题
- r - 用 r 中的 0 和 1 替换所有文本字符串
- php - PHP ML 可以有多个标签值吗?
- jenkins-pipeline - 詹金斯插件没有安装
- python - sklearn随机森林查找所选特征的分数
- css - React Native Align Self Flex End 未按预期工作
- powershell - 如何使用 powershell 将此文本文件输出为表格格式?