Arquitectura de Aplicaciones

1

Pasos para aprender Flutter Avanzado

2

¿Qué es una Arquitectura de software?

3

Tipos de Arquitecturas para Flutter

4

Arquitectura BLoC en Flutter

5

BLoC + Clean Architecture en Flutter

6

Estructurando nuestro proyecto utilizando la Arquitectura BLoC

7

Haciendo BLoC Singleton en Flutter

8

Aplicando Providers al Proyecto

Firebase y Flutter

9

Integrando Firebase Authentication, Cloud Firestore y Firebase Storage al proyecto

10

Integrando Firebase a Flutter para Android

11

Integrando Firebase a Flutter para iOS

12

Creación de Pantalla de Login con Flutter

13

Creando botones reutilizables en Flutter

14

Autenticación de Firebase con Google

15

Implementando Firebase Authentication en BLoC Pattern

16

Streams en Flutter

17

Manejando una sesión con Firebase Authentication y Flutter

18

Implementando Google SignOut en BLoC

19

Implementando Google SignOut en View

20

Monitoreando y validando la conexión al Sign con Google

21

Mostrando los datos de usuario de Google en la interfaz en Flutter

Cloud Firestore de Firebase en Flutter

22

¿Qué es Cloud Firestore de Firebase?

23

Analizando un modelo de datos no relacional

24

Creando un Modelo de datos en Cloud Firestore

25

Enviando datos a Cloud Firestore

26

Creando un Widget gradiente personalizado

27

Manejo de Desbordamiendo de Texto de Widget Text

28

Botón de Back en un Appbar en Flutter

29

Navegación entre pantallas en Flutter

30

Widget Text Appbar personalizado en Flutter

31

Widget TextField personalizado en Flutter

32

Creando una Safe Area para una interfaz que tiene un AppBar

33

Widget TextField con iconos en Flutter

34

Retocando el CardView

35

Mostrando imágenes en un CardView

36

Creando un botón de Submit en Flutter

37

Envío de datos de un fórmulario en Flutter

38

Subiendo datos a Firestore de Firebase

39

Formularios en Flutter

Acceso al Hardware con Flutter

40

Acceso a la cámara en Flutter

41

Librerías de acceso a Hardware en Flutter

Firebase Storage en Flutter

42

Qué es y cómo funciona Firebase Storage en Flutter

43

Subiendo una imagen a Firebase Storage desde Flutter

Querys avanzados en Cloud Firestore de Firebase en Flutter

44

Manejo de imágenes en Cloud Firestore

45

Cloud Firestore insertando referencias y arrays en la base de datos

46

Descargar imágenes de Firebase Storage y mostrarlas en Flutter

47

Procesando datos con BLoC Pattern

48

Trayendo datos de Cloud Firestore

49

Persistiendo datos de un usuario logueado

50

Aplicando Filtros en Cloud Firestore

51

Construyendo los Places en la pantalla de Home

52

Mostrando los Places en la pantalla de Home

53

Actualizando datos en tiempo real

54

Manejando la lógica de likes, como botón toggle.

55

Insertando y obteniendo referencias en datos de Firestore.

56

Usando el caché para cargar imágenes más rápido

57

StreamController, sink, add y StreamBuilder

Conclusiones

58

Conclusiones

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso Avanzado de Flutter

Curso Avanzado de Flutter

Anahí Salgado Díaz de la Vega

Anahí Salgado Díaz de la Vega

Autenticación de Firebase con Google

14/58
Recursos

En esta clase veremos como implementar la autenticación con Firebase. Debemos entrar a firebase entrar en nuestro proyecto, ir al apartado de “Authentication” y activar la autenticación con Google.

Aquí encuentras el repositorio.

Aportes 34

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Hola. Espero le sirva a alguien de ayuda.
En la parte donde esta “await .signInWithCredential”, no retorna un objeto FirebaseUser sino un objeto AuthResult, del cual pueden obtener un FirebaseUser.

Aquí les comparto el código que me funcionó:

AuthResult authResult = await _auth.signInWithCredential(
      GoogleAuthProvider.getCredential(idToken: googleAuth.idToken, accessToken: googleAuth.accessToken)
    );

   FirebaseUser user = await authResult.user;

También si les interesa, pueden hacer login con Facebook de esta manera:

Future<FirebaseUser> facebookSignIn() async{
    final result = await _facebookLogin.logInWithReadPermissions(['email']);

    switch (result.status) {
      case FacebookLoginStatus.loggedIn:{
        AuthResult authResult = await _auth.signInWithCredential(
          FacebookAuthProvider.getCredential(accessToken: result.accessToken.token)
        );
        
        FirebaseUser user = authResult.user;

        return user;
        break;
      }
        
      case FacebookLoginStatus.cancelledByUser:{
        print("cancelado por usuario");
        break;
      }
        
      case FacebookLoginStatus.error:{
        print("Error: "+result.errorMessage.toString());
        break;
      }
    }
  }

o también con Correo y Contraseña:

Future<FirebaseUser> emailAndPasswordSignIn(String email, String password) async{
    AuthResult authResult = await _auth.signInWithEmailAndPassword(email: email, password: password);

    FirebaseUser user = authResult.user;

    return user;
  }

La clase FirebaseUser está obsoleta en la versión 0.18.0+1, por lo que recomienda como ya lo han mencionado algunos, usar un alias para firebas_auth. El signInWithCredential retorna un UserCredential y este objeto contiene el user dentro, el código actualizado queda así:

import 'package:firebase_auth/firebase_auth.dart' as auth;
import 'package:google_sign_in/google_sign_in.dart';

class FirebaseAuthAPI {
  final auth.FirebaseAuth _auth = auth.FirebaseAuth.instance;
  final GoogleSignIn googleSignIn = GoogleSignIn();

  Future<auth.User> signIn() async {
    GoogleSignInAccount googleSignInAccount = await googleSignIn.signIn();
    GoogleSignInAuthentication gSA = await googleSignInAccount.authentication;

    auth.UserCredential userCredential = await _auth.signInWithCredential(
        auth.GoogleAuthProvider.credential(
            idToken: gSA.idToken, accessToken: gSA.accessToken));

    return userCredential.user;
  }
}

Espero

Hola a todos, les dejo el link al tutorial que hice sobre esta clase, con el código actualizado a Marzo del 2021. Es el mismo código pero usando los métodos e instancias de las librerías actualizados:

Tutorial clase 14

firebase_auth_api.dart actualizado al 7/nov/2021

import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';

class FirebaseAuthAPI {
  final FirebaseAuth _auth = FirebaseAuth.instance;
  final GoogleSignIn googleSignIn = GoogleSignIn();

  Future<UserCredential> signInWithGoogle() async {
    // Trigger the authentication flow
    final GoogleSignInAccount? googleUser = await googleSignIn.signIn();

    // Obtain the auth details from the request
    final GoogleSignInAuthentication? googleAuth = await googleUser?.authentication;

    // Create a new credential
    final user = await _auth.signInWithCredential(GoogleAuthProvider.credential(
      accessToken: googleAuth?.accessToken,
      idToken: googleAuth?.idToken,
    ));

    // Once signed in, return the UserCredential
    return user;
  }
}

En este punto hay muchos conceptos que deberían ser aclarados para entender claramente lo que estamos haciendo. Creo que es necesario entender entre otros operaciones sincrónicas y asíncronas, streams y silks y el concepto de Futures. Afortunadamente la documentación en dart está bastante bien (https://dart.dev/codelabs/async-await) y hay un par de videos en youtube que apoyan el concepto.

En vez de renombrar la clase creada se puede identificar a la clase importada de distinta manera con ‘as’:

import 'package:firebase_auth/firebase_auth.dart' as auth;
import 'package:google_sign_in/google_sign_in.dart';

class FirebaseAuth {
  auth.FirebaseAuth _auth = auth.FirebaseAuth.instance;
}

Creo que deberían actualizar los videos, en este, parte del código es obsoleta (ya no sirve), además deberían aclarar varios puntos que se usan y no se explican, como por ejemplo el funcionamiento del Future, no es claro qué hace y para qué sirve.

De todas formas investigando por aparte lo ajusté de la siguiente manera:

import 'package:google_sign_in/google_sign_in.dart';
import 'package:firebase_auth/firebase_auth.dart';

class FirebaseAuthAPI {
  final FirebaseAuth _auth = FirebaseAuth.instance;
  final GoogleSignIn googleSignIn = GoogleSignIn();

  Future<User> signIn() async {
    GoogleSignInAccount googleSignInAccount = await googleSignIn.signIn();
    GoogleSignInAuthentication gSA = await googleSignInAccount.authentication;

    UserCredential userCredential = await _auth.signInWithCredential(
        GoogleAuthProvider.credential(
            idToken: gSA.idToken, accessToken: gSA.accessToken));

    return userCredential.user;
  }
} 

Aunque creo que esto debería hacerlo la tutora del curso

Hola, por si les sirve para seguir avanzando en el curso:

En file firebase_auth_api.dart deprecaron algunas funciones, a mi me sirvió así

Future<UserCredential> signIn() async{
    GoogleSignInAccount googleSignInAccount = await googleSignIn.signIn();
    GoogleSignInAuthentication gSA = await googleSignInAccount.authentication;

    final GoogleAuthCredential googleCredential = GoogleAuthProvider.credential(
      accessToken: gSA.accessToken,
      idToken: gSA.idToken,
    );
    
    final UserCredential googleUserCredential = await FirebaseAuth.instance.signInWithCredential(googleCredential);
    return googleUserCredential;    
  }

En file auth_repository.dart también se debe cambiar

Future<UserCredential> signInFirebase() => _firebaseAuthAPI.signIn();

Hola, si alguien no sabe qué es eso de los futuros se le hará más complicado conforme avance el curso.
Algo que me ayudó fue este artículo que dejo abajo. En mi opinión este artículo es ideal para entender lo que se verá en las próximas clases, así que no está demás echarle un ojo. 😃
https://medium.com/comunidad-flutter/futuros-de-dart-flutter-en-el-foco-24c3f8399e35

En la doc actualizada, te da una guia de esto:
https://firebase.flutter.dev/docs/auth/social

Curso muy desactualizado!

A la fecha se ha implementado el Null Safety en dart, por lo que les dejo el código actualizado.

import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';

class FirebaseAuthAPI {
  final FirebaseAuth auth = FirebaseAuth.instance;
  final GoogleSignIn googleSignIn = GoogleSignIn();

  Future<UserCredential> signIn() async {
    GoogleSignInAccount? googleSignInAccount = await googleSignIn.signIn();
    GoogleSignInAuthentication? gSA = await googleSignInAccount!.authentication;
    
    UserCredential user = await auth.signInWithCredential(
      GoogleAuthProvider.credential(
          idToken: gSA.idToken, accessToken: gSA.accessToken),
    );
    return user;
  }
}

Hola a todos, espero estén full [email protected], creo que no soy el único que tiene problemas con el curso en este punto, esto debido a la nueva actualización de flutter y el Null safety, bueno a continuación les voy a compartir mi codigo, tanto del pubspec.yaml como de los archivos dart, espero les sea de ayuda.

dependencias en pubspec.yaml

firebase_core: ^1.6.0
  firebase_analytics: ^8.3.1
  google_sign_in: ^5.0.7
  firebase_storage: ^10.0.3
  firebase_auth: ^3.1.0
  cloud_firestore: ^2.5.1
  firebase_database: ^7.2.1

firebase_auth.dart


import 'package:google_sign_in/google_sign_in.dart';
import 'package:firebase_auth/firebase_auth.dart';

class FirebaseAuthAPI {
  final FirebaseAuth _auth = FirebaseAuth.instance;
  static GoogleSignIn googleSignIn = GoogleSignIn(
    scopes: ['email'],
  );

  Future<User?> signIn() async {
    GoogleSignInAccount? account = await googleSignIn.signIn();
    GoogleSignInAuthentication gSA = await account!.authentication;

    UserCredential userCredential = await _auth.signInWithCredential(
        GoogleAuthProvider.credential(
            idToken: gSA.idToken, accessToken: gSA.accessToken));

    return userCredential.user;
  }
}

No se si se me escapa algo, de ser así, avísenme y edito el comentario, hay mas cosas que tuve que corregir del curso, porque esta desactualizado, si varios necesitan ayuda, hago un video en youtube para ayudar.

Saludos desde colombia!

Estoy realizando el curso en abril 2021 y esta demasiado desactualizado respecto a las librerías de Firebase deberían actualizarlo, tomen en cuenta por fa 😃

Aun que ya hay varios compañeros que identificarón como solucionar la parte del FirebaseUser ( que esta deprecado) creo que se deberia actualizar el video. Tampoco tiene mucho sentido llamar a una clase API a algo que no es una API.

En mi opinión, no tiene mucho sentido crear AuthRepository y FirebaseAuthAPI si no vas a ocultar su implementación. Estamos acoplando la vista al modelo FirebaseUser, un modelo que no depende de nosotros. Un mejor approach es usar un model User que contenga datos básicos como nombre, teléfono, email, url de la foto. Datos que podes encontrar en diferentes métodos de login que tengamos. Mi propuesta es desacoplarnos de FirebaseUser de la siguiente forma

class AuthRepository {
  final _firebaseAuth = FirebaseRepositoryAPI();

  Future<User> signInFirebase() async {
    FirebaseUser user = await _firebaseAuth.signIn();
    User _user = User(user.displayName, user.email, user.phoneNumber, user.photoUrl);
    return _user;
  }
}```

Esto nos permitirá agregar un nuevo modo de SignIn como Facebook y retornar un objeto User a la vista. De esta forma a la vista no le interesa como hizo login y podremos acceder siempre a su nombre, independientemente del método usado

Aquí no importa si el nombre de archivo esta con mayusculas?

Como le tendria que hacer para que desde mi widget de mi screen, acceda a alguna otra autenticación, osea se que estan los nombres de mis metodos, pero actualmente se tiene la siguiente jerarquia

screen_widget -> bloc -> auth_repository -> firebase_auth_api

Por lo que entiendo, la idea de tener todo de esta forma es: "Desde el widget hacer algo como userBloc.signIn()

y esto, hara el viaje, hasta firebase_auth_api y seleccionará el tipo de logueo, ej. google, fb, anonimo, etc.

Lo que a mi se me ocurre, es que cuando se hace el llamado, pasar por parametro el tipo de login, ej. userBloc.signIn(‘google’) o userBloc.signIn(‘anon’), e ir pasando los parametros desde el screen_widget -> bloc -> auth_repository -> firebase_auth_api, pero creo que esto es algo engorroso, la verdad preferiria llamar el metodo desde el widget directo de firebase_auth_api

No se si alguien puede orientarme con esta parte, se lo agradeceria de antemano

Que tal compañeros, agrego mi aporte. supongo que por la version en la cual se estaba trabajando anteriormente, el código para la clase firebase_auth_api no me funcionaba a si que revisando la documentación de flutter pude solucionar mi inconveniente. les adjunto el código.

Empecé muy entusiasmado con el curso creyendo que iba a ser más sencillo, y he estado luchando para que mi APP corra hasta este vídeo, pero la desactualización del curso lo hace MUY DIFICIL, creo que los administradores de Platzi deben hacer un alto aquí y revisar que se puede hacer para mejorar esto, por el momento estoy fuera del curso, seguiré aprendiendo por mi cuenta desde otras fuentes.

Proceso guardar login con google en firebase

También pueden ver un tutorial más actualizado aquí:
https://youtu.be/oyVDDRczuJI

Si a alguien le sale este error

FirebaseException ([core/no-app] No Firebase App '[DEFAULT]' has been created - call Firebase.initializeApp())

Lo puede solucionar siguiendo este corto tutorial
https://www.youtube.com/watch?v=y1763PWQ0JM

Hola les comparto una pequeña actualización:

import 'package:firebase_auth/firebase_auth.dart' as auth;
import 'package:google_sign_in/google_sign_in.dart';

class FirebaseAuthAPI {
  final auth.FirebaseAuth _auth = auth.FirebaseAuth.instance;
  final GoogleSignIn googleSignIn = GoogleSignIn();

    Future<auth.User?> signIn() async {
    GoogleSignInAccount? googleSignInAccount = await googleSignIn.signIn();
    GoogleSignInAuthentication gSA = await googleSignInAccount!.authentication;

    auth.UserCredential userCredential = await _auth.signInWithCredential(
        auth.GoogleAuthProvider.credential(
            idToken: gSA.idToken, accessToken: gSA.accessToken));

    return userCredential.user;
  }
}

En cada lugar donde mencione FirebaseUser en la version actual solo hay que poner User

La librería de google sign in ha cambiado un poco, pero facilmente pueden guiarse de este tutorial https://firebase.flutter.dev/docs/auth/social para implementar el metodo signIn

Que es paralelización?

Empezando la autenticaciòn

Muy claro todo

Muy buena la clase!

¿Alguien sabe cómo implementar la opción serverClientId para devolver serverAuthCode en Flutter?

En android se hace con el siguiente procedimiento: https://developers.google.com/identity/sign-in/android/backend-auth Provee con el código:

final FirebaseAuth _auth = FirebaseAuth.instance;
final GoogleSignIn googleSignIn = GoogleSignIn (
serverClientId: serverClientId,);

Pero marca este error: E / flutter (5143): [ERROR: flutter / lib / ui / ui_dart_state.cc (157)] Excepción no controlada: PlatformException (excepción, dos ID de cliente de servidor diferentes proporcionados, nulo)

Mi aporte:
Email authentication.
.

Future<FirebaseUser> signInWithEmail(String email, String password) async{
    AuthResult authResult = await _auth.signInWithCredential(
      EmailAuthProvider.getCredential(email: email, password: password)
    );
    
    FirebaseUser user = authResult.user;
    return user;
  }

No puede realizar el inicio de sesión usando provider, sin embargo de tanto buscar, resulta que existe actualizaciones de los paquetes, por tanto ahora hay que envolver a la app con un método asyn… No soy bueno usando términos pero les dejo el link de un video reciente y el repositorio…

https://www.youtube.com/watch?v=s0TlqY5ePQU&t=528s
https://github.com/lohanidamodar/fl_fire_auth

Genial! estoy viendo en los comentarios nuevas formas de autenticación. Primero intentaré con esta 😉