Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/capacitor-community/facebook-login

Facebook Login support
https://github.com/capacitor-community/facebook-login

Last synced: 3 months ago
JSON representation

Facebook Login support

Awesome Lists containing this project

README

        



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.](https://github.com/capacitor-community/facebook-login/tree/master/demo/angular)

## Dependency version

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

- [iOS](https://github.com/capacitor-community/facebook-login/blob/master/CapacitorCommunityFacebookLogin.podspec#L18-L19)
- [Android](https://github.com/capacitor-community/facebook-login/blob/master/android/build.gradle#L52)

## Installation

```bash
% npm i --save @capacitor-community/facebook-login
% npx cap update
```

### Versions

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

```bash
% npm install @capacitor-community/facebook-login@5
```

### 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

#### 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:

```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[]; }) => Promise
```

| Param | Type |
| ------------- | --------------------------------------- |
| **`options`** | { permissions: 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;
}