ReactNative Facebookログイン

react-native-facebook-login でFacebookログイン

公式に出ているFBSDKではなく、react-native-facebook-loginを使ってのログイン機能の実装メモ。

こちらの方がセットアップが簡単な印象。

iOS

Facebook SDK の設定 参考

Info.plistの設定

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>fb{your-app-id}</string>
    </array>
  </dict>
</array>
<key>FacebookAppID</key>
<string>{your-app-id}</string>
<key>FacebookDisplayName</key>
<string>{your-app-name}</string>
<key>LSApplicationQueriesSchemes</key>
<array>
  <string>fbapi</string>
  <string>fb-messenger-api</string>
  <string>fbauth2</string>
  <string>fbshareextension</string>
</array>
<key>NSPhotoLibraryUsageDescription</key>
<string>{human-readable reason for photo access}</string>

framework追加

1. Xcodeでプロジェクトを開く

2. プロジェクトのルートで右クリック → New Group を選択 → Frameworks という名前でグループ作成

3. 以下のディレクトリ下にある .frameworkファイルを 上記(2)で作ったグループへ追加

node_modules/react-native-facebook-login/FacebookSDK

ビルド設定

Build Settings → Search Paths → Framework Search Paths に以下を追加

$(SRCROOT)/../node_modules/react-native-facebook-login/FacebookSDK

AppDelegate.mの修正

• import追加

#import <FBSDKCoreKit/FBSDKCoreKit.h>
#import <FBSDKLoginKit/FBSDKLoginKit.h>

• application didFinishLaunchingWithOptions の戻り値修正

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  // ...
  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [[UIViewController alloc] init];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];

  // return YES;
  return [[FBSDKApplicationDelegate sharedInstance] application:application
                                    didFinishLaunchingWithOptions:launchOptions];
}

• 以下2つのメソッドを追加

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

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

Android 参考

• react-native link の後に string.xml を修正

※もしlinkで上手くgradleやMainApplication.javaに追加されてなかったら、見出しの参考と同じように実装してください。

<!-- file: android/app/src/main/res/values/strings.xml -->
<resources>
    <string name="app_name">{Your_App_Name}</string>
    <string name="fb_app_id">{FB_APP_ID}</string>
    <string name="fb_login_protocol_scheme">fb{FB_APP_ID}</string>
</resources>

• AndroidManifest.xmlの修正

<!-- file: android/app/src/main/AndroidManifest.xml -->
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:tools="http://schemas.android.com/tools"
          package="com.your.app.namespace">

    ...

    <application
            android:allowBackup="true"
            android:label="@string/app_name"
            android:icon="@mipmap/ic_launcher"
            android:theme="@style/AppTheme">
        ...

        <!--add FacebookActivity-->
        <activity tools:replace="android:theme"
                android:name="com.facebook.FacebookActivity"
                android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
                android:label="@string/app_name"
                android:theme="@android:style/Theme.Translucent.NoTitleBar"/>

        <!--add CustomTabActivity-->
        <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>

        <!--reference your fb_app_id-->
        <meta-data
                android:name="com.facebook.sdk.ApplicationId"
                android:value="@string/fb_app_id"/>

    </application>

</manifest>

インストール

npm install --save react-native-facebook-login

ライブラリリンク設定

react-native link react-native-facebook-login

以上がセットアップ。

使い方

シンプルにFBLoginManagerでログインする場合

const { FBLoginManager } = require('react-native-facebook-login');

// permissionをArrayで渡して
FBLoginManager.loginWithPermissions(["email","user_friends"], function(error, data){
  // ここで結果を受ける
  if (!error) {
    console.log("Login data: ", data);
  } else {
    console.log("Error: ", error);
  }
})