ReactNative Facebookログイン

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

公式に出ている[FBSDK](https://github.com/facebook/react-native-fbsdk)ではなく、[react-native-facebook-login](https://github.com/magus/react-native-facebook-login
)を使ってのログイン機能の実装メモ。

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

## iOS

### Facebook SDK の設定 [参考](https://developers.facebook.com/docs/ios/getting-started?locale=ja_JP)

#### Info.plistの設定
```xml
<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追加

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

* application didFinishLaunchingWithOptions の戻り値修正

```objc
- (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つのメソッドを追加

```objc
// 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 [参考](https://github.com/magus/react-native-facebook-login/blob/master/android/README.md)

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

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

```xml
<!-- 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の修正

```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でログインする場合

```js
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);
  }
})
```