Aquest article tracta sobre com implementar l’autenticació en un angular mitjançant AWS amplify en un període de temps molt curt. Com a empresa de desenvolupament especialitzada, oferim els serveis de software personalitzat i un equip dedicat per ajudar els nostres clients en aquest tipus d’implementacions.

Així, com vam veure a l’article anterior,

AWS Amplify és un conjunt d’eines i serveis que permet als desenvolupadors web mòbils i front-end crear aplicacions de pila completa segures i escalables, impulsades per AWS.

Així doncs, aquí explorarem un altre cas d’ús d’AWS amplify, que és afegir l’autenticació a l’aplicació web angular mitjançant amplify de dues maneres,

1. Utilitzar components d’IU preconstruïts

2. Fer crides manualment a les API d’autenticació

Requisits previs:

• Node.js versió 10 o posterior
• Compte d’AWS

Creeu una nova aplicació Angular

Utilitzeu l’ Angular CLI per iniciar una nova aplicació 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

Suport Angular 6+

Actualment, les versions més recents d’Angular (6+) no inclouen calces per a “global” o “procés”, tal com es proporciona a les versions anteriors. Afegiu el següent al vostresrc/polyfills.ts fitxer per recrear-los:

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

Inicieu el projecte Amplify

Ara que tenim una aplicació Angular en funcionament, és hora de configurar Amplify per a aquesta aplicació

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

El procés anterior crea un fitxer anomenataws-exports.js en elsrc directori

Instal·leu les dependències Amplify i Angular

Dins elamplify-auth-angular directori, instal·leu la biblioteca Amplify Angular i executeu la vostra aplicació:

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

npm start

El@aws-amplify/ui-angular El paquet és un conjunt de components Angular i un proveïdor Angular que ajuda a integrar la vostra aplicació amb la biblioteca AWS-Amplify.

Crear un servei d’autenticació a Angular

Per començar des de zero, executeu l’ordre següent a la carpeta arrel del vostre projecte:

Si voleu reutilitzar un recurs d’autenticació existent d’AWS (per exemple, Amazon Cognito UserPool o Identity Pool), consulteu aquesta secció .

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.

Per implementar el servei, executeu elpush comandament:

amplify push

Ara, el servei d’autenticació s’ha desplegat i podeu començar a utilitzar-lo. Per veure els serveis desplegats al vostre projecte en qualsevol moment, aneu a Amplify Console executant l’ordre següent:

Configureu AWS Amplify Config a l’aplicació

Al punt d’entrada de la vostra aplicació (és a dir, main.ts ), importeu i carregueu el fitxer de configuració:

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

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

Importa el mòdul d’interfície d’usuari d’AWS Amplify

Fitxer : 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 { }

Substituïu el contingut d’ app.component.ts pel següent:

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;
  }
}

Substituïu el contingut dins de app.component. html amb el codi html donat,

<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>

Personalització de la IU amb Angular

Si voleu personalitzar els camps del formulari al component d’inici de sessió o registre de l’autenticador, podeu fer-ho mitjançant elformFields propietat.

A app.component.ts afegiu la variable formFields de la següent manera:

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,
      },
    ];
  }

Fitxer : 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>

Per veure més opcions: https://docs.amplify.aws/ui/auth/authenticator/q/framework/angular#customization

Exemple de codi angular a Github

Si teniu cap problema en qualsevol moment, podeu consultar la implementació completa aquí,

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

Unimedia Technology

Aquí a Unimedia Technology tenim un equip de desenvolupadors angulars que poden desenvolupar les vostres aplicacions web d’una sola pàgina més difícils utilitzant les últimes tecnologies d’AWS.