Capacitor Facebook Login

@freeedcom/capacitor-facebook-login

A fork of capacitor-community/facebook-login, which contains Limited Login implementation for iOS platform.

Installation

% npm i --save @freeedcom/capacitor-facebook-login
% npx cap update

Versions

Users of Capacitor v5 should use version v5 of the Plugin.

% npm install @freeedcom/capacitor-facebook-login@5

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 { FacebookLogin } from '@freeedcom/capacitor-facebook-login';

// use hook after platform dom ready
await FacebookLogin.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 {
  FacebookLogin,
  FacebookLoginResponse,
} from '@freeedcom/capacitor-facebook-login';

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}`);
}

Limited Login (iOS only)

Limited Login is a type of login, which is limited in terms of tracking users, with smaller set of available permissions It returns an AuthenticationToken that wraps an OpenID Connect token, which client then needs to validate. The token already contains all the requested data, so interaction with Graph API is not required.

import {
  FacebookLogin,
  FacebookLimitedLoginResponse,
} from '@freeedcom/capacitor-facebook-login';
import { v4 as uuidv4 } from 'uuid';

const FACEBOOK_PERMISSIONS = ['email', 'user_birthday', 'user_gender'];
const result = await (<FacebookLimitedLoginResponse>(
  FacebookLogin.loginLimitedly({
    permissions: FACEBOOK_PERMISSIONS,
    nonce: uuidv4(),
  })
));

if (result.authenticationToken) {
  // Login successful.
  console.log(
    `Facebook authentication token is ${result.authenticationToken.token}`,
  );
}

Logout

import { FacebookLogin } from '@freeedcom/capacitor-facebook-login';

await FacebookLogin.logout();

CurrentAccessToken

import {
  FacebookLogin,
  FacebookLoginResponse,
} from '@freeedcom/capacitor-facebook-login';

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

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

Current authentication token (Limited Login, iOS only)

import {
  FacebookLogin,
  FacebookCurrentAuthenticationTokenResponse,
} from '@freeedcom/capacitor-facebook-login';

const result = await (<FacebookCurrentAuthenticationTokenResponse>(
  FacebookLogin.getCurrentAuthenticationToken()
));

if (result.authenticationToken) {
  console.log(
    `Facebook authentication token is ${result.authenticationToken.token}`,
  );
}

getProfile

import {
  FacebookLogin,
  FacebookLoginResponse,
} from '@freeedcom/capacitor-facebook-login';

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

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

API

• initialize(...)
• login(...)
• loginLimitedly(...)
• logout()
• reauthorize()
• getCurrentAccessToken()
• getCurrentAuthenticationToken()
• getProfile(...)
• logEvent(...)
• setAutoLogAppEventsEnabled(...)
• setAdvertiserTrackingEnabled(...)
• setAdvertiserIDCollectionEnabled(...)
• Interfaces
• Type Aliases

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>

---

loginLimitedly(...)

loginLimitedly(options: { permissions: string[]; nonce: string; }) => Promise<FacebookLimitedLoginResponse>

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

Returns: Promise<FacebookLimitedLoginResponse>

---

logout()

logout() => Promise<void>

---

reauthorize()

reauthorize() => Promise<FacebookLoginResponse>

Returns: Promise<FacebookLoginResponse>

---

getCurrentAccessToken()

getCurrentAccessToken() => Promise<FacebookCurrentAccessTokenResponse>

Returns: Promise<FacebookCurrentAccessTokenResponse>

---

getCurrentAuthenticationToken()

getCurrentAuthenticationToken() => Promise<FacebookCurrentAuthenticationTokenResponse>

Returns: Promise<FacebookCurrentAuthenticationTokenResponse>

---

getProfile(...)

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

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

Returns: Promise<T>

---

logEvent(...)

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

Param	Type
options	{ eventName: string; }

---

setAutoLogAppEventsEnabled(...)

setAutoLogAppEventsEnabled(options: { enabled: boolean; }) => Promise<void>

Param	Type
options	{ enabled: boolean; }

---

setAdvertiserTrackingEnabled(...)

setAdvertiserTrackingEnabled(options: { enabled: boolean; }) => Promise<void>

Param	Type
options	{ enabled: boolean; }

---

setAdvertiserIDCollectionEnabled(...)

setAdvertiserIDCollectionEnabled(options: { enabled: boolean; }) => Promise<void>

Param	Type
options	{ enabled: boolean; }

---

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

FacebookLimitedLoginResponse

Prop	Type
authenticationToken	AuthenticationToken | null

AuthenticationToken

Prop	Type
token	string

FacebookCurrentAccessTokenResponse

Prop	Type
accessToken	AccessToken | null

FacebookCurrentAuthenticationTokenResponse

Prop	Type
authenticationToken	AuthenticationToken | null

Type Aliases

Partial

Make all properties in T optional

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

Record

Construct a type with a set of properties K of type T

{ [P in K]: T; }