Ionic: Login con Facebook y Google

 

Hoy vamos a ver un ejemplo con el framework Ionic  sobre como hace un Login y entrar con nuestras cuentas de Google o Facebook, todo esto a base de la libreria ng-cordova-oauth la cual sirve perfectamente para nuestras apps híbridas.

Dentro de mi proyecto Ionic  lo primero que hice fue instalar el plugin inAppBrowser ya que la libreria de cordova oauth depende de este plugin, pueden ver la documentacion y el comando para descargarlo por medio del comando “cordova plugin add” :

http://ngcordova.com/docs/plugins/inAppBrowser/

Una vez que se tenga instalado el plugin vamos a descargar la librería ng-cordova-oauth y la importaremos nuestro index.html

https://github.com/nraboy/ng-cordova-oauth

Sobre nuestro proyecto solo tendremos dos vistas : login y bienvenida donde en login solo tendremos dos botones

 

Nuestra estructura de archivos está de la siguiente forma :

login_oauth_desarrollohidrocalido_7

Veamos como está nuestro código:

app.js

controllers.js

Nuestras Vistas:

login.html

bienvenido.html

Quiero aclarar un punto muy importante y es sobre correr el demo puesto que solo funcionara si lo probamos desde nuestro dispositivo móvil ya que se esta usando un plugin de cordova y esto no funcionará si o corremos desde el navegador.

Un punto muy importante es tener nuestros ID’s respectivos de las Apps creadas en Google y Facebook. sn la clave para que el plugin funcione y hay que tener mucho cuidado con la configuración de dichas Apps.

Dejo unas ligas donde se crean las Apis:

https://developers.google.com/
https://developers.facebook.com


github_desarrollohidrocalido

 

6 thoughts on “Ionic: Login con Facebook y Google”

  1. Hola buenas noches diego, disculpa soy nuevo en este mundo de app, a ver si por favor me puedes ayudar, instale todo en mi maquina empezando por el node, y utilice el npm para istalar el cordova y los demas plung-in, pero no he podido hacerlo correr en movil, como lo puedo correr en movil? por que lo intento desde el movil apuntando a la ip de mi maquina pero no funciona, de ante mano gracias

  2. Has ingresado en facebook en tu navegador para que el inAppBrowser reconozca que estas logueado ? y solo te solicite autorización ..?
    Ya que me aparece que inicie sessión e intente nuevamente.

    1. Así es, en este ejemplo lo hace por medio del web browser, me parece que hay otro plugin de cordova que lo hace con la app de facebook nativamente.

  3. Hola Diego muchas gracias por el tuto, pocos se entienden tan bien 🙂
    Cada vez que entro a la app y le doy ingresar con Facebook me dice: Ya autorizaste esta aplicación bla bla bla y asi es siempre.
    Estoy buscando por todo lado como registrarme con Facebook, que capture los datos del usuario y los registre en la BD y asi cada que abran la app y le den ingresar con Facebook deje de pedir esa bendita autorización.
    Algún dato de como hacerlo funcionar asi?

Leave a Reply

Your email address will not be published. Required fields are marked *

*