Como criar um login com e-mail e senha com Ionic 2 e Firebase

32 Comentários / Firebase, Ionic Framework / Por

Nessa vídeo aula eu mostro como criar um login com e-mail e senha utilizando o Ionic 2 e Firebase.

Nela você vai aprender:

  • Criar um novo usuário
  • Autenticar um usuário utilizando e-mail e senha
  • Resetar a senha
  • Enviar e-mail de confirmar o e-mail do usuário

 

Clique no botão abaixo para ver o código fonte gerado nessa aula.

[button style=”btn-primary btn-lg” type=”link” target=”true” title=”Código fonte gerado na aula” link=”https://github.com/fabricadecodigo/ionicfirebaseauth” linkrel=””]

 

Outras formas de autenticação com Ionic e Firebase

 

Firebase

Se você ainda não conhece o Firebase, da uma olhada nesse post.

 

Passo a passo para a criação do app

1 – Criando o app com Ionic

ionic start ionicfirebaseauth blank

2 – Adicionando as dependências com o AngularFire2 e Firebase

npm install firebase angularfire2 --save

3 – Criação das paginas e do provider

ionic g page signup
ionic g page signin
ionic g page resetpassword
ionic g service auth-service

 

Referências

 

Eu espero que esse vídeo tenha sido útil para você. Qualquer dúvida deixe seu comentário abaixo.

32 comentários em “Como criar um login com e-mail e senha com Ionic 2 e Firebase”

  2. Felipe Franco

    Fala Sabino, blz?
    Seguinte, lá no app.component.ts, no constructor, eu coloquei um código para verificar se o usuário está ou não logado.
    Dependendo do status eu redireciono ele para a pagina de login ou para a home.
    O código é o abaixo:

    const authObserver = afAuth.authState.subscribe(user => {
    if (user) {
    this.rootPage = HomePage;
    authObserver.unsubscribe();
    } else {
    this.rootPage = SigninPage;
    authObserver.unsubscribe();
    }
    });

    Você pode verificar o código fonte diretamente no GitHub: https://github.com/fabricadecodigo/ionicfirebaseauth/blob/master/src/app/app.component.ts

    Consegui te ajudar?
    Valeu!

  3. sabino@aapvr.com.br aapvr

    Obrigado Felipe!
    Foi muito útil sim!
    mas como você fez pra gerar o webClientId do Google ?
    Valeu!

  4. Felipe Franco

    Oi Sabino.
    Quando você habilita a autenticação com o Google no Firebase, pelo Firebase já ser do Google, ele automaticamente gera o webClientId.
    Valeu!

  5. sabino@aapvr.com.br aapvr

    Obrigado por tirar minhas dúvidas, eu consegui gerar um Id pelo google API’s.
    Tem algum problema ?

    Eu não estou conseguindo autenticar ainda pelo google e facebook.
    vou assistir mais umas 2 vezes o video.

    Caso o erro persista, você poderia me ajudar onde estou errando ?
    Te mando meu código por e-mail.

    Desculpe o Incomodo, sou bem iniciante ainda… rsrsrs

    Obrigado

  7. Alex Schirmer

    Olá, ao executar o ionic g service auth-service dá o seguinte erro:
    [ERROR] type must be one of: component, directive, page, pipe, provider, tabs (not service)
    Use the –help flag for more details.

  8. Felipe Franco

    Fala Alex, blz?
    Muito provável que na versão mais atual não exista mais “service”.
    Você pode criar um provider que é a mesma coisa.

    ionic g provider auth-service

    Valeu!

  10. Felipe Franco

    Fala Heberth, blz?
    Esse erro aí é porque você precisa instalar os plugins do facebook, twitter, google e image picker.
    Acredito que você pegou o código que esta no meu GitHub.
    Para ele funcionar você vai precisar executar o comando “npm install” e vai precisar rodar o app no emulador ou em um celular, pois o cordova não funciona no navegador.
    Valeu!

  11. Paulo Rodrigues

    Parabéns pelo trabalho Felipe! Muito bem explicado!
    Tenho um app que tens as mesmas funcionalidades que o seu fez. Porém eu precisaria de duas funcionalidades a mais desse tipo de app, uma seria recuperar o nome do usuário logado e colocar em uma view e outra recuperar o tipo de usuário (campo que crio junto quando faço o cadastro) e dependendo desse tipo no meu menu mostrar ou não certas opções. Sei que foge desse escopo, então se puderes me contatar por e-mail agradeço!

  15. Ricardo A. Silveira

    Agradeço o retorno. Deu certo aqui a primeira parte deu certo. Obrigado.

  19. Heberth Christian

    Estou com o mesmo problema do Kerensky,
    Namespace ‘firebase’ has no exported member ‘Promise’.

  20. Felipe Franco

    Fala Heberth, blz?
    Isso pode ser problema da versão do firebase que você está.
    Tente remover o angularfire2 e o firebase e instalar novamente.

  22. Felipe Franco

    Provável que isso seja incompatibilidade entre as versões do Firebase e do AngularFirebase2. Desinstale e instale novamente e veja se o problema vai resolver.
    Valeu.

  23. Maurício

    fiz tudo o tutorial, e estou recebendo o seguinte erro:

    Can’t resolve all parameters for AuthService: ([object Object], ?, ?, ?).

    oque pode ser?

  24. Felipe Franco

    Fala Maurício, recebi seu e-mail.
    Desculpa a demora na resposta.

    É o seguinte: o​ AuthService recebe 4 parâmetros no construtor: o AngularFireAuth​, GooglePlus​, Facebook e TwitterConnect.

    constructor(private angularFireAuth: AngularFireAuth, private googlePlus: GooglePlus, private facebook: Facebook, private twitter: TwitterConnect) { }​

    O erro ocorre pois não está sendo possível injetar os 3 últimos: GooglePlus​, Facebook e TwitterConnect.
    Isso pode ser porque você está tentando testar no browser e os plugins do cordova não funcionam no browser ou porque você não instalou os plugins do GooglePlus​, Facebook e TwitterConnect​.

    Valeu!

  25. Lucas

    Bom dia! Como faço para cadastrar mais dados do usuário além de e-mail e senha? Eu preciso cadastrar nome, CPF e outros dados. Valeu

  27. Guilherme

    Bom dia Felipe.

    Primeiramente parabéns pelo conteúdo redigido. Gostaria de saber como posso mostrar apenas os contatos registrados por determinado usuário? Onde assim, cada usuário cadastrado e logado terá sua lista de contatos.

    Obrigado.
    Valeu.

  28. Felipe Franco

    Fala Guilherme, blz?
    Obrigado pelo feedback!

    Sobre sua dúvida: você pode colocar o id do usuário logado como parte do caminho do database. Assim cada usuário terá seu nó com dados.
    Ex.:

    this.db.list(‘contatos/’ + ID DO USUARIO LOGADO)
    .push({ name: contact.name, tel: contact.tel });

    Valeu!

  29. Alex Cardoso Alves

    Confirma por msn pelo número de celular é complicado? Tem com dá um caminho ?

  31. Vilian Santos

    Excelente! Felipe, estou com problemas em relação ao procedimento de modo geral, muitos erros estão aparecendo… será por conta da versão do fire base ou até mesmo do ionic? Há variação quanto ao procedimento dependendo das versões do ionic / firebase utilizadas?

    Desde já, agradeço pela sua disposição em ajudar !

  32. Rafael Moura Moura

    Felipe, teus tutors são demais, vc é fera, por aqui tudo certo funcionando direitinho, so tenho uma dúvida, quero pegar o UID deste camarada que loga para usar em outras pages, no auth service eu criei
    :setUid(uid: string): void {
    this.uid = uid;
    }

    getUid(): string {
    return this.uid;
    }

    e na page que preciso pegar o UID deste cara fiz:
    login() {
    if(this.user.valid) {
    this.service.signIn(this.user.value)
    .then(() => {
    this.navCtrl.setRoot(‘HomePage’);
    })
    .catch((error: any) => {
    if(error.code == ‘auth/invalid-email’) {
    this.presentToast(‘Email inválido!’);
    } else if(error.code == ‘auth/user-disabled’) {
    this.presentToast(‘Usuário não existe!’);
    } else if(error.code == ‘auth/user-not-found’) {
    this.presentToast(‘Usuário não encontrado!’);
    } else if(error.code == ‘auth/wrong-password’) {
    this.presentToast(‘Senha errada!’);
    }
    })
    }
    }

    pode me ajudar amigão ?

Comentários encerrados.