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
- Aula 2: Como criar um login com uma conta do Google com Ionic 2 e Firebase
- Aula 3: Como criar um login com uma conta do Facebook com Ionic 2 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
- AngularFire2: https://github.com/angular/angularfire2
- Firebase: https://firebase.google.com/
- Firebase documentação: https://firebase.google.com/docs/
- Documentação da interface de autenticação: https://firebase.google.com/docs/reference/js/firebase.auth.Auth
Eu espero que esse vídeo tenha sido útil para você. Qualquer dúvida deixe seu comentário abaixo.
https://uploads.disquscdn.com/images/2cc45ac3efbb7c1b4916a32f282052979c4daa4ba17ac6bf9eacd7797c498b68.png Olá, gostei muito do video seu passo a passo é bem detalhado.
Porém no minuto 12 quando você vai emular, eu não consigo.
Abre pra mim a pagina padrão do ionic
onde estou errando ?
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!
Obrigado Felipe!
Foi muito útil sim!
mas como você fez pra gerar o webClientId do Google ?
Valeu!
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!
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
Respondendo a suas perguntas.
Acredito que não tem problema gerar pelo Google API’ss.
E sim, posso te ajudar!
Só mandar pro email contato@fabricadecodigo.com.
Valeu! =]
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.
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!
Felipe, tentei usar o comando ionic serve no cmd e no navegador deu o seguinte erro :
https://uploads.disquscdn.com/images/126ac53cdcde6fe05235279ed5facc79d03c045332beef1eda5dd5ae577bcf75.png
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!
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!
Fala Paulo, pode me mandar suas dúvidas para o email contato@fabricadecodigo.com ou la no messenger do Facebook http://m.me/fabricadecodigo
Valeu
https://uploads.disquscdn.com/images/acd29abe9a0eff1a025460de0920a0c3bd60cf54224a1a4c2d9e12a4d192282e.png Ola parabéns pelo tutorial. Estou fazendo e está dando erro. Quanto o import { User } ele dá erro no caminho ./user. acredito que deva ter mudado. Não consigo importar o user teria alguma dica ? obrigado.
Fala Ricardo, só de ver a imagem assim eu não tenho ideia do que pode ser.
Consegue me enviar seu código ou parte dele?
Agradeço o retorno. Deu certo aqui a primeira parte deu certo. Obrigado.
Show!
node versao 6.11.3
ionic versao 3.12.0
Apresenta este erro :
https://uploads.disquscdn.com/images/40a0daba9edf51d5dc4af5014c84062af5d0a78a15c25e329271e0697f457df7.png
Fala kerensky, você instalou o Firebase?
Estou com o mesmo problema do Kerensky,
Namespace ‘firebase’ has no exported member ‘Promise’.
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.
sim, instalei
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.
fiz tudo o tutorial, e estou recebendo o seguinte erro:
Can’t resolve all parameters for AuthService: ([object Object], ?, ?, ?).
oque pode ser?
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!
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
Fala Lucas, blz?
Para salvar mais informações do usuario você vai precisar usar o Realtime Database e criar um nó de usuários no banco.
Você pode ver um exemplo com esse código: https://gist.github.com/fabricadecodigo/ef0a997a7faa6b5fcd4b9a6f57994f1a
Valeu
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.
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!
Confirma por msn pelo número de celular é complicado? Tem com dá um caminho ?
Fala Alex, blz?
Tem como fazer autenticação pelo numero de celular sim.
Você pode olhar direto na documentação do Firebase: https://firebase.google.com/docs/auth/web/phone-auth
Valeu
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 !
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 ?