React Native - Facebook Login

1. Install the library

yarn add react-native-fbsdk
$ cd ios/ && pod install

3. Configure projects

3.1 Android

Before you can run the project, follow the Getting Started Guide for Facebook Android SDK to set up a Facebook app. You can skip the build.gradle changes since that's taken care of by the rnpm link step above, but make sure you follow the rest of the steps such as updating strings.xml and AndroidManifest.xml.

3.2 iOS

Follow steps 3 and 4 in the Getting Started Guide for Facebook SDK for iOS.

If you're not using cocoapods already you can also follow step 1.1 to set it up.

If you're using React Native's RCTLinkingManager

The AppDelegate.m file can only have one method for openUrl. If you're also using RCTLinkingManager to handle deep links, you should handle both results in your openUrl method.

- (BOOL)application:(UIApplication *)app
            openURL:(NSURL *)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  if ([[FBSDKApplicationDelegate sharedInstance] application:app openURL:url options:options]) {
    return YES;
  }

  if ([RCTLinkingManager application:app openURL:url options:options]) {
    return YES;
  }

  return NO;
}

配置 info.plist 和專案設定

將 XML 程式碼片段複製並貼上你檔案(<dict>...</dict>)的內文中。

<key>CFBundleURLTypes</key>
<array>
  <dict>
  <key>CFBundleURLSchemes</key>
  <array>
    <string>fb{{facebook_app_id}}</string>
  </array>
  </dict>
</array>
<key>FacebookAppID</key>
<string>{{facebook_app_id}}</string>
<key>FacebookDisplayName</key>
<string>{{facebook_display_name}}</string>
<key>LSApplicationQueriesSchemes</key>
<array>
  <string>fbapi</string>
  <string>fb-messenger-api</string>
  <string>fbauth2</string>
  <string>fbshareextension</string>
</array>

Replace facebook_app_id and facebook_display_name

配置 AppDelegate.m 檔案中的 Facebook SDK:

#import <FBSDKCoreKit/FBSDKCoreKit.h>

- (void)applicationDidBecomeActive:(UIApplication *)application {
  [FBSDKAppEvents activateApp];
}

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [[FBSDKApplicationDelegate sharedInstance] application:application
                           didFinishLaunchingWithOptions:launchOptions];
  return YES;
}

- (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
  sourceApplication:(NSString *)sourceApplication
         annotation:(id)annotation {
  return [[FBSDKApplicationDelegate sharedInstance] application:application
                                                         openURL:url
                                               sourceApplication:sourceApplication
                                                      annotation:annotation];
}

Last updated

Was this helpful?