Firebase Authentication を使用して React-Native アプリで Facebook ログインを実装する方法

React-Native アプリケーションを実行時に、「アプリケーションが登録されていない」というエラーが発生することがあります。これは、アプリが Facebook 開発者ダッシュボードに登録されていないことが原因です。

原因

このエラーが発生する主な原因は、以下の2つです。

1. アプリが Facebook 開発者ダッシュボードに登録されていない
2. アプリのバンドル ID が正しく設定されていない

解決策

このエラーを解決するには、以下の手順を試してください。

1. アプリのバンドル ID を設定する

   1. Xcode でプロジェクトを開きます。
   2. ターゲット > ビルド設定 > 一般 > バンドル ID を選択します。
   3. 開発者 ID のプレフィックスとアプリの名前を入力します。
   4. 例: com.example.myapp

2. アプリを再起動する

• 使用している React Native のバージョン
• 使用しているオペレーティングシステム (OS) のバージョン
• エラーメッセージの詳細

関連キーワード

• javascript
• facebook
• reactjs
• react-native
• アプリケーションが登録されていない
• エラー
• 開発者ダッシュボード
• バンドル ID

import React, { useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import FacebookLogin from '@react-native-community/facebook-login';

const App = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [userInfo, setUserInfo] = useState(null);

  const loginWithFacebook = () => {
    FacebookLogin.login().then((result) => {
      if (result.isCancelled) {
        console.log('Login cancelled');
      } else {
        setIsLoggedIn(true);
        setUserInfo(result.profile);
      }
    }).catch((error) => {
      console.log('Login failed with error: ' + error);
    });
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>React Native Facebook Login Example</Text>
      {isLoggedIn ? (
        <View>
          <Text style={styles.welcome}>Welcome, {userInfo.name}!</Text>
          <Button title="Logout" onPress={() => setIsLoggedIn(false)} />
        </View>
      ) : (
        <Button title="Login with Facebook" onPress={loginWithFacebook} />
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  welcome: {
    fontSize: 18,
  },
});

export default App;

このコードは、以下のライブラリを使用しています。

実行方法

1. 上記のコードをファイルに保存します。
2. 必要なライブラリをインストールします。

yarn add react-native-community/facebook-login

1. アプリを起動します。

注意事項

• このコードはサンプルコードであり、実稼働環境で使用する場合は必要に応じて修正する必要があります。
• Facebook アプリケーション ID と App Secret は、Facebook 開発者ダッシュボードで取得できます。

React-Native アプリケーションで Facebook ログインを実装するその他の方法

expo-facebook は、Expo で Facebook ログインを実装するためのライブラリです。このライブラリを使用すると、以下のメリットがあります。

• 簡単なセットアップ
• コード量が少ない
• Expo CLI と Expo Go を使用してアプリを開発およびテストできる

以下の手順で、expo-facebook を使用して Facebook ログインを実装します。

1. プロジェクトに expo-facebook をインストールします。

expo install expo-facebook

1. App.js ファイルに以下のコードを追加します。

import React, { useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { Facebook } from 'expo-facebook';

const App = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [userInfo, setUserInfo] = useState(null);

  const loginWithFacebook = async () => {
    try {
      const { type, token } = await Facebook.logInWithReadPermissionsAsync({
        permissions: ['public_profile'],
      });
      if (type === 'success') {
        const response = await fetch(`https://graph.facebook.com/me?access_token=${token}`);
        const profile = await response.json();
        setIsLoggedIn(true);
        setUserInfo(profile);
      } else {
        console.log('Login failed');
      }
    } catch ({ message }) {
      console.log(`Login failed with error: ${message}`);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>React Native Facebook Login Example</Text>
      {isLoggedIn ? (
        <View>
          <Text style={styles.welcome}>Welcome, {userInfo.name}!</Text>
          <Button title="Logout" onPress={() => setIsLoggedIn(false)} />
        </View>
      ) : (
        <Button title="Login with Facebook" onPress={loginWithFacebook} />
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  welcome: {
    fontSize: 18,
  },
});

export default App;

Firebase Authentication は、Firebase でユーザー認証を実装するためのサービスです。このサービスを使用すると、以下のメリットがあります。

• 複数の認証方法をサポートしている (Facebook、Google、メールアドレスなど)

import React, { useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import firebase from 'firebase';

const App = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [userInfo, setUserInfo] = useState(null);

  const loginWithFacebook = () => {
    const provider = new firebase.auth.FacebookAuthProvider();
    firebase.auth().signInWithPopup(provider).then((result) => {
      setIsLoggedIn(true);
      setUserInfo(result.user);
    }).catch((error) => {
      console.log('Login failed with error: ' + error);
    });
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>React Native Facebook Login Example</Text>
      {isLoggedIn ? (
        <View>
          <Text style={styles.welcome}>Welcome, {userInfo.displayName}!</Text>
          <Button title="Logout" onPress={() => firebase.auth().signOut()} />
        </View>
      ) : (
        <Button title="Login with Facebook" onPress={loginWithFacebook} />
      )}
    </View>
  );
};

const styles = StyleSheet.create({