GithubHelp home page GithubHelp logo
facebook-login

arnabdas / facebook-login Goto Github PK

View Code? Open in 1sVSCode Editor NEW

This project forked from capacitor-community/facebook-login

0.0 1.0 0.0 2.07 MB

Facebook Login support

License: MIT License

Ruby 4.44% Java 49.08% Objective-C 3.67% Swift 19.73% JavaScript 1.66% TypeScript 21.42%

facebook-login's Introduction

npm version

All Contributors

Please check branch 'feat/v3', if you want use capacitor [email protected]

capacitor-facebook-login

Capacitory community plugin for Facebook Login.

Demo

Demo code is here.

Maintainers

Maintainer GitHub Social Sponsoring Company
Masahiko Sakakibara rdlabo @rdlabo RELATION DESIGN LABO, GENERAL INC. ASSOCIATION

Mainteinance Status: Actively Maintained

Installation

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

To use yarn

% yarn add @capacitor-community/facebook-login
% npx cap update

If you use Capacitor 1.x

% npm install --save @rdlabo/[email protected]
% npx cap update

If you used Plugin 1.x

Plugin v2 has break changes. Please check how to update: https://github.com/capacitor-community/facebook-login/commit/4168982acf8454e3ac9ef7c51f5d68f46801422c

Android configuration

In file android/app/src/main/java/**/**/MainActivity.java, add the plugin to the initialization list:

this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
  [...]
  add(com.getcapacitor.community.facebooklogin.FacebookLogin.class);
  [...]
}});

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"/>

<activity
    android:name="com.facebook.FacebookActivity"
    android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
    android:label="@string/app_name" />

<activity
    android:name="com.facebook.CustomTabActivity"
    android:exported="true">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="@string/fb_login_protocol_scheme" />
    </intent-filter>
</activity>

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

<string name="facebook_app_id">[APP_ID]</string>
<string name="fb_login_protocol_scheme">fb[APP_ID]</string>

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

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

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 FBSDKCoreKit
import FBSDKCoreKit
  [...]
  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
  FBSDKCoreKit.ApplicationDelegate.shared.application(application, didFinishLaunchingWithOptions: launchOptions)
    return true
  }

  func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
    if CAPBridge.handleOpenUrl(url, options) {
        return FBSDKCoreKit.ApplicationDelegate.shared.application(
            app,
            open: url,
            sourceApplication: options[UIApplication.OpenURLOptionsKey.sourceApplication] as? String,
            annotation: options[UIApplication.OpenURLOptionsKey.annotation]
        )
    }
    else{
     return false
    }
  }

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>FacebookDisplayName</key>
<string>Wimlov</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

window.fbAsyncInit = function() {
  FB.init({
    appId: '[APP_ID]',
    cookie: true, // enable cookies to allow the server to access the session
    xfbml: true, // parse social plugins on this page
    version: 'v5.0' // use graph api current version
  });
};

// Load the SDK asynchronously
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "https://connect.facebook.net/en_US/sdk.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
  // Init Capacitor
import { registerWebPlugin } from '@capacitor/core';
import { FacebookLogin } from '@capacitor-community/facebook-login';
  ...
registerWebPlugin(FacebookLogin);

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!

Supported methods

Name Android iOS Web
login
logout
getCurrentAccessToken
getProfile

API

Login

import { Plugins } from '@capacitor/core';
import { FacebookLoginResponse } from '@capacitor-community/facebook-login';
const { FacebookLogin } = Plugins;

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}`);
} else {
  // Cancelled by user.
}

Logout

import { Plugins } from '@capacitor/core';
const { FacebookLogin } = Plugins;

await FacebookLogin.logout();

CurrentAccessToken

import { Plugins } from '@capacitor/core';
import { FacebookLoginResponse } from '@capacitor-community/facebook-login';
const { FacebookLogin } = Plugins;

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

if (result.accessToken) {
  console.log(`Facebook access token is ${result.accessToken.token}`);
} else {
  // Not logged in.
}

getProfile

import { Plugins } from '@capacitor/core';
import { FacebookLoginResponse } from '@capacitor-community/facebook-login';
const { FacebookLogin } = Plugins;

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

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

Contributors

Thanks goes to these wonderful people (emoji key):


Heo

💻

Artur Tiupa

💻

This project follows the all-contributors specification. Contributions of any kind welcome!

facebook-login's People

Contributors

rdlabo avatar vildhjarta8 avatar allcontributors[bot] avatar arnabdas avatar sebdej avatar bennyt2 avatar Nodonisko avatar leo6104 avatar bj1024 avatar dependabot[bot] avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.