A native plugin for Facebook Login
npm install @capacitor-community/facebook-login
@capacitor-community/facebook-login
Capacitor community plugin for native Facebook Login.
| Maintainer | GitHub | Social | Sponsoring Company |
| ------------------- | --------------------------------------- | ----------------------------------------- | ---------------------------------------------- |
| Masahiko Sakakibara | rdlabo | @rdlabo | RELATION DESIGN LABO, GENERAL INC. ASSOCIATION |
Made with contributors-img.
``bash`
% npm i --save @capacitor-community/facebook-login
% npx cap update
Users of Capacitor v6 should use version v6 of the Plugin.
`bash`
% npm install @capacitor-community/facebook-login@6
In file android/app/src/main/AndroidManifest.xml, add the following XML elements under :
`xml`
In file android/app/src/main/res/values/strings.xml add the following lines :
`xml`
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
This plugin will use the following project variables (defined in your app's variables.gradle file):
- facebookSDKVersion: version of com.facebook.android:facebook-login (default: 18.1.3)
In file ios/App/Podfile add the following:
`diff`
target 'App' do
capacitor_pods
# Add your Pods here
+ pod 'FBSDKCoreKit'
end
In file ios/App/App/AppDelegate.swift add or replace the following:
`swift
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 :
`xml
`
More information can be found here: https://developers.facebook.com/docs/facebook-login/ios
`typescript
import { FacebookLogin } from '@capacitor-community/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!
`ts
import {
FacebookLogin,
FacebookLoginResponse,
} from '@capacitor-community/facebook-login';
const FACEBOOK_PERMISSIONS = [
'email',
'user_birthday',
'user_photos',
'user_gender',
];
const result = await (
FacebookLogin.login({ permissions: FACEBOOK_PERMISSIONS })
));
if (result.accessToken) {
// Login successful.
console.log(Facebook access token is ${result.accessToken.token});`
}
`ts
import { FacebookLogin } from '@capacitor-community/facebook-login';
await FacebookLogin.logout();
`
`ts
import {
FacebookLogin,
FacebookLoginResponse,
} from '@capacitor-community/facebook-login';
const result = await (
FacebookLogin.getCurrentAccessToken()
));
if (result.accessToken) {
console.log(Facebook access token is ${result.accessToken.token});`
}
`ts
import {
FacebookLogin,
FacebookLoginResponse,
} from '@capacitor-community/facebook-login';
const result = await FacebookLogin.getProfile<{
email: string;
}>({ fields: ['email'] });
console.log(Facebook user's email is ${result.email});`
* initialize(...)
* login(...)
* logout()
* reauthorize()
* getCurrentAccessToken()
* getProfile(...)
* logEvent(...)
* setAutoLogAppEventsEnabled(...)
* setAdvertiserTrackingEnabled(...)
* setAdvertiserIDCollectionEnabled(...)
* Interfaces
* Type Aliases
`typescript`
initialize(options: Partial
| Param | Type |
| ------------- | ------------------------------------------------------------------------------------------------------------- |
| options | Partial<FacebookConfiguration> |
--------------------
`typescript`
login(options: { permissions: string[]; tracking?: 'limited' | 'enabled'; nonce?: string; }) => Promise
| Param | Type |
| ------------- | ------------------------------------------------------------------------------------------ |
| options | { permissions: string[]; tracking?: 'limited' \| 'enabled'; nonce?: string; } |
Returns: Promise<FacebookLoginResponse>
--------------------
`typescript`
logout() => Promise
--------------------
`typescript`
reauthorize() => Promise
Returns: Promise<FacebookLoginResponse>
--------------------
`typescript`
getCurrentAccessToken() => Promise
Returns: Promise<FacebookCurrentAccessTokenResponse>
--------------------
`typescript`
getProfile
| Param | Type |
| ------------- | ------------------------------------------- |
| options | { fields: readonly string[]; } |
Returns: Promise<T>
--------------------
`typescript`
logEvent(options: { eventName: string; }) => Promise
| Param | Type |
| ------------- | ----------------------------------- |
| options | { eventName: string; } |
--------------------
`typescript`
setAutoLogAppEventsEnabled(options: { enabled: boolean; }) => Promise
| Param | Type |
| ------------- | ---------------------------------- |
| options | { enabled: boolean; } |
--------------------
`typescript`
setAdvertiserTrackingEnabled(options: { enabled: boolean; }) => Promise
| Param | Type |
| ------------- | ---------------------------------- |
| options | { enabled: boolean; } |
--------------------
`typescript`
setAdvertiserIDCollectionEnabled(options: { enabled: boolean; }) => Promise
| Param | Type |
| ------------- | ---------------------------------- |
| options | { enabled: boolean; } |
--------------------
#### 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 |
#### 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;
}