Implementando Firebase Authentication em um aplicativo Flutter

Quer você esteja trabalhando em um aplicativo simples ou criando o aplicativo dos seus sonhos, a autenticação ajuda a personalizar a experiência com informações específicas do usuário. Também é um componente crucial para privacidade e segurança.

Firebase Authentication é um serviço de back-end pré-configurado que o torna realmente fácil de integre-se com um aplicativo móvel usando um SDK. Você não precisa manter nenhuma infraestrutura de back-end para o processo de autenticação, e o Firebase oferece suporte à integração com provedores de identidade populares, como Google, Facebook e GitHub.

Neste tutorial, mostraremos como integrar o Firebase Authentication ao seu Aplicativo Flutter . Para demonstrar com um exemplo prático, orientaremos você no processo de criação de um processo de login e registro de senha por e-mail.

Percorreremos as seguintes etapas:

• Crie um projeto Flutter e Firebase
• Configure o Firebase para Android, iOS e web
• Importar plug-ins do Firebase
• Inicializar o aplicativo Firebase
• Registre um novo usuário
• Login e logout do usuário
• Atualizar usuário
• Definir validadores
• Crie o formulário de login
• Crie a página de perfil
• Persistir o estado de login

O aplicativo concluído ficará assim:

Crie um projeto Flutter e Firebase

Crie um novo projeto Flutter usando o seguinte comando:

 flutter criar flutter_authentication

Abra o projeto em seu editor de código favorito. Veja como abri-lo usando o código VS:

 código flutter_authentication

Para integrar o Firebase ao seu projeto Flutter, você deve criar um novo projeto Firebase acessando console .

Adicione um novo projeto e dê um nome a ele. Não precisamos do Google Analytics para este projeto de amostra, então você pode desativá-lo. Depois de criar seu projeto, você será direcionado para o painel do projeto Firebase.

Configure o Firebase para Android, iOS e web

Para usar o Firebase com Android, iOS ou web, você deve concluir algumas configurações para cada plataforma. Veja os guias de configuração completos abaixo:

• Instalação do Android
• instalação iOS
• Instalação na Web

Agora que temos a configuração básica para usar o Firebase, vamos mergulhar em nosso aplicativo Flutter.

Importar plug-ins do Firebase

Antes de começar a implementar a lógica de autenticação, você precisa importar os seguintes plug-ins:

• firebase_core , que é necessário para usar qualquer Serviço Firebase em um aplicativo Flutter
• firebase_auth para obter acesso aos serviços do Firebase Authentication

Adicione estes plug-ins ao seu arquivo pubspec.yaml :

dependências

: firebase_core: ^ 1.0.4 firebase_auth: ^ 1.1.1

Inicializar o aplicativo Firebase

Antes de usar qualquer serviço Firebase no aplicativo Flutter, você precisa inicializar Aplicativo Firebase .

Modifique o arquivo main.dart para o seguinte:

 import'package: flutter/material.dart';
import'telas/login_page.dart';
void main () { runApp (MyApp ());
}
class MyApp extends StatelessWidget { @sobrepor Construção de widget (contexto BuildContext) { return MaterialApp ( título:'Autenticação Flutter', debugShowCheckedModeBanner: false, tema: ThemeData ( primarySwatch: Colors.cyan, ), home: LoginPage (), ); }
}

Defina a LoginPage :

 import'package: flutter/material.dart';
class LoginPage extends StatelessWidget { @sobrepor Construção de widget (contexto BuildContext) { return Scaffold ( appBar: AppBar ( título: Texto ('Firebase Authentication'), ), ); }
}

Adicione um novo método para inicializar o aplicativo Firebase:

 Futuro  _initializeFirebase () async { FirebaseApp firebaseApp=await Firebase.initializeApp (); return firebaseApp;
}

Como esse método é assíncrono, você deve usar FutureBuilder dentro do método de construção:

 class LoginPage extends StatelessWidget { Futuro  _initializeFirebase () async { FirebaseApp firebaseApp=await Firebase.initializeApp (); return firebaseApp; } @sobrepor Construção de widget (contexto BuildContext) { return Scaffold ( appBar: AppBar ( título: Texto ('Firebase Authentication'), ), corpo: FutureBuilder ( futuro: _initializeFirebase (), construtor: (contexto, instantâneo) { if (snapshot.connectionState==ConnectionState.done) { return Column ( crianças: [ Texto ('Login'), ], ); } Centro de retorno ( child: CircularProgressIndicator (), ); }, ), ); }
}

Por enquanto, estamos apenas mostrando um widget Texto simples conforme a tarefa assíncrona é concluída e, caso contrário, apenas um CircularProgressIndicator .

Registrar um novo usuário

Quando um novo usuário chega, antes de fazer login, ele deve se registrar no Firebase Authentication.

Crie um novo arquivo dart chamado fire_auth.dart e defina um novo método chamado registerUsingEmailPassword () :

 class FireAuth { static Future  registerUsingEmailPassword ({ nome de string obrigatório, String e-mail obrigatória, senha String obrigatória, }) assíncrono { FirebaseAuth auth=FirebaseAuth.instance; Do utilizador? do utilizador; tentar { UserCredential userCredential=await auth.createUserWithEmailAndPassword ( email: email, senha: senha, ); user=userCredential.user; aguardar usuário!.updateProfile (displayName: nome); aguarde user.reload (); usuário=auth.currentUser; } em FirebaseAuthException catch (e) { if (e.code=='senha fraca') { print ('A senha fornecida é muito fraca.'); } else if (e.code=='email já em uso') { print ('A conta já existe para esse e-mail.'); } } catch (e) { imprimir (e); } usuário de retorno; }
}

Aqui estamos registrando um novo usuário usando o e-mail e a senha fornecidos e associando o nome do usuário a este perfil.

Pode haver vários erros FirebaseAuthException , que tratamos no snippet de código acima.

Login e logout do usuário

Para fazer o login de um usuário que já se cadastrou em nosso aplicativo, defina um novo método chamado signInUsingEmailPassword () , passando o e-mail e a senha do usuário:

 static Future  signInUsingEmailPassword ({ String e-mail obrigatória, senha String obrigatória, contexto BuildContext necessário,
}) assíncrono { FirebaseAuth auth=FirebaseAuth.instance; Do utilizador? do utilizador; tentar { UserCredential userCredential=await auth.signInWithEmailAndPassword ( email: email, senha: senha, ); user=userCredential.user; } em FirebaseAuthException catch (e) { if (e.code=='usuário não encontrado') { print ('Nenhum usuário encontrado para esse e-mail.'); } else if (e.code=='senha errada') { imprimir ('Fornecida senha incorreta.'); } } usuário de retorno;
}

O e-mail e a senha são usados ​​para gerar o objeto User fornecido pelo Firebase. O Usuário pode ser usado posteriormente para recuperar quaisquer dados adicionais (por exemplo, nome de usuário, foto do perfil, etc.) armazenados nessa conta.

Você pode usar o método signOut () para desconectar um usuário. Não há necessidade de criar um método separado para sair porque é apenas uma única linha de código:

 FirebaseAuth.instance.signOut ();

Enviar e-mail de verificação

Digamos que você queira verificar se um usuário inseriu o endereço de e-mail correto antes de continuar. Para enviar uma verificação de e-mail, você pode usar o método sendEmailVerification () no objeto Usuário :

 user.sendEmailVerification ();

Atualizar usuário

Definiremos mais um método dentro da classe FireAuth para atualizar o Usuário :

 static Future  refreshUser (usuário usuário) async { FirebaseAuth auth=FirebaseAuth.instance; aguarde user.reload (); Do utilizador? refreshedUser=auth.currentUser; return refreshedUser;
}

Definir validadores

Nosso aplicativo terá três campos de formulário para nome, e-mail e senha. Vamos criar um validador para cada um. Os validadores ajudarão a verificar se o usuário inseriu algum valor impróprio em um campo específico e mostrarão um erro de acordo.

Crie um novo arquivo chamado validator.dart , defina uma classe Validator e especifique três métodos dentro dela (cada um dos quais terá uma String como um parâmetro):

• validateName () para verificar se o campo de nome está vazio
• validateEmail () para verificar se o campo de endereço de e-mail está vazio e validar se está no formato correto usando uma expressão regular
• validatePassword () para verificar se o campo de senha está vazio e verifique se o comprimento é maior que seis caracteres

 class Validator { String estática? validateName ({obrigatório String name}) { if (name==null) { return null; } if (name.isEmpty) { return'O nome não pode estar vazio'; } return null; } String estática? validateEmail ({obrigatório String email}) { if (email==null) { return null; } RegExp emailRegExp=RegExp ( r"^ [a-zA-Z0-9.! # $% &'* +/=? ^ _` {|} ~-] + @ [a-zA-Z0-9] (?: [a-zA-Z0-9-] {0,253} [a-zA-Z0-9])? (?: \. [A-zA-Z0-9] (?: [A-zA-Z0-9-] {0,253} [a-zA-Z0-9])?) * $"); if (email.isEmpty) { return'E-mail não pode estar vazio'; } else if (! emailRegExp.hasMatch (email)) { return'Digite um email correto'; } return null; } String estática? validatePassword ({string obrigatório password}) { if (senha==null) { return null; } if (password.isEmpty) { return'A senha não pode estar vazia'; } else if (password.length <6) { return'Digite uma senha com comprimento mínimo de 6'; } return null; }
} 

Crie o formulário de login

Vamos adicionar um formulário à LoginPage para aceitar o endereço de e-mail e a senha do usuário:

Defina uma GlobalKey :

 final _formKey=GlobalKey  ();

Adicione um formulário e especifique a chave:

 Formulário ( chave: _formKey, filho: coluna ( filhos:  [ //Adicionar widgets ], ),
)

A seguir, adicione dois TextFormField s para aceitar o e-mail e a senha:

 Formulário ( chave: _formKey, filho: coluna ( filhos:  [ TextFormField ( controlador: _emailTextController, focusNode: _focusEmail, validador: (valor)=> Validator.validateEmail (email: valor), ), SizedBox (altura: 8,0), TextFormField ( controlador: _passwordTextController, focusNode: _focusPassword, obscureText: true, validador: (valor)=> Validator.validatePassword (senha: valor), ), ], ),
)

Adicione dois botões dentro do Form : um para fazer login e outro para navegar até a RegisterPage :

 Row ( mainAxisAlignment: MainAxisAlignment.spaceBetween, crianças: [ Expandido ( filho: ElevatedButton ( onPressed: () async { if (_formKey.currentState!.validate ()) { Do utilizador? user=await FireAuth.signInUsingEmailPassword ( email: _emailTextController.text, senha: _passwordTextController.text, ); if (usuário!=nulo) { Navigator.of (contexto) .pushReplacement ( MaterialPageRoute (construtor: (contexto)=> ProfilePage (usuário: usuário)), ); } } }, filho: Texto ( 'Entrar', style: TextStyle (color: Colors.white), ), ), ), Expandido ( filho: ElevatedButton ( onPressed: () { Navigator.of (contexto).push ( MaterialPageRoute (construtor: (contexto)=> RegisterPage ()), ); }, filho: Texto ( 'Registro', style: TextStyle (color: Colors.white), ), ), ), ],
)

Dentro do botão Login , chamamos FireAuth.signInUsingEmailPassword () para realizar o processo de login usando Firebase Authentication.

A RegisterPage também conterá um Form semelhante a este, apenas mais um campo estaria lá para aceitar o nome do usuário quando ele se inscreve pela primeira vez.

Você pode verificar o código da IU para a RegisterPage aqui .

Crie a página de perfil

Na ProfilePage , passaremos o objeto User e mostraremos os seguintes detalhes: nome, e-mail e se o usuário concluiu a validação do e-mail.

Esta página também conterá dois botões: um para enviar verificação de e-mail e outro para desconectar o usuário.

 class ProfilePage extends StatefulWidget { usuário final; const ProfilePage ({necessário this.user}); @sobrepor _ProfilePageState createState ()=> _ProfilePageState ();
}
class _ProfilePageState extends State  { bool _isSendingVerification=false; bool _isSigningOut=false; late User _currentUser; @sobrepor void initState () { _currentUser=widget.user; super.initState (); } @sobrepor Construção de widget (contexto BuildContext) { return Scaffold ( appBar: AppBar ( título: Texto ('Perfil'), ), corpo: Centro ( filho: coluna ( mainAxisAlignment: MainAxisAlignment.center, crianças: [ Texto( 'NOME: $ {_ currentUser.displayName}', estilo: Theme.of (context).textTheme.bodyText1, ), SizedBox (altura: 16,0), Texto( 'EMAIL: $ {_ currentUser.email}', estilo: Theme.of (context).textTheme.bodyText1, ), SizedBox (altura: 16,0), _currentUser.emailVerified ? Texto( 'Email verificado', estilo: Theme.of (contexto) .textTheme .bodyText1! .copyWith (color: Colors.green), ) : Texto( 'Email não verificado', estilo: Theme.of (contexto) .textTheme .bodyText1! .copyWith (color: Colors.red), ), //Adicionar widgets para verificação de e-mail //e, desconectando o usuário ], ), ), ); }
}

O botão para enviar verificação de e-mail é o seguinte:

 ElevatedButton ( onPressed: () async { esperar _currentUser.sendEmailVerification (); }, filho: Texto ('Verificar e-mail'),
)

Também adicionaremos um IconButton , que pode ser usado para atualizar o usuário quando o e-mail for verificado.

 IconButton ( ícone: Ícone (Icons.refresh), onPressed: () async { Do utilizador? usuário=espera FireAuth.refreshUser (_currentUser); if (usuário!=nulo) { setState (() { _currentUser=user; }); } },
)

Por último, o botão para desconectar o usuário:

 ElevatedButton ( onPressed: () async { esperar FirebaseAuth.instance.signOut (); Navigator.of (context).pushReplacement ( MaterialPageRoute ( construtor: (contexto)=> LoginPage (), ), ); }, filho: Texto ('Sair')
)

Persistir o estado de login

Ainda há mais uma coisa importante a fazer. Na maioria dos aplicativos, você só precisa fazer login uma vez e ele se lembra do status nas visitas subsequentes-ou seja, ele conecta você automaticamente ao aplicativo para que você não precise fornecer suas credenciais todas as vezes.

Dentro da classe _LoginPageState , modifique o método _initializeFirebase () para recuperar o usuário atual. Se o User não for nulo, isso significa que o usuário já está conectado ao aplicativo, portanto, navegue até a UserInfoScreen com o usuário recuperado.

 Futuro  _initializeFirebase () async { FirebaseApp firebaseApp=await Firebase.initializeApp (); Do utilizador? user=FirebaseAuth.instance.currentUser; if (usuário!=nulo) { Navigator.of (context).pushReplacement ( MaterialPageRoute ( construtor: (contexto)=> ProfilePage ( usuário: usuário, ), ), ); } return firebaseApp;
}

Conclusão

Parabéns! Você integrou com sucesso o Firebase Authentication ao seu aplicativo Flutter. Como você deve ter notado, o Firebase Authentication não só fornece a infraestrutura de back-end para autenticar usuários facilmente, mas também os métodos predefinidos para login automático e verificação de e-mail. E há muito mais para explorar; O Firebase Authentication também oferece suporte para integração com vários provedores de identidade, incluindo Google, Facebook, Twitter, Apple, etc.

Você pode encontrar o código usado no projeto de amostra em GitHub .

Se você tiver alguma sugestão ou dúvida sobre este tutorial de autenticação Flutter e Firebase, sinta-se à vontade para entrar em contato comigo em Twitter ou LinkedIn .

A postagem Implementando Firebase Authentication em um aplicativo Flutter apareceu primeiro no LogRocket Blog .