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追加
Xcodeでプロジェクトを開く
プロジェクトのルートで右クリック →
New Group
を選択 →Frameworks
という名前でグループ作成以下のディレクトリ下にある
.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);
}
})