Awesome
nativescript-facebook-login
A NativeScript module providing Facebook login for Android and iOS. The plugin is using the version 4.7.0 for iOS and the version 4.6.0 for Android
Prerequisites
NativeScript 1.3.0 for Android and iOS since we are using cocoapods and .aar libraries
Plugin architecture
.
├── 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
│ └── ...
└──
Installation
tns plugin add nativescript-facebook-login
iOS
For ios you need to add this to your app.ios to initialize the 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();
Add to your Info.plist(the one inside platforms/ios/yourApp) the Facebook App ID credentials
<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>
For more information you can consult the official Facebook page for iOS https://developers.facebook.com/docs/ios
Android
Add to your AndroidManifest.xml (the one inside platforms/android/src/main) the Facebook App ID credentials
<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>
Add to your Strings (platforms/android/src/main/res/values/strings.xml) your facebook app id
<string name="facebook_app_id">your-app-id</string>
For more information you can consult the official Facebook page for Android https://developers.facebook.com/docs/android
Common to iOS and Android
Require the plugin whenever you want to use it
var FacebookLoginHandler = require("nativescript-facebook-login");
Create the callbacks to handle the result of the 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);
}
And finally you can start the login process like this
//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"]);
Known issues
Sometimes the .aar library with the sdk for android don't get linked to the platform after installing the plugin. This end up in the error:
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
You can try to sync the platform tns livesync android
You can try cleaning the platform. -remove the plugin -remove the platform -add the plugin -add the platform in that order
You can try to add manually the dependency change the build.gradle (platforms/android/build.gradle) like this:
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'
....
....
}
Frequently asked questions
Why Xcode is not building my iOS platform?
After installing the plugin CocoaPods creates a .xcworkspace file, use this one to open the project in Xcode instead of the .xcodeproj