NativeScript : Facebook SDK

NativeScript 插件，Android 和 iOS 的原生 Facebook SDK 包装器。

• 功能
• 安装
• 配置
  • Android
  • iOS
• NativeScript Core
  • 初始化
  • 登录
    • Facebook 登录按钮
    • 自定义登录按钮
  • 登出
    • Facebook 登出按钮
    • 自定义登出按钮
  • 分享
    • 创建分享内容
    • Facebook 分享按钮
    • Facebook 发送按钮
    • 程序化显示分享对话框
    • 如果不能分享则隐藏自定义按钮
• NativeScript Angular
  • 初始化
  • 登录
    • Facebook 登录按钮
    • 自定义登录按钮
  • 登出
    • Facebook 登出按钮
    • 自定义登出按钮
  • 分享
    • 创建分享内容
    • Facebook 分享按钮
    • Facebook 发送按钮
    • 程序化显示分享对话框
    • 如果不能分享则隐藏自定义按钮
• 登录响应
• 获取当前访问令牌
• 基本分析
• Graph API 示例
• 发行说明
• 常见问题解答
• 贡献
• 获取帮助

功能

• [x] 登录 & 登出
• [x] 分享
• [ ] Graph API
• [x] 基本分析

安装

tns plugin add nativescript-facebook

配置

Android

更新 AndroidManifest.xml (app/App_Resources/Android/AndroidManifest.xml) 以在 <application> 下添加 provider
{facebook_app_id} 是您的应用 ID

<provider android:authorities="com.facebook.app.FacebookContentProvider{facebook_app_id}"
				  android:name="com.facebook.FacebookContentProvider"
				  android:exported="true"/>

iOS

更新 Info.plist 文件 (app/App_Resources/iOS/Info.plist) 以包含以下 CFBundleURLTypes 和 LSApplicationQueriesSchemes

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
    <dict>
    ...

        <key>CFBundleURLTypes</key>
        <array>
            <dict>
                <key>CFBundleURLSchemes</key>
                <array>
                    <string>fb{facebook_app_id}</string>
                </array>
            </dict>
        </array>
		<key>LSApplicationQueriesSchemes</key>
        <array>
            <string>fbapi</string>
            <string>fb-messenger-share-api</string>
            <string>fbauth2</string>
            <string>fbshareextension</string>
        </array>
    </dict>
</plist>

确保您已将 {facebook_app_id} 替换为您自己的 Facebook 应用 ID。有关如何获取 Facebook 应用 ID 的更多信息，请参阅此处。

用法

NativeScript Core

初始化

在应用程序启动时调用 nativescript-facebook 模块的 init。

app.ts

import * as application from 'application';
import { init } from "nativescript-facebook";

application.on(application.launchEvent, function (args) {
    init("{facebook_app_id}");
});

application.start({ moduleName: "login-page" });

登录

Facebook 登录按钮

将 Facebook 登录按钮添加到视图中，就像添加 Facebook:LoginButton 标签一样简单。然后您可以定义 login 事件处理器名称。在下面的示例中 - onLogin。

login-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
      xmlns:Facebook="nativescript-facebook"
  loaded="pageLoaded" class="page">

    ...

    <Facebook:LoginButton login="{{ onLogin }}"></Facebook:LoginButton>

    ...

</Page> 

在您的视图中实现 onLogin 事件处理器。它接收一个类型为 LoginEventData 的参数。目前 LoginEventData 对象有两个属性：错误和 loginResponse。loginResponse 是一个对象，它包含一个属性 - token，该 token 保留用于进一步验证的 Facebook 访问令牌。理想情况下，我们可以在将来添加一些其他属性，例如 Facebook 用户 ID。

login-view-model.ts

import { Observable } from 'data/observable';
import { Facebook:LoginButton } from "nativescript-facebook";

export class LoginViewModel extends Observable {

  onLogin(eventData: LoginEventData) {
    if (eventData.error) {
      alert("Error during login: " + eventData.error.message);
    } else {
      console.log(eventData.loginResponse.token);
    }
  }
}

自定义登录按钮

添加一个按钮并在您的登录视图中定义一个 tap 事件处理器。

login-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
      xmlns:Facebook="nativescript-facebook"
  loaded="pageLoaded" class="page">

    ...

    <Button tap="{{ login }}" text="Log in (custom)"></Button>

    ...

</Page> 

在视图中实现 tap 事件处理器，在本例中为 login 方法。它只需调用来自插件的方法。在下面的示例中，插件中的登录方法导入为 fbLogin。

最佳实践：只导入您需要的函数，而不是整个文件。当您使用 webpack 打包应用程序时，这非常重要。

login-view-model.ts

import { Observable } from 'data/observable';
import { login as fbLogin } from "nativescript-facebook";

export class LoginViewModel extends Observable {

  login() {
    fbLogin((err, fbData) => {
      if (err) {
        alert("Error during login: " + err.message);
      } else {
        console.log(fbData.token);
      }
    });
  }

}

登出

Facebook 登出按钮

将 Facebook 登出按钮添加到视图中，就像添加 Facebook:LoginButton 标签一样简单。然后您可以定义 logout 事件处理器名称。在下面的示例中 - onLogout。

home-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
      xmlns:Facebook="nativescript-facebook"
  loaded="pageLoaded" class="page">

    ...

    <Facebook:LoginButton logout="{{ onLogout }}"></Facebook:LoginButton>

    ...

</Page> 

在视图中实现 onLogout 事件处理器。

home-view-model.ts

import { Observable } from 'data/observable';

export class HomeViewModel extends Observable {

  onLogout() {
    console.log("logged out");
  }

}

自定义登出按钮

在你的视图中添加一个按钮，并定义一个tap事件处理器。在这个例子中，是logout。

home-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
      xmlns:Facebook="nativescript-facebook"
  loaded="pageLoaded" class="page">

    ...

    <Button tap="{{ logout }}" text="Log out (custom)"></Button>

    ...

</Page> 

在视图模型中实现tap事件处理器，在这个例子中是logout方法。它只需要调用来自插件的logout方法。以下示例中，插件中的logout方法被导入为fbLogout。

home-view-model.ts

import { Observable } from 'data/observable';
import { logout as fbLogout } from "nativescript-facebook";

export class LoginViewModel extends Observable {

  logout() {
    fbLogout(() => {
      console.log("logged out");
    });
  }

}

分享

创建分享内容

对于分享，您必须首先创建分享内容。目前可用的内容类型包括

• createShareLinksContent(link: string, quote?: string, addition?: ShareAdditionContent)适用于所有条件
• createSharePhotosContent(images: ImageSource[] | string[], userGenerated: boolean, addition?: ShareAdditionContent)适用于ShareButton和showShareDialog（只有当用户安装了版本7.0或更高版本的本地Facebook时）
• createShareMessageGenericTemplateContent(contentConfig: MessageGenericTemplateContent)适用于SendButton和showMessageDialog
• createShareMessageMediaTemplateContent(contentConfig: MessageMediaTemplateContent)适用于SendButton和showMessageDialog

您可以从https://developers.facebook.com/docs/sharing/overview#content和https://developers.facebook.com/docs/sharing/messenger#share-types获取更多信息

import {
    LoginEventData,
    getCurrentAccessToken,
    createShareLinksContent,
    createSharePhotosContent,
    createShareMessageGenericTemplateContent,
    MessageGenericTemplateImageAspectRatio,
    showShareDialog,
    showMessageDialog,
    canShareDialogShow,
    canMessageDialogShow
} from 'nativescript-facebook';

const linkContent = createShareLinksContent('https://www.nativescript.org',
            'Create Native iOS and Android Apps With JavaScript',
            {
                hashtag: '#Nativescript'
            });

// you can also pass in imageUrls as string[] in here
const logoImage = fromResource('logo');
const photosContent = createSharePhotosContent([logoImage], false, {
              hashtag: '#Nativescript'
          });
const GenericTemplate = createShareMessageGenericTemplateContent({
            element: {
                title: 'Nativescript',
                subtitle: 'Create Native iOS and Android Apps With JavaScript',
                imageUrl: 'https://d2odgkulk9w7if.cloudfront.net/images/default-source/home/how-it-works-min.png',
                button: {
                    title: 'Check Doc',
                    url: 'https://docs.nativescript.cn'
                },
                defaultAction: {
                    title: 'Go HomePage',
                    url: 'https://www.nativescript.org'
                }
            },
            // it seems android have to provide a pageId, otherwise the MessageDialog just wont show
            pageID: 'testestsett',
            imageAspectRatio: MessageGenericTemplateImageAspectRatio.Horizontal
        });

Facebook 分享按钮

<Facebook:ShareButton content="{{ linkContent }}"></Facebook:ShareButton>

Facebook 发送按钮

如果Messenger应用程序未安装，则Send按钮将被隐藏。请确保当此按钮隐藏时，您的应用程序布局是适当的。

<Facebook:SendButton content="{{ genericContent }}"></Facebook:SendButton>

程序化显示分享对话框

注意 如果用户未安装Facebook，则分享对话框将尝试回退到浏览页面分享（仅适用于linkContent）

showShareDialog(this.linkContent);
showMessageDialog(this.linkContent);
showShareDialog(this.linkContent, (error:Error, result:ShareCallbackResult) => {
    if(!error){
        console.log(result.android); // com.facebook.share.Sharer.Result
        console.log(result.ios); // (NSDictionary * ) The results from the sharer. This may be nil or empty.
    }
});

如果不能分享则隐藏自定义按钮

您可以使用此方法检查内容是否可以分享，如果不能，则隐藏自定义按钮

public canShowPhotosShareDialog = canShareDialogShow(this.photosContent);
public canShowGenericMessageDialog = canMessageDialogShow(this.genericContent);

<Button tap="{{ onShareDialogPhotos }}" text="Open Share dialog (photos)" visibility="{{ canShowPhotosShareDialog ? 'visible' : 'collapsed' }}"></Button>
<Button tap="{{ onSendGenericDialog }}" text="Share Message Generic Template" visibility="{{ canShowGenericMessageDialog ? 'visible' : 'collapsed' }}"></Button>

NativeScript Angular

初始化

在应用程序启动时调用 nativescript-facebook 模块的 init。

app.module.ts

...
import * as application from 'application';
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptFacebookModule } from "nativescript-facebook/angular";

let nsFacebook = require('nativescript-facebook');

application.on(application.launchEvent, function (args) {
    nsFacebook.init("{facebook_app_id}");
});
...
@NgModule({
    ...
    imports: [
        AppRoutingModule,
        NativeScriptModule,
        NativeScriptFacebookModule,
        ...
    ],
    ...
})
...

登录

Facebook 登录按钮

像在组件html文件中添加Facebook:LoginButton标签一样简单地在您的组件中添加Facebook登录按钮。然后您可以定义login事件处理器名称。以下示例中为onLogin。请记住$event参数。

pages/login/login.component.html

<StackLayout>
    <FacebookLoginButton (login)="onLogin($event)"></FacebookLoginButton>
</StackLayout>

在您的组件中实现onLogin事件处理器。它接收一个来自LoginEventData类型的参数。目前LoginEventData对象有两个属性：error和loginResponse。loginResponse是一个包含1个属性的对象 - token，它保存用于进一步身份验证的Facebook访问令牌。理想情况下，我们可以在未来添加一些其他属性，例如Facebook用户ID。

pages/login/login.component.ts

import { Component } from "@angular/core";
import * as Facebook from "nativescript-facebook";

@Component({
    selector: "login",
    templateUrl: "login.component.html",
})
export class LoginComponent { 
    onLogin(eventData: Facebook.LoginEventData) {
        if (eventData.error) {
            alert("Error during login: " + eventData.error);
        } else {
            console.log(eventData.loginResponse.token);
        }
    }
}

自定义登录按钮

在您的登录组件html中添加一个按钮并定义一个tap事件处理器。

pages/login/login.component.html

<StackLayout>
    <Button text="Login Button (custom)" (tap)="login()"></Button>
</StackLayout>

在组件中实现tap事件处理器，在这个例子中是login方法。它只需要调用来自插件的login方法。

pages/login/login.component.ts

import { Component } from "@angular/core";
import * as Facebook from "nativescript-facebook";

@Component({
    selector: "login",
    templateUrl: "login.component.html",
})
export class LoginComponent { 
    login() {
        Facebook.login((error, fbData) => {
            if (error) {
                alert("Error during login: " + error.message);
            } else {
                console.log(fbData.token);
            }
        });
    }
}

登出

Facebook 登出按钮

像在组件html文件中添加Facebook:LoginButton标签一样简单地在您的组件中添加Facebook注销按钮。然后您可以定义logout事件处理器名称。以下示例中为onLogout。请记住$event参数。

pages/home/home.component.html

<StackLayout>
    <FacebookLoginButton (logout)="onLogout($event)"></FacebookLoginButton>
</StackLayout>

实现onLogout事件处理器。

pages/home/home.component.ts

import { Component } from "@angular/core";
import * as Facebook from "nativescript-facebook";

@Component({
    selector: "home",
    templateUrl: "home.component.html",
})
export class HomeComponent { 
    onLogout(eventData: Facebook.LoginEventData) {
        if (eventData.error) {
            alert("Error during login: " + eventData.error);
        } else {
            console.log("logged out");
        }
    }
}

自定义登出按钮

在你的视图中添加一个按钮，并定义一个tap事件处理器。在这个例子中，是logout。

pages/home/home.component.html

<StackLayout>
    <Button text="Log out (custom)" (tap)="logout()"></Button>
</StackLayout>

在组件中实现tap事件处理器，在这个例子中是logout方法。它只需要调用来自插件的logout方法。以下示例中，插件中的logout方法被导入为fbLogout。

pages/home/home.component.ts

import { Component } from "@angular/core";
import { logout as fbLogout } from "nativescript-facebook";

@Component({
    selector: "home",
    templateUrl: "home.component.html",
})
export class AppComponent { 
  logout() {
    fbLogout(() => {
      console.log("logged out");
    });
  }
}

分享

创建分享内容

阅读Nativescript的章节

Facebook 分享按钮

<FacebookShareButton [content] = "linkContent"></FacebookShareButton>

Facebook 发送按钮

如果Messenger应用程序未安装，则Send按钮将被隐藏。请确保当此按钮隐藏时，您的应用程序布局是适当的。

<FacebookSendButton [content] = "genericContent"></FacebookSendButton>

程序化显示分享对话框

注意 如果用户未安装Facebook，则分享对话框将尝试回退到浏览页面分享（仅适用于linkContent）

showShareDialog(this.linkContent);
showMessageDialog(this.linkContent);
showShareDialog(this.linkContent, (error:Error, result:ShareCallbackResult) => {
    if(!error){
        console.log(result.android); // com.facebook.share.Sharer.Result
        console.log(result.ios); // (NSDictionary * ) The results from the sharer. This may be nil or empty.
    }
});

如果不能分享则隐藏自定义按钮

您可以使用此方法检查内容是否可以分享，如果不能，则隐藏自定义按钮

public canShowPhotosShareDialog = canShareDialogShow(this.photosContent);
public canShowGenericMessageDialog = canMessageDialogShow(this.genericContent);

<Button (tap) = "onShareDialogPhotos()" text = "Open Share dialog (photos)" *ngIf = "canShowPhotosShareDialog"></Button>
<Button (tap) = "onSendGenericDialog()" text = "Share Message Generic Template" *ngIf = "canShowGenericMessageDialog"></Button>

登录响应

提供给Facebook.login方法的回调函数接收2个参数：error和login响应对象。login响应对象具有以下结构

获取当前访问令牌

插件允许通过getCurrentAccessToken()方法获取当前访问令牌（如果有的话）。

基本分析

插件允许记录分析事件。在应用程序初始化时，您需要初始化分析

application.on(application.launchEvent, function (args) {
    nsFacebook.init("{facebook_app_id}");
    nsFacebook.initAnalytics();
});

事件记录

nsFacebook.logEvent('Lead');

带参数的事件记录

const value = 5;
const parameters = [{
    key: 'value',
    value: value.toString(),
}];

nsFacebook.logEvent(FundsAdded, parameters);

Graph API 示例

获取Facebook访问令牌后，您可以执行Graph API请求。以下示例中，在登录成功后，访问令牌存储在应用程序设置中。然后在主视图中检索它，并执行2个Graph API调用。

1. 获取已登录用户的Facebook ID
2. 获取登录用户头像（这是针对 NativeScript 问题的解决方案之一。 #2176）

export class HomeComponent {
    accessToken: string = appSettings.getString("access_token");
    userId: string;
    username: string;
    avatarUrl: string;

    constructor(private ref: ChangeDetectorRef, private navigationService: NavigationService) {
        // Get logged in user's info
        http.getJSON(config.FACEBOOK_GRAPH_API_URL + "/me?access_token=" + this.accessToken).then((res) => {
            this.username = res.name;
            this.userId = res.id;

            // Get logged in user's avatar
            // ref: https://github.com/NativeScript/NativeScript/issues/2176
            http.getJSON(config.FACEBOOK_GRAPH_API_URL + "/" + this.userId + "/picture?type=large&redirect=false&access_token=" + this.accessToken).then((res) => {
                this.avatarUrl = res.data.url;
                this.ref.detectChanges();
            }, function (err) {
                alert("Error getting user info: " + err);
            });
        }, function (err) {
            alert("Error getting user info: " + err);
        });
    }

此示例是演示应用程序的一部分，可以在以下位置观察 Nativescript 代码：这里，以及 NativeScript + Angular 的代码：这里。

发行说明

查看发布说明 这里

常见问题解答

查看我们的常见问题解答部分 这里。

贡献

我们喜欢 PRs！查看贡献指南。如果您想贡献，但不确定从哪里开始 - 查找标记为 help wanted 的问题。

获取帮助

请仅使用 GitHub 问题 来报告错误或请求新功能。对于一般问题和支持，请查看 Stack Overflow 或在我们的 NativeScript 社区 Slack 频道中向我们的专家提问。