商城
作者 NativeScript.org
nativescript-facebook-login
作者：Antonio Cueva | v1.0.1
为 Android 和 iOS 提供脸书登录功能的 NativeScript 模块
npm i --save nativescript-facebook-login

nativescript-facebook-login

为 Android 和 iOS 提供脸书登录功能的 NativeScript 模块。该插件使用 iOS 的 4.7.0 版本和 Android 的 4.6.0 版本

先决条件

由于我们使用 Cocoapods 和 .aar 库，因此需要 Android 和 iOS 的 NativeScript 1.3.0

插件架构

.
├── app  <----------------run npm install from here
│   ├── node_modules
│   │   └── nativescript-facebook-login <-- The install will place the module's code here
│   │       ├──platforms
│   │       │  ├──android
│   │       │  │  └─libs
│   │       │  │    └─facebook-release.aar <-- This is the SDK for android as a .aar library
│   │       │  └──ios
│   │       │     └─Podfile <-- This is the SDK for iOS as a cocoapods dependency 
│   │       ├──facebook-handler.android.js
│   │       ├──facebook-handler.ios.js 
│   │       ├──LICENSE
│   │       ├──README
│   │       └──package.json
│   ├── package.json <-- The install will register "nativescript-facebook-login as a dependency here
│   └── tns_modules
│       └── ...
└──

安装

tns plugin add nativescript-facebook-login

iOS

对于 iOS，您需要在您的 app.ios 中添加以下内容以初始化 SDK

var application = require("application");

class MyDelegate extends UIResponder implements UIApplicationDelegate {
  public static ObjCProtocols = [UIApplicationDelegate];

  applicationDidFinishLaunchingWithOptions(application: UIApplication, launchOptions: NSDictionary): boolean {
   return FBSDKApplicationDelegate.sharedInstance().applicationDidFinishLaunchingWithOptions(application, launchOptions);
  }
  
  applicationOpenURLSourceApplicationAnnotation(application, url, sourceApplication, annotation) {
    return FBSDKApplicationDelegate.sharedInstance().applicationOpenURLSourceApplicationAnnotation(application, url, sourceApplication, annotation);
  }
  
  applicationDidBecomeActive(application: UIApplication): void {
      FBSDKAppEvents.activateApp();
  }

  applicationWillTerminate(application: UIApplication): void {
    //Do something you want here
  }

  applicationDidEnterBackground(application: UIApplication): void {
    //Do something you want here
  }
}

application.ios.delegate = MyDelegate;
application.start();

将 Facebook App ID 凭证添加到您的 Info.plist（位于 platforms/ios/yourApp 中）


<key>CFBundleURLTypes</key>
	<array>
		<dict>
			<key>CFBundleURLSchemes</key>
			<array>
        <string>fb{your-app-id}</string>
			</array>
		</dict>
	</array>
	<key>CFBundleVersion</key>
	<string>1.0</string>
	<key>FacebookAppID</key>
  <string>{your-app-id}</string>
	<key>FacebookDisplayName</key>
	<string>FacebookLoginDemo</string>
	<key>LSApplicationQueriesSchemes</key>
	<array>
		<string>fbauth2</string>
		<string>fbapi</string>
		<string>fb-messenger-api</string>
		<string>fbshareextension</string>
	</array>

有关更多信息，您可以参考官方 Facebook iOS 页面 https://developers.facebook.com/docs/ios

Android

将 Facebook App ID 凭证添加到您的 AndroidManifest.xml（位于 platforms/android/src/main 中）

<uses-permission android:name="android.permission.INTERNET"/>
application android:label="@string/app_name" ...>
    ...
    <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
    <activity android:name="com.facebook.FacebookActivity"
          android:configChanges=
                 "keyboard|keyboardHidden|screenLayout|screenSize|orientation"
          android:theme="@android:style/Theme.Translucent.NoTitleBar"
          android:label="@string/app_name" />
</application>

将您的 Facebook App ID 添加到您的 Strings（位于 platforms/android/src/main/res/values/strings.xml 中）

<string name="facebook_app_id">your-app-id</string>

有关更多信息，您可以参考官方 Facebook Android 页面 https://developers.facebook.com/docs/android

适用于 iOS 和 Android 的通用信息

需要使用插件时才加载插件

var FacebookLoginHandler = require("nativescript-facebook-login");

创建回调以处理登录结果

 var successCallback = function(result) {
            //Do something with the result, for example get the AccessToken
            var token;
            if (topmost().android){
              token = result.getAccessToken().getToken();
            }
            else if (topmost().ios){
              token = result.token.tokenString
            }
            alert(token);
        }

        var cancelCallback = function() {
            alert("Login was cancelled");
        }

        var failCallback = function(error) {
            var errorMessage = "Error with Facebook";
           //Try to get as much information as possible from error
           if (error) {
                if (topmost().ios) {
                    if (error.localizedDescription) {
                        errorMessage += ": " + error.localizedDescription;
                    }
                    else if (error.code) {
                        errorMessage += ": Code " + error.code;
                    }
                    else {
                        errorMessage += ": " + error;   
                    }
                }
                else if (topmost().android) {
                    if (error.getErrorMessage) {
                        errorMessage += ": " + error.getErrorMessage();
                    }
                    else if (error.getErrorCode) {
                        errorMessage += ": Code " + error.getErrorCode();
                    }
                    else {
                        errorMessage += ": " + error;   
                    }
                }
            }
            alert(errorMessage);
        }

然后您可以通过以下方式启动登录过程

  //Here we select the login behaviour

    //Recomended system account with native fallback for iOS
    if (topmost().ios) {
        FacebookLoginHandler.init(2);
    }
    //Recomended default for android 
    else if (topmost().android) {
        FacebookLoginHandler.init();
    }
    //Register our callbacks
    FacebookLoginHandler.registerCallback(successCallback, cancelCallback, failCallback);
    //Start the login process
    FacebookLoginHandler.logInWithPublishPermissions(["publish_actions"]);

已知问题

有时在安装插件后，.aar 库与 Android 的 SDK 没有链接到平台。这会导致以下错误
TypeError: Cannot read property 'FacebookSdk' of undefined File: "/data/data/com.ladeezfirstmedia.ThisOrThat/files/app/tns_modules/nativescript-facebook-login/facebook-handler.js line: 9 column:16

您可以尝试同步平台 tns livesync android

您可以尝试清理平台。-移除插件 -移除平台 -添加插件 -按此顺序添加平台

您可以尝试手动添加依赖项，更改 build.gradle（位于 platforms/android/build.gradle）如下

dependencies {
	....
        ....
    compile "com.android.support:support-v4:$suppotVer"
    compile "com.android.support:appcompat-v7:$suppotVer"

    //Facebook sdk
    compile 'com.facebook.android:facebook-android-sdk:4.6.0'
     	....
        ....
    
}

常见问题解答

为什么 Xcode 无法构建我的 iOS 平台？

安装插件后，CocoaPods 创建了一个 .xcworkspace 文件，请使用此文件在 Xcode 中打开项目，而不是 .xcodeproj