Agregando login con Facebook para iOS

Clase 19 de 36 • Curso de React Native 2016

Resumen

Para lograr que los usuarios inicien sesión con Facebook primero tenemos que hacer algunos pasos para iOS:

Crear una app en Facebook for Developers
Descargar el SDK de Facebook
Copiar los archivos a un nuevo Grupo llamado Frameworks. Si no funciona destildando “Copy items if needed” dejarlo seleccionado.
Modificar el info.plist según indica la guía de Facebook

A continuación debemos usar la librería de React Native Facebook SDK: un wrapper para React Native sobre el SDK de Facebook.

Para instalarla y linkearla a nuestro proyecto, debemos ejecutar el siguiente comando:
react-native install react-native-fbsdk

Aitor Chicharro

student•

Hola, he seguido los pasos tal cual, pero me esta dando el siguiente error:

…/node_modules/react-native-fbsdk/ios/RCTFBSDK/core/RCTFBSDKGraphRequestManager.h:21:9: ‘FBSDKCoreKit/FBSDKCoreKit.h’ file not found

¿Que puedo hacer? Llevo horas buscando por google y demas y nada…

Juan Manuel Ramallo

student•

Tengo el mismo error y vengo buscando solución desde ayer.

Juan Manuel Ramallo

student•

Lo pude hacer funcionar gracias a este comentario en un issue de react-native-fbsdk

Fernando Ontiveros

student•

Creo que la mejor forma de hacerlo en 2018 es siguiendo los pasos que dicta Facebook para configurar el proyecto y el login en iOS y Android:

Aaron Pérez Pereira

student•

Usé “react-native install react-native-fbsdk” y no funcionó. Instalenlo normal con “npm install react-native-fbsdk --save” dentro de la carpeta del proyecto y listo. Luego usen el segundo comando para linkear y ya.

Dante Jauregui Yallico Jauregui Yallico

student•

Mi poblema es que aparece bien el Boton de Login con FB, pero cuando lo presiono no sucede nada e incluso me saca de la app 😕

Hice caso las recomendaciones de la RUTA q recomendaste, hice BUILD y run-IOS y aun tengo el problema.

Gonzalo, Chicos que solucion recomiendan ante este problema que explique? 😃

PS: lei todos los post de esta section y ya estan implementados, solo falta este problemilla

Julio Gutierrez

company_admin•

Issue en Mac
Al instalar react-native install react-native-fbsdk, obtengo lo siguiente:

rnpm-install ERR! Something went wrong while linking. Error: Expected “/*”, “//”, or “{” but “<” found.
Please file an issue here:

Expected “/*”, “//”, or “{” but “<” found.

Alguien me puede ayudar?

Johan Fuentes

student•

Esto me funcionó:

En vez de usar
react-native install react-native-fbsdk
Usé
npm install react-native-fbsdk@0.6.0 --save
react-native link react-native-fbsdk

Johan Fuentes

student•

Esto me funcionó:

En vez de usar
react-native install react-native-fbsdk
Usé
npm install react-native-fbsdk@0.6.0 --save
react-native link react-native-fbsdk

Alfredo Gama Zapata Gama Zapat Gama Zapata

student•

Aún encontré el error del file no found FBSDKCoreKit, seguí los pasos de este link y se arreglo -->

Paul Galarza Cervantes

student•

Sucede el siguiente error después de: cmd + B

Apple Mach-O Linker Error Group

clang: error: linker command failed with exit code 1 (use -v to see invocation)

Miguel Rivas

student•

mira aqui si esta tu error:

Miguel Rivas

student•

Make sure to follow this step:

Deselect Copy items into destination group’s folder.

Also, in your Build Settings, look at this field: “Framework Search Paths” You should have something like this: /Users/[username]/Documents/FacebookSDK

Also, look at Finder and make sure that the framework is actually there

John Anhuaman Centeno AC

student•

Al igual que “eslagos”, con la versión 0.4.0 de react-native el plugin de react-native-fbsdk (0.5.0) no se instala, muestra que fue instalado y linkeado pero no crea nada en node_modules.

Alguna solución?

Gonzalo Aguirre

teacher•

La última versión de react-native-fbsdk (0.5.0) debería ser compatible con RN 0.40

Probá haciendo rm -rf node_modules/react-native-fbsdk y luego instalándolo nuevamente con npm install --save react-native-fbsdk && react-native link react-native-fbsdk

John Anhuaman Centeno AC

student•

Gracias, con ello se pudo instalar react-native-fbsdk

Jose Alvarez Alvarez

student•

Al agregar los frameworks al proyecto desde ahí ya no hace el build y me apareció el primer error, quite todo realicé el build con éxito volví a agregar todo y me apareció el segundo error.

FBSDKCoreKit/FBSDKCoreKit.h file not found
ld: framework not found FBSDKLoginKit
clang: error: linker command failed with exit code 1 (use -v to see invocation)

Alguna recomendación ?

Jose Alvarez Alvarez

student•

Never mind ya encontré el problema 😃

Maximiliano Opitz

student•

Como lo solucionaste? Tengo el mismo problema

Saludos!

ESTEBAN LAGOS Q

student•

Hola,que librería me recomiendan para integrar un login Google en la app.

ISABELINO CORDOBA PALACIOS

student•

Hola si alguien esta realizando el curso en este video el error de #import <FBSDKCoreKit/FBSDKCoreKit.h> se soluciona solo copiando las archivos directamente en la carpeta de Framewoks no por Xcode de la forma en que lo hicieron en el video genera error

daniel R.D. R.

student•

tengo un problema con instalar con react-native me sale lo siguiente:
“yarn” no se reconoce como un comando interno o externo,
programa o archivo por lotes ejecutable.
y no aparece información sobre comandos usados con react-native

Diego Forero

Team Platzi•

Yarn es un manejador de paquetes similar a npm pero más rapido porque tiene cache de los paquetes instalados.
Lo puedes instalar usando

npm i -g yarn

Dependiendo si tu sistemas es linux o mac usa sudo, si es windows la terminal abierta como administrador.

Christian Núñez

student•

Me marco error el Build, yo tengo react-native-cli: 2.0.1 y react-native: 0.45.1, alguna recomendación para que jala el SDK de Facebook?

Christian Núñez

student•

Mi versión del XCODE es: Version 8.3.3 (8E3004b)

Matias Niz

student•

fbsdk/ios/RCTFBSDK/core/RCTFBSDKGraphRequestManager.h:21:9: ‘FBSDKCoreKit/FBSDKCoreKit.h’ file not found

Ya probe todo lo que mencionan en toda la web y no hay caso… No puedo resolver ese problema

Abraham Solorzano

student•

@matiasniz debes agregar las librerias al Documents luego puedes aplicar un clear de la cache del build ya con eso debería funcionary debes buscar la ruta en Framework Search Path y agregar ~/Documents/FacebookSDK

Guillermo Lopez

student•

La solucion para el problema:
…/node_modules/react-native-fbsdk/ios/RCTFBSDK/core/RCTFBSDKGraphRequestManager.h:21:9: ‘FBSDKCoreKit/FBSDKCoreKit.h’ file not found

Es la siguiente: solo hay agregar la ruta donde esta el sdk de facebook en la parte que dice build settings, en framework search paths.

Ejemplo: /Users/user-name/Documents/FacebookSDK/

Nota: Esto no fue explicado en el video.

Victor Calvello

teacher•

Hola glopezep!

El problema, como comentó Gonzalo en una respuesta anterior, es debido a un breaking change en la version 40 de React Native y que la libreria react-native-fbsdk no se habia adaptado.

Esa adaptación fue hecha en la release 0.5.0 así que ya no deberías tener ese error usando esa versión.

ESTEBAN LAGOS Q

student•

Hola, tengo problema para instalar la libreria react-native-fbsdk en su versión 0.5.0.Actualmente utilizo react-native 0.40.

Con el comando react-native install react-native-fbsdk,la librería no se instala en el modulo node y tampoco se modifica el archivo package.json,se puede instalar por npm o existe otra solución.

Alguien tiene una solución?

Ivan Peters

student•

cuando actualizaran el curso?

Diego Forero

Team Platzi•

No hay una fecha definida pero ya se encuentra en el listado de cursos a actualizar/producir 😃

Carlos Andrés Millan Satizabal

student•

Para los que estamos haciendo el curso en un Linux entonces no nos va a servir lo qe enseñan en este video, ya que no hay forma de tener Xcode en Linux. Hay una alternativa para loguearse a Facebook sin usar Xcode?

Diego Forero

Team Platzi•

Infortunadamente si vas a desarrollar para IOS así sea usando React Native hay cosas que necesitan de librerías nativas de Mac, por lo tanto si o si es necesario que tengas un mac para poder hacer la aplicación para ios, en linux puedes hacer sin problema la de Android.

José Mauricio Eddui Abzum Méndez

student•

Gracias por la aportación

Ernesto Guzman Alcaraz

student•

ld: warning: Auto-Linking supplied ‘/Users/my_user_name/Documents/FacebookSDK/FBSDKCoreKit.framework/FBSDKCoreKit’, framework linker option at /Users/my_user_name/Documents/FacebookSDK/FBSDKCoreKit.framework/FBSDKCoreKit is not a dylib
ld: warning: Auto-Linking supplied ‘/Users/my_user_name/Documents/FacebookSDK/Bolts.framework/Bolts’, framework linker option at /Users/my_user_name/Documents/FacebookSDK/Bolts.framework/Bolts is not a dylib
Undefined symbols for architecture x86_64:
“OBJC_CLASS$_FBSDKAppEvents”, referenced from:
objc-class-ref in AppDelegate.o
"OBJC_CLASS$_FBSDKApplicationDelegate", referenced from:
objc-class-ref in AppDelegate.o
ld: symbol(s) not found for architecture x86_64
clang: error: linker command failed with exit code 1 (use -v to see invocation)

A alguien mas le pasa esto a la hora de hacer el build? ayuda como resolverlo no puedo avanzarle al curso

Giussep Ricardo Cachaya

student•

Hola! Me sucedió el mismo error, lo que hice fue Abrir el Build Phases y arrastrar Bolts.framework, FBSDKCoreKit.framework, FBSDKLoginKit.framework y FBSDKShareKit.framework y soltarlos en Link Binary With Libraries y Build otra vez!

Victor Gamez

student•

este curso esta muy obsoleto…

Victor Gamez

student•

Buenas. me salta este error **RCTFBLoginButton does not exist **.
Todo el rato encuentro esto como sugerencia… pero no se como proceder a arreglar mi error “Warning: Native component for ‘RCTFBLikeView’ does not exist,” verify that libRCTFBSDK.a shows up in the Link Binary with Libraries section of your build target’s Build Phases.

Agregando login con Facebook para iOS

Lanzamiento del Curso

Intro a React Native y a Platzimusic, el proyecto del curso

Requerimientos técnicos del curso

Guía de instalación de React Native

Guía de instalación para desarrollar para Android

Introducción al Desarrollo Mobile

¿De qué se trata este Curso de React Native?

Tres enfoques para desarrollo de aplicaciones móviles

Qué es React Native y sus componentes básicos

Primera App con React Native

Instalación y configuración de entorno

Creando tu primera aplicación

Developer Experience (DX)

Componentes y APIs

Estilos y Layout con Flexbox

PlatziMusic

Armando la ArtistBox

Componentes reutilizables

Contenedores con Scroll

Armando nuestro listado de artistas

Consume datos de la API de last.fm para listar los artistas

Routing y Navegación

Agregando una vista de detalle

Autenticación de usuarios

Agregando login con Facebook para iOS

Agregando botón de login con Facebook para iOS

Agregando botón de login con Facebook para Android

Configurando autenticación con Firebase

Agreguemos las funcionalidades principales a nuestra app: likes y comentarios

Refactor y referencias de Firebase

Agrega la funcionalidad para hacer Like a un artista

Envia comentarios de un artista y almacénalos en Firebase

Lista los comentarios de un artista trayendo los datos desde Firebase

Agrega un avatar de usuario para mostrar en los comentarios

Refinando detalles de la app

Mejorando la UI/UX de PlatziMusic para Android y iOS en cada caso

Agrega recursos de imágenes en la aplicación para la pantalla de login

Agrega un ícono bonito para PlatziMusic

Llevando la app a los Stores

Cómo subir tu aplicación de React Native al Play Store

Cómo subir tu aplicación de React Native al App Store

Conclusiones

Cierre del curso

Desafíos

Desafío 1 - Lista los artistas top de tu país

Desafío 2 - Lista la cantidad precisa de comentarios

Desafío 3 - Comparte un artista en Facebook o Whatsapp