Tutorial Authenticator Firebase

Prévia do material em texto

Daniel Cavalcanti – Daniel.cavalcanti@outlook.com.br 
Preparação Inicial 
Todos os comandos devem ser executados dentro da pasta do projeto, por exemplo, meu 
projeto encontra-se na pasta c:/ionic-proj/myApp, então abrir o Node Command Prompt e 
executar: 
 cd c:/ionic-proj/myApp 
 
Abrir o Visual Studio, selecionar o pasta do projeto 
 File > Open Folder > Selecionar pasta (c:/ionic-proj/myApp) 
 
1. Instalação ionic + Firebase (Prompt) 
 ionic cordova plugin add cordova-plugin-firebase 
 npm install @ionic-native/firebase 
 npm install @angular/fire firebase --save 
 
2. Variáveis de ambiente (pasta do projeto/src/environments) 
export const environment = { 
 production: true, 
 firebase : { 
 apiKey: "AIzaSyD-a5_iWdNDRTHBo81MP0ukiMlCTjkbQbI", 
 authDomain: "senac-20195.firebaseapp.com", 
 databaseURL: "https://senac-20195.firebaseio.com", 
 projectId: "senac-20195", 
 storageBucket: "senac-20195.appspot.com", 
 messagingSenderId: "604562411891", 
 appId: "1:604562411891:web:32865d9dcb1fbe2d3ff506" 
 } 
}; 
 
3. Gerar Páginas 
Criar páginas do aplicativo 
 ionic generate page login 
 ionic generate page clientes 
 ionic generate page clientes-novo 
 ionic generate page sair 
 
 
4. Configurar App Module (src/app/app.module.ts) 
Configurar o módulos para firebase e liberação de serviços http 
imports: [ 
 BrowserModule, 
 IonicModule.forRoot(), 
 AppRoutingModule, 
 AngularFireModule.initializeApp(environment.firebase), 
 HttpClientModule, 
 AngularFirestoreModule, 
 AngularFireStorageModule 
 ], 
 
import { HttpClientModule } from '@angular/common/http'; 
import { AngularFireModule } from '@angular/fire'; 
import { AngularFirestoreModule } from '@angular/fire/firestore'; 
import { AngularFireStorageModule } from '@angular/fire/storage'; 
import { environment } from 'src/environments/environment'; 
 
 
5. Trabalhar o roteamento das páginas (src/app/app-routing.module.ts) 
import { NgModule } from '@angular/core'; 
import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; 
import { AngularFireAuthGuard, redirectUnauthorizedTo } from '@angular/fire/auth-
guard'; 
 
const redirectToLogin = () => redirectUnauthorizedTo(['login']); 
 
const routes: Routes = [ 
 { 
 path: '', 
 redirectTo: 'login', 
 pathMatch: 'full' 
 }, 
 { 
 path: 'login', 
 loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule) 
 }, 
 { 
 path: 'clientes', 
 loadChildren: () => import('./clientes/clientes.module').then( m => m.ClientesPag
eModule), 
 canActivate : [AngularFireAuthGuard], 
 data : {authGuardPipe : redirectToLogin} 
 }, 
 
6. Recursos dinâmicos (template-service) 
 Criar uma pasta em src/app com o nome de services 
 Criar o arquivo template.service.ts nesta pasta 
 Código do arquivo: https://raw.githubusercontent.com/danielCavalcanti553/ionic-
cliente-crud-upload/master/src/service/template.ts 
 
7. Página de Login (src\app\login) 
7.1. Login.page.ts 
import { Component, OnInit } from '@angular/core'; 
import { FormGroup, FormBuilder, Validators } from '@angular/forms'; 
import { AngularFireAuth } from '@angular/fire/auth'; 
import { NavController, MenuController } from '@ionic/angular'; 
import { TemplateService } from '../services/template.service'; 
 
@Component({ 
 selector: 'app-login', 
 templateUrl: './login.page.html', 
 styleUrls: ['./login.page.scss'], 
}) 
export class LoginPage implements OnInit { 
 
 formGroup : FormGroup; 
 
 constructor(private formBuilder : FormBuilder, 
 private auth : AngularFireAuth, 
 private navCtrl : NavController, 
 private menuCtrl : MenuController, 
 private template : TemplateService 
 ) { 
 this.iniciarForm(); 
 } 
 
 ngOnInit() { 
 } 
 
 autenticar() { 
 
 let user = this.formGroup.controls['username'].value; 
 let pass = this.formGroup.controls['password'].value; 
 
 this.template.loading.then(load=>{ 
 this.auth.signInWithEmailAndPassword(user,pass).then(data=>{ 
 load.dismiss(); 
 this.menuCtrl.enable(true); 
 this.navCtrl.navigateRoot(['clientes']); 
 
 }).catch(data=>{ 
 load.dismiss(); 
 this.template.myAlert("Erro ao atenticar"); 
 }); 
 }) 
 } 
 
 iniciarForm(){ 
 this.formGroup= this.formBuilder.group({ 
 username : ['',[Validators.email] ], 
 password: ['', [Validators.required, Validators.minLength(13), Validato
rs.maxLength(16)]] 
 }) 
 } 
 
} 
 
 
7.2. Login.module.ts 
Declarar ReactiveFormsModule, pois estamos utilizando o FormGroup para login 
import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 
import { IonicModule } from '@ionic/angular'; 
import { LoginPageRoutingModule } from './login-routing.module'; 
import { LoginPage } from './login.page'; 
 
@NgModule({ 
 imports: [ 
 CommonModule, 
 FormsModule, 
 IonicModule, 
 LoginPageRoutingModule, 
 ReactiveFormsModule 
 ], 
 declarations: [LoginPage] 
}) 
export class LoginPageModule {} 
 
 
7.3. Login.page.html 
<ion-header> 
 <ion-toolbar> 
 <ion-title>login</ion-title> 
 </ion-toolbar> 
</ion-header> 
 
<ion-content> 
 <form [formGroup]="formGroup"> 
 <ion-item> 
 <ion-label>Email</ion-label> 
 <ion-input type="text" formControlName="username"></ion-input> 
 </ion-item> 
 
 <ion-item> 
 <ion-label>Senha</ion-label> 
 <ion-input type="password" formControlName="password"></ion-input> 
 </ion-item> 
 
 <ion-button (click)="autenticar()" expand="full">Login</ion-button> 
 
 </form> 
</ion-content> 
 
8. Menu 
Configurar a navegação no menu lateral... 
public appPages = [ 
 { 
 title: 'Home', 
 url: '/clientes', 
 icon: 'mail' 
 }, 
 { 
 title: 'Novo Cliente', 
 url: '/clientes-novo', 
 icon: 'paper-plane' 
 }, 
 { 
 title: 'Sair', 
 url: '/sair', 
 icon: 'exit' 
 }, 
 
 ]; 
 public labels = []; 
... 
9. Logoff 
Finalizar a sessão do usuário 
import { Component, OnInit } from '@angular/core'; 
import { NavController, MenuController } from '@ionic/angular'; 
import { AngularFireAuth } from '@angular/fire/auth'; 
 
@Component({ 
 selector: 'app-logoff', 
 templateUrl: './logoff.page.html', 
 styleUrls: ['./logoff.page.scss'], 
}) 
export class LogoffPage implements OnInit { 
 
 constructor(private navCtrl : NavController, 
 private auth: AngularFireAuth, 
 private menuCtrl : MenuController) { } 
 
 ngOnInit() { 
 this.logout(); 
 } 
 
 logout(){ 
 this.auth.signOut().then(data=>{ 
 this.menuCtrl.enable(false); 
 this.navCtrl.navigateRoot(['/login']); 
 }) 
 } 
} 
 
8. Testar 
 ionic serve 
 
 
 
Enviar para o GitHub 
 Instalação Git: https://git-scm.com/downloads 
 Criar uma conta no github: https://github.com/ 
 Criar um novo repositório > Manter as configurações padrões 
 
Lista de Comandos 
 git config --global user.email "seu email do github" 
 git config --global user.name "seu nome" 
 git init 
 git add . 
 git commit -m "Primeira versão" 
 git remote add origin [seu repositório] 
 git push -u origin master