React native – Facebook integration with expo

Facebook

Provides Facebook integration for Expo apps. Expo exposes a minimal native API since you can access Facebook’s Graph API directly through HTTP (using fetch, for example).

NOTA: React native has a built-in “Share” service that display device’s native dialog.

Follow Facebook’s developer documentation to register an application with Facebook’s API and get an application ID.

[—————–

[Fuente: https://developers.facebook.com/docs/apps#register]

Registro

Para que tu aplicación pueda acceder a nuestros productos o API, primero debes convertir tu cuenta de Facebook a una cuenta de desarrollador y registrar la aplicación mediante el panel de aplicaciones. Puedes hacerlo desde developers.facebook.com. El proceso de registro crea un identificador de la aplicación que nos permite conocer quién eres, nos ayuda a distinguir tu aplicación de otras aplicaciones y es una forma de que puedas proporcionar otros posibles materiales necesarios a la hora de configurar productos específicos o solicitar acceso a API confidenciales.

Una vez hecho el registro, haz clic en el enlace Configuración a la izquierda, y proporciona toda información adicional que tengas acerca de tu aplicación. La mayoría de los campos son sencillos de entender, pero para algunos hay más información disponible.

Identificador de la aplicación

Cuando te registres, generaremos un identificador de la aplicación único para tu aplicación. Vamos a usar mucho este identificador, ya que debe incluirse al hacer llamadas a las API. Esto puede configurarse fácilmente desde nuestros SDK, de modo que el identificador se incluya automáticamente en cualquier llamada a la API.

Plataforma

Nos permite saber cómo acceden los usuarios a tu aplicación; por ejemplo, desde un dispositivo móvil o desde un sitio web. De esta forma, más adelante podemos mostrarte productos y funciones específicos de la plataforma.

Política de privacidad y condiciones del servicio

Deben ser URL a la política de privacidad y a las condiciones del servicio que correspondan a los usuarios de tu aplicación. Supongamos que eres usuario de esta aplicación y quieres saber de qué modo el desarrollador de aplicaciones protegerá tu privacidad y qué condiciones debes aceptar. Debes buscar una política de privacidad y las condiciones del servicio. Introduce las URL aquí. Si estás usando algún producto, permisos de inicio de sesión o funciones que requieren la revisión de aplicaciones, revisaremos el contenido en estas URL.

Situaciones y productos

Después de registrar tu aplicación, tienes la opción de seleccionar una o más situaciones. Seleccionar una situación agrega los productos relacionados con la situación. Después de confirmar tus situaciones, los productos agregados aparecen a la izquierda, y la documentación aparece a la derecha.

También puedes saltear la selección de situaciones y agregar productos adicionales.

——————–]

Take note of this application ID because it will be used as the appId option in your Expo.Facebook.logInWithReadPermissionsAsync call.

NOTA IMPORTANTE:

En la consola de developers de facebook hay que añadir que el app tenga inicio de sesión con facebook, Entonces eliges aplicación nativa android y ya puedes meter información de la app, como el package name y el android hashes (que se saca con el comando ‘expo fetch:android:hashes’).

Ejemplo de hacer login dentro del API de Facebook:

async function logIn() {
  const { type, token } = await Expo.Facebook.logInWithReadPermissionsAsync('<APP_ID>', {
      permissions: ['public_profile'],
    });
  if (type === 'success') {
    // Get the user's name using Facebook's Graph API
    const response = await fetch(
      `https://graph.facebook.com/me?access_token=${token}`);
    Alert.alert(
      'Logged in!',
      `Hi ${(await response.json()).name}!`,
    );
  }
}

Given a valid Facebook application ID in place of <APP_ID>, the code above will prompt the user to log into Facebook then display the user’s name. This uses React Native’s fetch to query Facebook’s Graph API.