7
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ReactNative Facebookログイン

Last updated at Posted at 2017-07-09

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 SettingsSearch PathsFramework 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);
  }
})
7
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?