capacitor-facebook-login
Facebook Login plugin for Capacitor. This repository fork from @oxylian/capacitor-facebook-login .
Demo
DONATE THIS PROJECT
Thanks for considering donate.
If this plugin help you, please share your app income. This help developing this plugin.This also help me easily determine how much time I would spend on the projects each month.
| TYPE | AMOUNT | LINK | |
|---|---|---|---|
| PayPal.me | Once | Any | Donate |
| PayPal | Subscription | $15/month | Donate |
| PayPal | Subscription | $30/month | Donate |
| PayPal | Subscription | $50/month | Donate |
Installation
$ npm i --save @rdlabo/capacitor-facebook-loginIf you use Capacitor 1.x
$ npm install --save @rdlabo/capacitor-facebook-login@1.5.0
Android configuration
In file android/app/src/main/java/**/**/MainActivity.java, add the plugin to the initialization list:
this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
[...]
+ add(jp.rdlabo.capacitor.plugin.facebook.FacebookLogin.class);
[...]
}});In file android/app/src/main/AndroidManifest.xml, add the following XML elements under <manifest><application> :
+ <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:label="@string/app_name" />
+
+ <activity
+ android:name="com.facebook.CustomTabActivity"
+ android:exported="true">
+ <intent-filter>
+ <action android:name="android.intent.action.VIEW" />
+ <category android:name="android.intent.category.DEFAULT" />
+ <category android:name="android.intent.category.BROWSABLE" />
+ <data android:scheme="@string/fb_login_protocol_scheme" />
+ </intent-filter>
+ </activity>In file android/app/src/main/res/values/strings.xml add the following lines :
+ <string name="facebook_app_id">[APP_ID]</string>
+ <string name="fb_login_protocol_scheme">fb[APP_ID]</string>Don't forget to replace [APP_ID] by your Facebook application Id.
More information can be found here: https://developers.facebook.com/docs/facebook-login/android
iOS configuration
In file ios/App/App/AppDelegate.swift add or replace the following:
+ import FacebookCore
+ import FBSDKCoreKit
[...]
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
+ FBSDKCoreKit.ApplicationDelegate.shared.application(application, didFinishLaunchingWithOptions: launchOptions)
return true
}
func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
- return CAPBridge.handleOpenUrl(url, options)
+ if CAPBridge.handleOpenUrl(url, options) {
+ return FBSDKCoreKit.ApplicationDelegate.shared.application(app, open: url, options: options)
+ }
+ else{
+ return false
+ }
}Add the following in the ios/App/App/info.plist file:
+ <key>CFBundleURLTypes</key>
+ <array>
+ <dict>
+ <key>CFBundleURLSchemes</key>
+ <array>
+ <string>fb[APP_ID]</string>
+ </array>
+ </dict>
+ </array>
+ <key>FacebookAppID</key>
+ <string>[APP_ID]</string>
+ <key>FacebookDisplayName</key>
+ <string>Wimlov</string>
+ <key>LSApplicationQueriesSchemes</key>
+ <array>
+ <string>fbapi</string>
+ <string>fbauth2</string>
+ </array>More information can be found here: https://developers.facebook.com/docs/facebook-login/ios
Web configuration
+ window.fbAsyncInit = function() {
+ FB.init({
+ appId: '[APP_ID]',
+ 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')); // Init Capacitor
+ import { registerWebPlugin } from '@capacitor/core';
+ import { FacebookLogin } from '@rdlabo/capacitor-facebook-login';
...
+ registerWebPlugin(FacebookLogin);More information can be found here: https://developers.facebook.com/docs/facebook-login/web And you must confirm return type at https://github.com/rdlabo/capacitor-facebook-login/blob/master/src/web.ts#L55-L57 not same type for default web facebook login!
API
Login
import { Plugins } from '@capacitor/core';
import { FacebookLoginResponse } from '@rdlabo/capacitor-facebook-login';
const { FacebookLogin } = Plugins;
const FACEBOOK_PERMISSIONS = ['email', 'user_birthday', 'user_photos', 'user_gender'];
const result = await <FacebookLoginResponse>FacebookLogin.login({ permissions: FACEBOOK_PERMISSIONS });
if (result.accessToken) {
// Login successful.
console.log(`Facebook access token is ${result.accessToken.token}`);
} else {
// Cancelled by user.
}Logout
import { Plugins } from '@capacitor/core';
const { FacebookLogin } = Plugins;
await FacebookLogin.logout();CurrentAccessToken
import { Plugins } from '@capacitor/core';
import { FacebookLoginResponse } from '@rdlabo/capacitor-facebook-login';
const { FacebookLogin } = Plugins;
const result = await <FacebookLoginResponse>FacebookLogin.getCurrentAccessToken();
if (result.accessToken) {
console.log(`Facebook access token is ${result.accessToken.token}`);
} else {
// Not logged in.
}