Requisitos
Asegurate de tener una app básica creada, similar a la que hicimos en la serie # 1 Introducción a Kikstart UI.
Paso # 1
En primer lugar generamos los componentes y el módulo que los contendrá.
1: Crea una carpeta llamada auth
y genera los componentes register, login y logout.
ng g module auth/register --route register --module app
ng g module auth/login --route login --module app
ng g module auth/logout --route logout --module app
Paso # 2
Renderizamos las rutas de los componentes creados.
1: Abre el archivo app.component.ts
y agrega los labels dentro del array de links asi:
{ label: 'Register', path: '/register'},
{ label: 'Login', path: '/login' },
{ label: 'Logout', path: '/logout'},
Paso # 3
Creamos el servicio,lo configuramos para que esté listo y utilizarlos en nuestro componente login
.
1:Crea el servicio ejecutando el comando
ng g service auth/auth
2:Añade las dependencias necesarias para utilizar las funcionalidades de firebase
. Utiliza los siguientes comandos:
npm i @angular/fire
npm install @angular/fire firebase --save
3:Abre el archivo auth.service.ts
y agrega lo siguiente en la parte superior:
import * as firebase from 'firebase';
4:En el mismo archivo auth.service.ts
agrega lo siguiente en la clase AuthService
:
export class AuthService {
user: firebase.User;
isLoggedIn: boolean;
5:Luego en el mismo archivo agrega lo siguiente en la parte superior:
import { AngularFireAuth } from '@angular/fire/auth';
6:Cuando hayamos importado AngularFireAuth
podemos inyectar su funcionalidad en el constructor:
constructor(private readonly afa: AngularFireAuth) {
this.afa.authState.subscribe((res) => {
console.log(res);
this.user = res;
this.isLoggedIn = !!this.user;
});
}
}
7:Importa el modulo para utilizar observables
asi:
import { from, Observable, ObservedValueOf } from 'rxjs';
💡Nota
Si te aparece inactiva la línea que acabas de colocar en el punto 6 , no te preocupes , apenas estamos construyendo la lógica y no hemos usado Observables, vamos con calma 😉.
8:Como último punto en este paso en el archivo auth.service.ts
agrega lo siguiente después del constructor:
login(
email: string,
password: string
): Observable<ObservedValueOf<Promise<firebase.auth.UserCredential>>> {
return from(this.afa.signInWithEmailAndPassword(email, password));
}
register(
email: string,
password: string
): Observable<ObservedValueOf<Promise<firebase.auth.UserCredential>>> {
return from(this.afa.createUserWithEmailAndPassword(email, password));
}
loginGoogle(): Observable<
ObservedValueOf<Promise<firebase.auth.UserCredential>>
> {
const provider = new firebase.auth.GoogleAuthProvider();
return from(this.afa.signInWithPopup(provider));
}
logout(): Observable<ObservedValueOf<Promise<void>>> {
return from(this.afa.signOut());
}
}
Paso # 4
Ahora crearemos las funciones para cada una de las formas de autenticación y luego las configuraremos.
💡Recuerda
En el paso anterior implementamos varias formas de autenticación cuando quieras puedes hacer uso de estos servicios solo debes configurarlo en tu componente como lo hacemos en el punto # 3 de este paso.
1: Abre el archivologin.component.ts
y agrega lo siguiente en la parte superior:
import { Router } from '@angular/router';
import { AuthService } from '../auth.service';
2:Inyecta e inicializa la forma de autenticación que usarás. En este caso usaras loginGoogle
.
private router: Router, private service: AuthService
3: En el mismo archivo login.component.ts
agrega la siguiente función:
loginGoogle(): void {
this.service.loginGoogle().subscribe((res) => {
console.log(res);
return this.router.navigate(['/']);
});
}
paso # 5
Aquí configuraremos el proyecto que creamos en firebase a nuestra app.
1:Busca en la terminal tu proyecto y ejecuta el siguiente comando:
ng add @angular/fire
💡 KikstartTip
Si es la primera vez que instalas @angular/fire en tu computador te hará preguntas como esta:
Allow Firebase to collect CLI usage and error reporting information? (Y/n)
.
2: Durante el proceso de instalación sobre el proyecto elige el que quieres desplegar.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
UPDATE package.json (1516 bytes)
✔ Packages installed successfully.
✔ Preparing the list of your Firebase projects
? Please select a project: (Use arrow keys or type to search)
❯ site2 (site2-8ce5b)
3:Configura el enviroment con las llaves de tus proyectos en firebase
.
4:En la consola de firebase
busca tu proyecto.
5:En descripción general haz clic en configuración del proyecto.
3: Busca el siguiente título:
4: Busca la ruta src/enviroments/enviroment.ts
y coloca esta secuencia de comandos con sus respectivas llaves:
export const environment = {
production: false,
firebase: {
apiKey: '',
authDomain: '',
databaseURL: '',
projectId: '',
storageBucket: '',
messagingSenderId: '',
appId: '',
measurementId: '',
},
};
5: En tu archivo app.module.ts
importa las funcionalidades de la autenticación de firebase
para utilizarlas en el siguiente paso.
Agrega las siguientes líneas en la parte superior:
import { AngularFireModule } from '@angular/fire';
import { environment } from '../environments/environment';
import { AngularFireAuthModule } from '@angular/fire/auth';
```
6: En el import del mismo archivo agrega esto:
```typescript
AngularFireModule.initializeApp(environment.firebase),
AngularFireAuthModule
```
## paso # 6
Llegó el momento de los templetes, que se haga la luz y renderizamos la lógica que hemos creado.
1: En el archivo `login.component.html` crea el templete para renderizar un formulario y un botón con ayuda de `Kikstart UI`.
```html
<!-- This flex container takes the full height and vertically centers the content -->
<div class="d-flex flex-column h-100 justify-content-center">
<div class="container">
<div class="row">
<!-- This is a single column that is responsive -->
<div class="col-12 col-md-6 offset-md-3">
<div class="card">
<div class="card-header">Login</div>
<div class="card-body">
<!-- The formGroup 'form' is defined in the component class -->
</div>
<div class="card-footer">
<div class="d-flex justify-content-between">
<a routerLink="/" class="ml-2 btn btn-outline-secondary">
Home
</a>
<!-- The button has a click handler, it will be disabled if the form is not valid -->
<button
(click)="loginGoogle()"
type="submit"
class="btn btn-outline-success"
>
Log in
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
```
2: Ve a la tu proyecto de firebase y busca la pestaña autenticación, en el botón añadir usuario ingresa un correo y una contraseña para autorizar el login.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n97w8kiltncxc9lwb4q4.png)
Ahora en la consola del navegador tu puedes ver que ya tenemos un usuario que utiliza este servicio.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d58c47zncdusvmh2g19w.png)
Sin embargo como nos damos cuenta en nuestra app que esto pasó, hagamos el siguiente paso.
## paso # 7
Creamos la lógica del logout y agregamos el código del templete para saber cuando estamos logueados o no.
1:Abre el archivo`logout.component.ts` y agrega lo siguiente en la parte superior:
```typescript
import { Router } from '@angular/router';
import { AuthService } from '../auth.service';
```
2:Inyecta e inicializa el servicio del `logout` en el constructor.
```typescript
constructor(private router: Router, private service: AuthService) {}
```
3: En el mismo archivo `logout.component.ts` agrega la siguiente función:
```Typescript
logout(): void {
this.service.logout().subscribe((res) => {
return this.router.navigate(['/']);
});
}
```
4:En el archivo `logout.component.html`agrega las siguientes líneas:
```typescript
<button (click)="logout()" class="btn btn-secondary mr-1">
logout
</button>
```
Asi dando click en el botón `logout` puedes notar que cuando ingresar al login nuevamente te solicitara tu correo.
## Resumen
Hemos agregado 3 nuevos componentes `login`, `register` y `logout`, también hemos configurado estos 3 componentes para darle autenticación a nuestra app.
Puedes encontrar el repositorio con los pasos [aquí](https://github.com/Derlys/Tutorial-auth).
Top comments (0)