Este artículo trata sobre cómo implementar Autenticación en un Angular usando AWS amplify en un periodo de tiempo muy corto. Como empresa de desarrollo especializada, ofrecemos los servicios de software a medida y un equipo dedicado a ayudar a nuestros clientes en este tipo de implantaciones.

Así que, como vimos en el artículo anterior,

AWS Amplify es un conjunto de herramientas y servicios que permite a los desarrolladores web móviles y front-end crear aplicaciones de pila completa seguras y escalables con la tecnología de AWS.

Por lo tanto, aquí vamos a explorar otro caso de uso de AWS amplificar, que es añadir la autenticación a la aplicación web angular utilizando amplificar de 2 maneras,

1. Utilizar componentes de interfaz de usuario predefinidos

2. Llamar manualmente a las API de autenticación

Requisitos previos:

• Node.js versión 10 o posterior
• Cuenta AWS

Crear una nueva aplicación Angular

Utiliza la CLI de Angular para arrancar una nueva aplicación Angular:

npx -p @angular/cli ng new amplify-app

? Would you like to add Angular routing? Y
? Which stylesheet format would you like to use? (your preferred stylesheet provider)

cd amplify-app

Compatibilidad con Angular 6+

Actualmente, las versiones más recientes de Angular (6+) no incluyen calces para ‘global’ o ‘process’ como se proporcionaban en versiones anteriores. Añade lo siguiente a tu archivo src/polyfills.ts para recrearlos:

(window as any).global = window;
(window as any).process = {
  env: { DEBUG: undefined },
};

Iniciar el proyecto Amplify

Ahora que tenemos una aplicación Angular en ejecución, es el momento de configurar Amplify para esta aplicación

amplify init

Enter a name for the project (amplify-auth-angular)

# All AWS services you provision for your app are grouped into an "environment"
# A common naming convention is dev, staging, and production
Enter a name for the environment (dev)

# Sometimes the CLI will prompt you to edit a file, it will use this editor to open those files.
Choose your default editor

# Amplify supports JavaScript (Web & React Native), iOS, and Android apps
Choose the type of app that you're building (javascript)

What JavaScript framework are you using (angular)

Source directory path (src)

Distribution directory path (dist)
Change from dist to dist/amplify-auth-angular

Build command (npm run-script build)

Start command (ng serve or npm start)

# This is the profile you created with the `amplify configure` command in the introduction step.
Do you want to use an AWS profile

The above given process creates a file called aws-exports.js in the src directory

Instala las dependencias de Amplify y Angular

Dentro del directorio amplify-auth-angular, instala la librería Amplify Angular y ejecuta tu aplicación:

npm install --save aws-amplify @aws-amplify/ui-angular

npm start

El paquete @aws-amplify/ui-angular es un conjunto de componentes Angular y un proveedor Angular que ayuda a integrar su aplicación con la biblioteca AWS-Amplify.

Crear servicio de autenticación en Angular

Para empezar desde cero, ejecute el siguiente comando en la carpeta raíz de su proyecto:

Si desea reutilizar un recurso de autenticación existente de AWS (por ejemplo, Amazon Cognito UserPool o Identity Pool) consulte esta sección.

amplify add auth

? Do you want to use the default authentication and security configuration? Default configuration
? How do you want users to be able to sign in? Username
? Do you want to configure advanced settings?  No, I am done.

Para desplegar el servicio, ejecute el comando push:

amplify push

Ahora, el servicio de autenticación se ha desplegado y puede empezar a utilizarlo. Para ver los servicios desplegados en su proyecto en cualquier momento, vaya a Amplify Console ejecutando el siguiente comando:

Configurar AWS Amplify en la aplicación

En el punto de entrada de tu aplicación (es decir, main.ts), importa y carga el archivo de configuración:

import { Amplify } from '@aws-amplify/core';
import { Auth } from '@aws-amplify/auth';
import awsconfig from './aws-exports';

Amplify.configure(awsconfig);
Auth.configure(awsconfig);

Importar el módulo AWS Amplify UI

Archivo: app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

/* import AmplifyUIAngularModule  */
import { AmplifyUIAngularModule } from '@aws-amplify/ui-angular';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    /* configure app with AmplifyUIAngularModule */
    AmplifyUIAngularModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Reemplace el contenido dentro de app.component.ts con lo siguiente:

import { Component, ChangeDetectorRef } from '@angular/core';
import { onAuthUIStateChange, CognitoUserInterface, AuthState } from '@aws-amplify/ui-components';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'amplify-angular-auth';
  user: CognitoUserInterface | undefined;
  authState: AuthState;

  constructor(private ref: ChangeDetectorRef) {}

  ngOnInit() {
    onAuthUIStateChange((authState, authData) => {
      this.authState = authState;
      this.user = authData as CognitoUserInterface;
      this.ref.detectChanges();
    })
  }

  ngOnDestroy() {
    return onAuthUIStateChange;
  }
}

Reemplace el contenido dentro de app.component.html con el código html dado,

<amplify-authenticator *ngIf="authState !== 'signedin'"></amplify-authenticator>

<div *ngIf="authState === 'signedin' && user" class="App">
    <amplify-sign-out></amplify-sign-out>
    <div>Hello, {{user.username}}</div>
    <!-- This is where you application template code goes -->  
</div>

Personalización de la interfaz de usuario con Angular

Si desea personalizar los campos de formulario del componente Authenticator Sign In o Sign Up, puede hacerlo utilizando la propiedad formFieldspropiedad

En app.component.ts añade formFields como sigue:

formFields = [
      {
        type: "email",
        label: "Custom email Label",
        placeholder: "custom email placeholder",
        required: true,
      },
      {
        type: "password",
        label: "Custom Password Label",
        placeholder: "custom password placeholder",
        required: true,
      },
      {
        type: "phone_number",
        label: "Custom Phone Label",
        placeholder: "custom Phone placeholder",
        required: false,
      },
    ];
  }

Archivo: app.componen.html

<amplify-authenticator usernameAlias="email">
  <amplify-sign-up
    slot="sign-up"
    usernameAlias="email"
    [formFields]="formFields"
  ></amplify-sign-up>
  <amplify-sign-in slot="sign-in" usernameAlias="email"></amplify-sign-in>
</amplify-authenticator>

Para ver más opciones: https://docs.amplify.aws/ui/auth/authenticator/q/framework/angular#customization

Ejemplo de código Angular en Github

Si tiene algún problema en algún momento, puede consultar la aplicación completa aquí,

https://github.com/unimedia-technology/amplify-auth-angular

Unimedia Technology

Aquí en Unimedia Technology tenemos un equipo de Desarrolladores Angular que pueden desarrollar sus aplicaciones Web Single Page más desafiantes utilizando las últimas tecnologías de AWS.