Como utilizar o Firebase com Flutter — FlutterFire (Part 4)

FlutterFire Auth — Social (Google)

Já vimos a praticidade do uso de email/password e número de telemóvel para autenticação de utilizadores, resta-nos ainda explorar outros métodos que podem igualmente ser práticos, no caso os métodos relacionados com nossos contactos sociais como Google, Apple, Github.

Para este artigo iremos focar no google como uma forma muito prática de usar o google que é provavelmente o método mais usado e com uma boa justificativa, quase todo mundo tem o seu telemóvel associado a um ou vários serviços Google (who run the world???).

Este artigo é parte de uma série de artigos relacionados ao FlutterFire que conta com os seguintes artigos:

1. Como utilizar o Firebase com Flutter (Introdução — Configurando o FlutterFire)
2. Como utilizar o Firebase com Flutter (FlutterFire Auth — Email/Password)
3. Como utilizar o Firebase com Flutter (FlutterFire Auth — Phone)
4. Como utilizar o Firebase com Flutter (FlutterFire Auth — Social(Google)) (este artigo)
5. Como utilizar o Firebase com Flutter (Cloud Firestore)

Para este método de autenticação (assumindo que já foi feita a configuração do projecto e FlutterFire no mesmo) basta apenas usar mais um plugin adicional

google_sign_in: ^4.5.1

E um opcional para tornar o botão de autenticação mais personalizado sem usar muito código

flutter_signin_button: ^1.1.0

Implementação

Para colocar este método de autenticação o processo é bastante simples, bastando apenas ter a implementação a seguir, que é bem straight-forward.

E para nosso homeScreen vamos adicionar o botão que vai possibilitar efectuar a autenticação.

_isLoadingGSignIn
    ? Center(child: CircularProgressIndicator())
    : SignInButton(
        Buttons.Google,
        text: "Entrar com Google",
        onPressed: () {
          setState(() {
            _isLoadingGSignIn = true;
          });
          authService
              .signInWithGoogle()
              .whenComplete(() {})
              .then((value) {
            setState(() {
              _isLoadingGSignIn = false;
              _isDoneSignIn = true;
              _message = value;
            });
          });
        },
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8)),
      ),

Podendo obter o seguinte resultado:

Esquerda: Antes utilizador pedir acesso | Direita: Depois que “Entrar com Google” é acionado

O projecto já actualizado está disponível pelo github, espero que tire proveito do mesmo e contribua com melhorias em qualquer aspecto.

Espero que tenha aprendido com este artigo e que se tenha divertido enquanto lia.

Obrigado por acompanhar até ao fim e espero por você no próximo artigo.

Para questões e sugestões esteja a vontade para tal nos comentários, email igorlsambo1999@gmail.com ou twitter @lsambo02.

Obrigado e até ao próximo artigo!!!