Facebook Login
@capacitor-community/facebook-login
Capacitor community plugin for native Facebook Login.
## Maintainers
| Maintainer | GitHub | Social | Sponsoring Company |
| ------------------- | --------------------------------------- | ----------------------------------------- | ---------------------------------------------- |
| Masahiko Sakakibara | [rdlabo](https://github.com/rdlabo) | [@rdlabo](https://twitter.com/rdlabo) | RELATION DESIGN LABO, GENERAL INC. ASSOCIATION |
## Contributors ✨
Made with [contributors-img](https://contrib.rocks).
## Demo
[Demo code is here.](./demo/angular)
## Installation
```bash
% npm i --save @capacitor-community/facebook-login
% npx cap update
```
### Versions
Users of Capacitor v6 should use version v6 of the Plugin.
```bash
% npm install @capacitor-community/facebook-login@6
```
## Configuration
### Android configuration
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
[APP_ID]
[CLIENT_TOKEN]
```
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
### Variables
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`)
### iOS configuration
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
CFBundleURLTypes
CFBundleURLSchemes
fb[APP_ID]
FacebookAppID
[APP_ID]
FacebookClientToken
[CLIENT_TOKEN]
FacebookDisplayName
[APP_NAME]
LSApplicationQueriesSchemes
fbapi
fbapi20130214
fbapi20130410
fbapi20130702
fbapi20131010
fbapi20131219
fbapi20140410
fbapi20140116
fbapi20150313
fbapi20150629
fbapi20160328
fbauth
fb-messenger-share-api
fbauth2
fbshareextension
```
More information can be found here: https://developers.facebook.com/docs/facebook-login/ios
### Web configuration
```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!
## Example
### 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}`);
}
```
### Logout
```ts
import { FacebookLogin } from '@capacitor-community/facebook-login';
await FacebookLogin.logout();
```
### CurrentAccessToken
```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}`);
}
```
### getProfile
```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}`);
```
## API
* [`initialize(...)`](#initialize)
* [`login(...)`](#login)
* [`logout()`](#logout)
* [`reauthorize()`](#reauthorize)
* [`getCurrentAccessToken()`](#getcurrentaccesstoken)
* [`getProfile(...)`](#getprofile)
* [`logEvent(...)`](#logevent)
* [`setAutoLogAppEventsEnabled(...)`](#setautologappeventsenabled)
* [`setAdvertiserTrackingEnabled(...)`](#setadvertisertrackingenabled)
* [`setAdvertiserIDCollectionEnabled(...)`](#setadvertiseridcollectionenabled)
* [Interfaces](#interfaces)
* [Type Aliases](#type-aliases)
### initialize(...)
```typescript
initialize(options: Partial) => Promise
```
| Param | Type |
| ------------- | ------------------------------------------------------------------------------------------------------------- |
| **`options`** | Partial<FacebookConfiguration> |
--------------------
### login(...)
```typescript
login(options: { permissions: string[]; tracking?: 'limited' | 'enabled'; nonce?: string; }) => Promise
```
| Param | Type |
| ------------- | ------------------------------------------------------------------------------------------ |
| **`options`** | { permissions: string[]; tracking?: 'limited' \| 'enabled'; nonce?: string; } |
**Returns:** Promise<FacebookLoginResponse>
--------------------
### logout()
```typescript
logout() => Promise
```
--------------------
### reauthorize()
```typescript
reauthorize() => Promise
```
**Returns:** Promise<FacebookLoginResponse>
--------------------
### getCurrentAccessToken()
```typescript
getCurrentAccessToken() => Promise
```
**Returns:** Promise<FacebookCurrentAccessTokenResponse>
--------------------
### getProfile(...)
```typescript
getProfile>(options: { fields: readonly string[]; }) => Promise
```
| Param | Type |
| ------------- | ------------------------------------------- |
| **`options`** | { fields: readonly string[]; } |
**Returns:** Promise<T>
--------------------
### logEvent(...)
```typescript
logEvent(options: { eventName: string; }) => Promise
```
| Param | Type |
| ------------- | ----------------------------------- |
| **`options`** | { eventName: string; } |
--------------------
### setAutoLogAppEventsEnabled(...)
```typescript
setAutoLogAppEventsEnabled(options: { enabled: boolean; }) => Promise
```
| Param | Type |
| ------------- | ---------------------------------- |
| **`options`** | { enabled: boolean; } |
--------------------
### setAdvertiserTrackingEnabled(...)
```typescript
setAdvertiserTrackingEnabled(options: { enabled: boolean; }) => Promise
```
| Param | Type |
| ------------- | ---------------------------------- |
| **`options`** | { enabled: boolean; } |
--------------------
### setAdvertiserIDCollectionEnabled(...)
```typescript
setAdvertiserIDCollectionEnabled(options: { enabled: boolean; }) => Promise
```
| 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 |
#### FacebookCurrentAccessTokenResponse
| Prop | Type |
| ----------------- | ----------------------------------------------------------- |
| **`accessToken`** | AccessToken \| 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;
}