capacitor-plugin-facebook-login-enhance

IMPORTANT!!!

Some enhancements for Facebook, please refer to capacitor-community/facebook-login

Dependency version

If you want to know facebook library version, you should check:

iOS
Android

Installation

npm install capacitor-plugin-facebook-login-enhance
npx cap sync

Android configuration

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"/>
<meta-data android:name="com.facebook.sdk.ClientToken" android:value="@string/facebook_client_token"/>

In file android/app/src/main/res/values/strings.xml add the following lines :

<string name="facebook_app_id">[APP_ID]</string>
<string name="facebook_client_token">[CLIENT_TOKEN]</string>

Don't forget to replace [APP_ID] and [CLIENT_TOKEN] by your Facebook application Id.

More information can be found here: https://developers.facebook.com/docs/android/getting-started

If you have trouble.

Please restart Android Studio, and do clean build.

iOS configuration

In file ios/App/App/AppDelegate.swift add or replace the following:

import UIKit
import Capacitor
import FBSDKCoreKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        FBSDKCoreKit.ApplicationDelegate.shared.application(
            application,
            didFinishLaunchingWithOptions: launchOptions
        )

        return true
    }

    ...

    func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
        // Called when the app was launched with a url. Feel free to add additional processing here,
        // but if you want the App API to support tracking app url opens, make sure to keep this call
        if (FBSDKCoreKit.ApplicationDelegate.shared.application(
            app,
            open: url,
            sourceApplication: options[UIApplication.OpenURLOptionsKey.sourceApplication] as? String,
            annotation: options[UIApplication.OpenURLOptionsKey.annotation]
        )) {
            return true;
        } else {
            return ApplicationDelegateProxy.shared.application(app, open: url, options: options)
        }
    }
}

Add the following in the ios/App/App/info.plist file inside of the outermost <dict>:

<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>FacebookClientToken</key>
<string>[CLIENT_TOKEN]</string>
<key>FacebookDisplayName</key>
<string>[APP_NAME]</string>
<key>LSApplicationQueriesSchemes</key>
<array>
    <string>fbapi</string>
    <string>fbapi20130214</string>
    <string>fbapi20130410</string>
    <string>fbapi20130702</string>
    <string>fbapi20131010</string>
    <string>fbapi20131219</string>
    <string>fbapi20140410</string>
    <string>fbapi20140116</string>
    <string>fbapi20150313</string>
    <string>fbapi20150629</string>
    <string>fbapi20160328</string>
    <string>fbauth</string>
    <string>fb-messenger-share-api</string>
    <string>fbauth2</string>
    <string>fbshareextension</string>
</array>

More information can be found here: https://developers.facebook.com/docs/facebook-login/ios

Web configuration

import {FacebookLoginEnhance} from "capacitor-plugin-facebook-login-enhance";

// use hook after platform dom ready
await FacebookLoginEnhance.initialize({appId: '105890006170720'});

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!

Example

Login

import { FacebookLoginEnhance, FacebookLoginResponse } from 'capacitor-plugin-facebook-login-enhance';

const FACEBOOK_PERMISSIONS = ['email', 'user_birthday', 'user_photos', 'user_gender'];
const result = await <FacebookLoginResponse>FacebookLoginEnhance.login({ permissions: FACEBOOK_PERMISSIONS });

if (result.accessToken) {
  // Login successful.
  console.log(`Facebook access token is ${result.accessToken.token}`);
}

Logout

import { FacebookLoginEnhance } from 'capacitor-plugin-facebook-login-enhance';

await FacebookLoginEnhance.logout();

CurrentAccessToken

import { FacebookLoginEnhance, FacebookLoginResponse } from 'capacitor-plugin-facebook-login-enhance';

const result = await <FacebookLoginResponse>FacebookLoginEnhance.getCurrentAccessToken();

if (result.accessToken) {
  console.log(`Facebook access token is ${result.accessToken.token}`);
}

getProfile

import { FacebookLoginEnhance, FacebookLoginResponse } from 'capacitor-plugin-facebook-login-enhance';

const result = await FacebookLoginEnhance.getProfile<{
      email: string;
    }>({ fields: ['email'] });

console.log(`Facebook user's email is ${result.email}`);

Enhance

* logEvent

initialize(...)

initialize(options: Partial<FacebookConfiguration>) => Promise<void>

Param	Type
`options`	`Partial<FacebookConfiguration>`

login(...)

login(options: { permissions: string[]; }) => Promise<FacebookLoginResponse>

Param	Type
`options`	`{ permissions: string[]; }`

Returns: Promise<FacebookLoginResponse>

logout()

logout() => Promise<void>

getCurrentAccessToken()

getCurrentAccessToken() => Promise<FacebookCurrentAccessTokenResponse>

Returns: Promise<FacebookCurrentAccessTokenResponse>

getProfile(...)

getProfile<T extends object>(options: { fields: readonly string[]; }) => Promise<T>

Param	Type
`options`	`{ fields: readonly string[]; }`

Returns: Promise<T>

logEvent(...)

logEvent(options: { eventName: string; parameters: any; }) => Promise<void>

Param	Type
`options`	`{ eventName: string; parameters: any; }`

Interfaces

FacebookConfiguration

Prop	Type
`appId`	`string`
`autoLogAppEvents`	`boolean`
`xfbml`	`boolean`
`version`	`string`
`locale`	`string`

FacebookLoginResponse

Prop	Type
`accessToken`	`AccessToken \| null`
`recentlyGrantedPermissions`	`string[]`
`recentlyDeniedPermissions`	`string[]`

AccessToken

Prop	Type
`applicationId`	`string`
`declinedPermissions`	`string[]`
`expires`	`string`
`isExpired`	`boolean`
`lastRefresh`	`string`
`permissions`	`string[]`
`token`	`string`
`userId`	`string`

FacebookCurrentAccessTokenResponse

Prop	Type
`accessToken`	`AccessToken \| null`

Type Aliases

Partial

Make all properties in T optional

{ [P in keyof T]?: T[P]; }