Header Ads Widget

Ticker

6/recent/ticker-posts

Tutorial de autenticación de Ionic 5 Firebase

 En este tutorial, aprenderá cómo agregar autenticación a su aplicación Ionic 5 (basada en Angular) usando Firebase.

Agregar autenticación a aplicaciones Ionic 5 con Firebase

La mayoría de las aplicaciones web listas para producción requieren algún tipo de autenticación de usuario (con el correo electrónico y la contraseña tradicionales o el inicio de sesión único social a través de Facebook o Google, etc.). En esta publicación de blog, aprenderemos cómo podemos agregar fácilmente el inicio de sesión y el registro de usuario a las aplicaciones Ionic 5 / Angular (móvil o web) con Firebase de Google, utilizando la biblioteca oficial de angularFire2 para la integración.

Vamos a cubrir la autenticación de correo electrónico / contraseña y el inicio de sesión social de Facebook, en detalles. Para los otros métodos como Twitter, Google y GitHub o SMS e inicio de sesión anónimo, los cubriremos en detalles en otros tutoriales.

Antes de poder agregar autenticación con Firebase a su aplicación Ionic 5 / Angular o Angular 4+, debe registrarse para obtener una cuenta, crear una aplicación Firebase y luego obtener la URL de la aplicación para integrar su aplicación con Firebase.

También puede leer cómo implementar la autenticación JWT con TypeScript, Node e Ionic 5 .

Crea un nuevo proyecto de Firebase

Para crear una cuenta, diríjase a su página de Inicio y luego siga la información allí para configurar su cuenta.

Una vez que haya creado una cuenta de Firebase, continúe y cree un proyecto en el panel de Firebase. Simplemente haga clic en Agregar proyecto para crear un nuevo proyecto.

Aparecerá un cuadro que le pedirá que proporcione información sobre su proyecto. Simplemente ingrese un nombre para su proyecto y luego haga clic en el botón CREAR PROYECTO .

Se creará su proyecto y se lo dirigirá a un panel donde podrá administrar diferentes configuraciones de su aplicación. Como primer paso, haga clic en Agregar Firebase a su aplicación web

Luego copie la información en el objeto de configuración

En este punto, querrá conectar su back-end de Firebase con su aplicación Ionic 5 / Angular o Angular 4. Consulte Vincular Ionic 5 / Angular y Angular 4 con Firebase mediante AngularFire2

Cierre la página para volver a la descripción general del proyecto .

Para usar la función de autenticación de Firebase, debemos habilitar los proveedores de inicio de sesión que elegimos usar en nuestro proyecto. Por ejemplo, si desea utilizar Google, Facebook y Twitter para registrar e iniciar sesión como usuarios. Aquí está lo que tú necesitas hacer:

En la barra lateral izquierda, haga clic en Autenticación

Se le llevará a una página donde podrá habilitar diferentes métodos de autenticación, agregar usuarios manualmente y personalizar cosas como plantillas de correo electrónico o SMS.

En la pestaña Método de inicio de sesión, puede habilitar una variedad de proveedores de inicio de sesión, como Correo electrónico y contraseña, Teléfono, Facebook, Google, Twitter, GitHub y Anónimo.

También puede agregar dominios autorizados que pueden acceder a su aplicación de Firebase. De forma predeterminada, hay dos: localhost para desarrollo y la URL de su aplicación Firebase.

En la pestaña Plantillas puede personalizar diferentes plantillas para verificación de correo electrónico, restablecimiento de contraseña, cambio de dirección de correo electrónico o verificación por SMS. También puede cambiar el idioma de la plantilla.

Los proveedores de inicio de sesión único, como Facebook, Twitter y Github, requieren que tenga una aplicación, un cliente o un ID de API y claves secretas, y use OAuth URI como el URI de redireccionamiento.

Entonces, para poder usar estos servicios con Firebase, tendrá que crear una aplicación para cada servicio yendo a la cuenta de desarrollador asociada para cada uno de estos proveedores (Facebook, Twitter y GitHub).

Configuración de servicios de terceros

Crear una aplicación de Facebook

Comencemos con Facebook, para crear una aplicación, diríjase a la página de aplicaciones de su desarrollador, agregue una nueva aplicación haciendo clic en el botón Agregar nueva aplicación en la esquina superior derecha.

Se le pedirá un ID de aplicación y un secreto de aplicación que puede encontrar en la página de configuración de Firebase.

El siguiente paso es proporcionar una plataforma web. así que continúe y haga clic en Agregar plataforma y luego proporcione la URL del sitio con el URI de OAuth de su configuración de Firebase.

Crear una aplicación de GitHub

Si desea agregar autenticación con GitHub a su aplicación, también debe crear una aplicación Github. Vaya a la configuración de desarrollador y registre una nueva aplicación.

Luego, use Client ID y Client Secret en su página de configuración de Firebase.

Asegúrese de completar la URL de devolución de llamada de autorización para su aplicación GitHub usando el URI de OAuth de Firebase.

Crear una aplicación de Twitter

Para crear una aplicación de Twitter, debe ir a la configuración de Administración de Twitter y luego crear una nueva aplicación.

Asegúrese de completar la URL de devolución de llamada en la pestaña Configuración usando el URI de OAuth de Firebase.

A continuación, deberá agregar la clave de API de su aplicación y el secreto de API en su configuración de Firebase.

Eso es. Ahora puede agregar autenticación social de terceros con Google, Twitter, Github y Facebook, con Firebase, a su aplicación web.

Vinculando Ionic 5 / Angular y Angular 4 con Firebase usando AngularFire2

Hay muchas formas de integrar Firebase con Ionic y Angular. Cubramos uno de ellos --- AngularFire2.

AngularFire2 es la biblioteca oficial para la integración de Firebase y Angular. Proporciona muchas funciones sobre las otras formas de integrar Firebase con Ionic y Angular, como:

  • Basado en observaciones: use el poder de RxJS, Angular y Firebase.
  • Enlaces en tiempo real: sincronice datos en tiempo real.
  • Autenticación: inicie sesión en usuarios con una variedad de proveedores y monitoree el estado de autenticación en tiempo real.
  • Datos sin conexión: almacene datos sin conexión automáticamente con
  • AngularFirestore. compatible con ngrx: integre con ngrx usando
  • API basadas en acciones de AngularFire: https://github.com/angular/angularfire2

Ahora veamos un ejemplo de cómo usar AngularFire2 con Ionic 5 / Angular.

Autenticación de correo electrónico y contraseña con Firebase

En esta aplicación, voy a utilizar el esquema tradicional de autenticación de correo electrónico y contraseña.

Cree una aplicación Ionic 5 / Angular

Así que asegúrese de tener la CLI de Ionic más reciente. De lo contrario, actualice o instale la última versión de Ionic CLI y luego siga estos pasos:

Comencemos generando un nuevo proyecto Ionic 5 / Angular. Dirígete a tu terminal o símbolo del sistema (en Windows) y luego ejecuta lo siguiente:

$ ionic start firebaseAuthExample blank --type=angular

Una vez que su proyecto esté completamente generado, navegue a la carpeta raíz y luego instale firebase y angularfire2 desde npm:

npm install firebase  angularfire2 --save

Esto instalará angularfire2 y firebase y los agregará package.jsoncomo dependencias.

Abra src/app/app.module.tsen el proyecto Ionic y luego agregue lo siguiente para importar AngularFireModule y AngularFireAuthModule

import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth'

Copie la información de configuración de Agregar Firebase a la página de su aplicación web

var CREDENTIALS = {
    apiKey: '<your-key>',
    authDomain: '<your-project-authdomain>',
    databaseURL: '<your-database-URL>',
    projectId: '<your-project-id>',
    storageBucket: '<your-storage-bucket>',
    messagingSenderId: '<your-messaging-sender-id>'

};

Ahora necesita agregar los módulos AngularFireModule y AngularFireAuthModule a su proyecto src/app/app.module.tsY pase el objeto de configuración (CREDENTIALS) a la función initializeApp () .

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(CREDENTIALS),
    AngularFireAuthModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ahora puede entregar su solicitud con:

$ ionic serve

Habilitación de la autenticación de correo electrónico y contraseña

¡Si aún no lo ha hecho! asegúrese de habilitar la Autenticación de correo electrónico y contraseña yendo a la pestaña Autenticación que vimos anteriormente y luego habilite el método Correo electrónico / Contraseña desde la pestaña Método de inicio de sesión .

Agregar autenticación

A continuación, debe crear las páginas de inicio de sesión y registro de Ionic siguiendo estos pasos:

  • primero inyecte AngularFireAuth en el constructor del componente
  • luego use la instancia inyectada (llamémosla fAuth ) para llamar a this.fAuth.auth.signInWithEmailAndPassword (user.email, user.password) para autenticar a un usuario con correo electrónico y contraseña y this.fAuth.auth.createUserWithEmailAndPassword (user.email, user.password) para registrar usuarios.
  • use este método.fAuth.auth.logout () para cerrar sesión
  • también puede agregar inicio de sesión social con this.fAuth.auth.login ({proveedor: número, método: AuthMethods})

Agregar una página de registro

Generemos ahora una página de registro que permita a los usuarios registrar una cuenta, si no están registrados, proporcionando su correo electrónico y contraseña. Usaremos un formulario con dos <ion-input>controles para obtener las credenciales de correo electrónico y contraseña y un formulario <button>para registrar al usuario.

Así que regresa a tu terminal y luego ejecuta el siguiente comando:

$ ionic generate page Register

Esto generará una RegisterPage y la agregará a la de su proyecto src/app/app.module.ts.

Abra y register.tsluego agregue el siguiente código para registrar usuarios:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AngularFireAuth } from 'angularfire2/auth';

export class User {
    email: string;
    password: string;
}


@IonicPage()
@Component({
  selector: 'page-register',
  templateUrl: 'register.html',
})
export class RegisterPage {

  public user:User = new User();

  constructor(public navCtrl: NavController, public navParams: NavParams,public fAuth: AngularFireAuth){
  }


  async register() {
    try {
      var r = await this.fAuth.auth.createUserWithEmailAndPassword(
        this.user.email,
        this.user.password
      );
      if (r) {
        console.log("Successfully registered!");
        this.navCtrl.setRoot('LoginPage');
      }

    } catch (err) {
      console.error(err);
    }
  }
}

Hemos inyectado AngularFireAuth como fAuth y luego lo usamos this.fAuth.auth.createUserWithEmailAndPassword(email,password)para crear un usuario en la base de datos de Firebase asociada a nuestro proyecto. Este método devuelve una Promise, por lo que hemos usado las nuevas instrucciones async / await para esperar a que regrese la promesa. También hemos envuelto la lógica de registro con un bloque try / catch para detectar errores inesperados.

Si el usuario se registra con éxito, lo redirigimos a la página de inicio de sesión que vamos a crear a continuación.

register.htmlcontinuación, abra y agregue el siguiente código para crear una interfaz simple para obtener las credenciales de usuario.

<ion-header>
  <ion-navbar color="primary">
    <ion-title>Register</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-item>
    <ion-label>Email Address</ion-label>
    <ion-input type="text" [(ngModel)]="user.email"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label>Password</ion-label>
    <ion-input type="password" [(ngModel)]="user.password"></ion-input>
  </ion-item>

  <button ion-button  (click)="register()">Register</button>
</ion-content>

Agregar una página de inicio de sesión

El siguiente paso es agregar una página de inicio de sesión que se utilizará para iniciar sesión en los usuarios una vez que estén registrados.

Regrese a su terminal o símbolo del sistema y luego ejecute el mismo comando de generación iónica para crear una página de inicio de sesión

$ ionic generate page Login

login.tscontinuación, abra y luego agregue el siguiente código para implementar la lógica de inicio de sesión

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AngularFireAuth } from 'angularfire2/auth';

export class User {
    email: string;
    password: string;
}


@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {

  public user:User = new User();

  constructor(public navCtrl: NavController, public navParams: NavParams,public fAuth: AngularFireAuth){
  }


  async login() {
    try {
      var r = await this.fAuth.auth.signInWithEmailAndPassword(
        this.user.email,
        this.user.password
      );
      if (r) {
        console.log("Successfully logged in!");
        this.navCtrl.setRoot('HomePage');
      }

    } catch (err) {
      console.error(err);
    }
  }
}

El método login () tiene aproximadamente la misma lógica de register () . Solo cambiamos el método createUserWithEmailAndPassword()con y signInWithEmailAndPassword()luego redirigimos al usuario a HomePage en lugar de LoginPage .

Ahora abra y login.htmlluego agregue el siguiente código para crear la interfaz:

<ion-header>
  <ion-navbar color="primary">
    <ion-title>Login</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-item>
    <ion-label>Email Address</ion-label>
    <ion-input type="text" [(ngModel)]="user.email"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label>Password</ion-label>
    <ion-input type="password" [(ngModel)]="user.password"></ion-input>
  </ion-item>

  <button ion-button  (click)="login()">Login</button>
</ion-content>

Ahora debería poder registrarse e iniciar sesión con Firebase.

Cierre de sesión de Firebase

También puede agregar fácilmente un método para cerrar la sesión de los usuarios.

Abra y src/pages/home/home.htmlluego agregue un botón para permitir a los usuarios cerrar sesión una vez que hayan iniciado sesión.

  <button ion-button  (click)="logout()">Logout</button>

Luego agregue el siguiente método al src/pages/home/home.tsque inyecta AngularFireAuth como fAuth y luego llame this.fAuth.auth.signOut()para cerrar sesión.

/*...*/

import { AngularFireAuth } from 'angularfire2/auth';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController, public navParams: NavParams,public fAuth: AngularFireAuth) {

  }
  logout() {
    this.fAuth.auth.signOut();
  }
}

Iniciar sesión con Firebase y Facebook

Una vez que configure una aplicación de Facebook en https://developers.facebook.com/apps y habilite Facebook como método de inicio de sesión en la pestaña de autenticación (Autenticación -> Método de inicio de sesión -> Facebook).

Instalación del complemento Cordova y el contenedor nativo iónico para Facebook

A continuación, debe agregar el complemento Cordova para Facebook

$ ionic plugin add cordova-plugin-facebook4 --variable APP_ID="YOUR_FB_APP_ID" --variable APP_NAME="YOUR_FB_APP_NAME"

También debe proporcionar el comando con los secretos de la aplicación de Facebook, es decir, APP_ID y APP_NAME . Puedes encontrarlos en tu panel de desarrolladores de Facebook.

A continuación, debe instalar el contenedor Ionic Native para el complemento Cordova que acabamos de instalar, así que nuevamente regrese a su terminal y ejecute:

npm install --save @ionic-native/facebook

Debe agregar este complemento a la lista de proveedores en su aplicación Ionic:

Abra y src/app/app.module.tsluego agregue lo siguiente:

/*...*/
import { Facebook } from '@ionic-native/facebook';

/*...*/

@NgModule({
  /*...*/
  providers: [ /*...*/, Facebook ]

  /*...*/
})
export class AppModule {}

Agregar sus plataformas de destino a Facebook

Un paso de configuración más que debe realizar para habilitar la autenticación social de Facebook es agregar sus plataformas de destino (es decir, Web, Android o iOS) a su aplicación de Facebook.

Para agregar las plataformas, siga adelante y dentro de su panel de Facebook haga clic en configuración, luego, justo debajo de la información de la aplicación, verá un botón que dice Agregar plataforma, haga clic en él.

Para Android o iOS, debe proporcionar a Facebook su ID de aplicación Ionic. Para iOS se llama Bundle ID , en el caso de Android se llama Nombre de paquete de Google Play .

Para obtener la identificación de su aplicación, diríjase al archivo config.xml de su proyecto


<widget id="com.techiediaries.firebaseauthdemo" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

Iniciar sesión con Facebook

Luego puede iniciar sesión en los usuarios con Facebook usando un método

  /*...*/

  import { AngularFireAuth } from 'angularfire2/auth';
  import * as firebase from 'firebase/app';
  import { Facebook } from '@ionic-native/facebook';

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {

  public user:User = new User();

  constructor(public navCtrl: NavController, public navParams: NavParams,public fAuth: AngularFireAuth){
  }
  constructor(public navCtrl: NavController,
    private fAuth: AngularFireAuth,private fb: Facebook) { }

  async loginWithFacebook() {
    try{
      await result = this.fb.login(['email']);

      const fbCredential = firebase.auth.FacebookAuthProvider.credential(result.authResponse.accessToken);

      await firebase.auth().signInWithCredential(fbCredential);

    }catch(err){
      console.error(err);
    }

  }
  /*...*/
}

Primero importamos el complemento nativo de Facebook, luego lo inyectamos como fb a través del constructor de componentes, luego le pedimos al usuario que iniciara sesión para obtener la autorización de Facebook.

Se abrirá la ventana de Facebook para pedirle al usuario que autorice a nuestra aplicación a utilizar su correo electrónico para iniciar sesión en redes sociales. Si el usuario acepta, el método this.fb.login(['email])regresa con una respuesta que contiene un token de acceso que debe usarse como argumento para iniciar firebase.auth().signInWithCredential(fbCredential)sesión.

A continuación, solo necesita agregar un botón a su src/pages/login/login.htmlpágina


    <button ion-button outline (click)="loginWithFacebook()">Login with Facebook</button>  

Puede probar la autenticación con Facebook ejecutando su aplicación en Android o iOS

ionic cordova run android|ios

Tenga en cuenta que esta implementación de loginWithFacebook () no funcionará en el navegador, ya que utiliza un complemento nativo de Cordova. En el navegador puede iniciar sesión con Facebook usando este código:

async loginWithFacebook() {
  await this.fAuth.auth
        .signInWithPopup(new firebase.auth.FacebookAuthProvider());
}

Observando el estado de autenticación

Puede ver el estado de autenticación suscribiéndose this.fAuth.authStateen el constructor:

    this.fAuth.authState.subscribe((user: firebase.User) => {
      if (user) {
        console.log("The user is logged in!"); 

      }else
      {
        console.log("The user is not logged in!");
      }
      return;
    });

Vea cómo usar RxJS BehaviorSubject para ver el estado de autenticación en su aplicación Ionic 5.

Conclusión

En este tutorial hemos visto cómo agregar autenticación tradicional de correo electrónico / contraseña e inicio de sesión social con Facebook a Ionic 5 / Angular usando Firebase y angularfire2 . También puede autenticar a sus usuarios con los otros servicios y métodos de terceros como Twitter, Google, GitHub, SMS y Firebase Anonymous que cubriremos en detalle en los próximos tutoriales.

Publicar un comentario

0 Comentarios