React Native開発：Facebook SDKを組み込むについて

皆さん、こんにちは。

今回は「React Native開発：Facebook SDKを組み込む」について紹介させていただきます。

React Native 0.83以降でFacebook SDKを組み込むには、主に次の手順を踏みます。
Facebookの認証やその他の機能を使用するためには、react-native-fbsdkを使用することが一般的です。

必要なパッケージのインストール

まず、Facebook SDKを使うために必要なパッケージをインストールします。

npm install react-native-fbsdk-next

または、Yarnを使っている場合:

yarn add react-native-fbsdk-next

iOSの設定

iOSでFacebook SDKを利用するためには、CocoaPodsのインストールが必要です。まず、iOSディレクトリに移動して、CocoaPodsをインストールします。

cd ios
pod install

次に、FacebookのApp IDとApp Nameを設定するために、Info.plistファイルに以下の内容を追加します。

<key>FacebookAppID</key>
<string>YOUR_FACEBOOK_APP_ID</string>
<key>FacebookDisplayName</key>
<string>YOUR_FACEBOOK_APP_NAME</string>
<key>FacebookAutoLogAppEventsEnabled</key>
<true/>
<key>FacebookAdvertiserIDCollectionEnabled</key>
<true/>

YOUR_FACEBOOK_APP_IDとYOUR_FACEBOOK_APP_NAMEを自分のFacebookアプリの設定に置き換えてください。

Androidの設定

次に、Android側の設定を行います。android/app/src/main/res/values/strings.xmlに以下のエントリを追加します。

<string name="facebook_app_id">YOUR_FACEBOOK_APP_ID</string>
<string name="facebook_client_token">YOUR_FACEBOOK_CLIENT_TOKEN</string>

次に、android/app/src/main/AndroidManifest.xmlに以下の設定を追加します。

<application
  android:name=".MainApplication"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:theme="@style/AppTheme"
  android:usesCleartextTraffic="true">
  
  <meta-data
    android:name="com.facebook.sdk.ApplicationId"
    android:value="@string/facebook_app_id"/>

  <activity
    android:name="com.facebook.FacebookActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
    android:theme="@android:style/Theme.Translucent.NoTitleBar" 
    android:launchMode="singleTask"
    android:hardwareAccelerated="true" 
    android:windowSoftInputMode="adjustResize">
    <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="fbYOUR_FACEBOOK_APP_ID" />
    </intent-filter>
  </activity>
</application>

YOUR_FACEBOOK_APP_IDを実際のFacebookアプリIDに置き換えてください。

Facebook SDKの利用

React NativeのアプリでFacebookの認証機能を利用するためには、以下のようにコードを書きます。

import React, { useEffect } from 'react';
import { Button, View } from 'react-native';
import { LoginManager, AccessToken } from 'react-native-fbsdk-next';

const FacebookLogin = () => {
  const loginWithFacebook = () => {
    LoginManager.logInWithPermissions(['public_profile', 'email'])
      .then(result => {
        if (result.isCancelled) {
          console.log('Login cancelled');
        } else {
          console.log('Login success with permissions: ' + result.grantedPermissions.toString());
          // トークンを取得
          AccessToken.getCurrentAccessToken().then(data => {
            console.log(data.accessToken.toString());
          });
        }
      })
      .catch(error => {
        console.log('Login fail with error: ' + error);
      });
  };

  return (
    <View>
      <Button title="Login with Facebook" onPress={loginWithFacebook} />
    </View>
  );
};

export default FacebookLogin;

Facebook Developer Consoleの設定

• Facebookアプリの設定：Facebookの開発者コンソールにアクセスし、新しいアプリを作成してください。
• アプリIDとApp Secret：アプリIDとApp SecretはFacebook開発者コンソールから取得できます。
• Facebookログインの設定：Facebookログイン機能を有効にし、適切なプラットフォーム（iOSとAndroid）を選択して設定します。

アプリのビルドと実行

すべての設定が完了したら、アプリをビルドして実行します。

• iOSの場合：

npx react-native run-ios

• Androidの場合：

npx react-native run-android

これで、React Nativeアプリ内でFacebook SDKを使用する準備が整いました。Facebookログインを通じてユーザー認証を行うことができます。

今日は以上です。

ありがとうございました。
よろしくお願いいたします。