@bigin/ns-facebook-login

本插件基于 nativescript-facebook。我们升级到 NS7 并添加了一些调整以使其正常工作。

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

安装

ns plugin add @bigin/ns-facebook-login

配置

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 App ID。有关如何获取 Facebook App 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:LoginButton 标签一样简单地将 Facebook 登录按钮添加到您的视图中。然后您可以定义 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 对象具有 2 个属性：error 和 loginResponse。loginResponse 是一个包含 1 个属性的对象 - 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:LoginButton 标签一样简单地将 Facebook 登出按钮添加到您的视图中。然后您可以定义 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>

在视图模型中实现点击事件处理程序，在本例中为 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（仅当用户已安装原生 Facebook，版本 7.0 或更高时）
• 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 应用未安装，则隐藏发送按钮。请确保当此按钮隐藏时，您的应用布局是适当的。

<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 对象具有 2 个属性：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>

在组件中实现点击事件处理程序，在本例中为 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>

在组件中实现点击事件处理程序，在本例中为 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 应用未安装，则隐藏发送按钮。请确保当此按钮隐藏时，您的应用布局是适当的。

<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 和登录响应对象。登录响应对象具有以下结构

获取当前访问令牌

插件允许通过 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的代码： 此处。

发行说明

查看发行说明 此处

常见问题解答

查看我们的常见问题解答部分 此处。

贡献

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

获取帮助

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

许可证

Apache许可证版本2.0