As\u00ed que, como vimos en el art\u00edculo anterior,<\/a> <\/p>\n\n AWS Amplify es un conjunto de herramientas y servicios que permite a los desarrolladores web m\u00f3viles y front-end crear aplicaciones de pila completa seguras y escalables con la tecnolog\u00eda de AWS.<\/em><\/p><\/blockquote>\n\n Por lo tanto, aqu\u00ed vamos a explorar otro caso de uso de AWS amplificar, que es a\u00f1adir la autenticaci\u00f3n a la aplicaci\u00f3n web angular utilizando amplificar de 2 maneras, <\/p>\n\n 1. Utilizar componentes de interfaz de usuario predefinidos<\/p>\n\n 2. Llamar manualmente a las API de autenticaci\u00f3n<\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n Utiliza la CLI de Angular<\/a> para arrancar una nueva aplicaci\u00f3n Angular:<\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n Actualmente, las versiones m\u00e1s recientes de Angular (6+) no incluyen calces para ‘global’ o ‘process’ como se proporcionaban en versiones anteriores. A\u00f1ade lo siguiente a tu archivo <\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n Ahora que tenemos una aplicaci\u00f3n Angular en ejecuci\u00f3n, es el momento de configurar Amplify para esta aplicaci\u00f3n<\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n The above given process creates a file called <\/em> <\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n Dentro del directorio <\/p>\n\n El paquete <\/p>\n\n <\/p>\n\n <\/p>\n\n Para empezar desde cero, ejecute el siguiente comando en la carpeta ra\u00edz de su proyecto:<\/p>\n\n Si desea reutilizar un recurso de autenticaci\u00f3n existente de AWS (por ejemplo, Amazon Cognito UserPool o Identity Pool) consulte esta secci\u00f3n<\/a>.<\/p><\/blockquote>\n\n Para desplegar el servicio, ejecute el comando Ahora, el servicio de autenticaci\u00f3n 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:<\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n En el punto de entrada de tu aplicaci\u00f3n (es decir, main.ts<\/strong>), importa y carga el archivo de configuraci\u00f3n:<\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n Archivo<\/strong>: app.module.ts<\/p>\n\n <\/p>\n\n <\/p>\n\n Reemplace el contenido dentro de app.component.ts<\/strong><\/em> con lo siguiente:<\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n Reemplace el contenido dentro de app.component.<\/strong><\/em>html <\/strong>con el c\u00f3digo html dado,<\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n Si desea personalizar los campos de formulario del componente Authenticator Sign In o Sign Up, puede hacerlo utilizando la propiedad En app.component.ts<\/em><\/strong> a\u00f1ade formFields <\/em><\/strong>como sigue:<\/p>\n\n <\/p>\n\n <\/p>\n\n Archivo<\/strong>: app.componen.html<\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n Para ver m\u00e1s opciones: https:\/\/docs.amplify.aws\/ui\/auth\/authenticator\/q\/framework\/angular#customization<\/a><\/p>\n\n <\/p>\n\n <\/p>\n\n Si tiene alg\u00fan problema en alg\u00fan momento, puede consultar la aplicaci\u00f3n completa aqu\u00ed,<\/p>\n\nRequisitos previos:<\/h3>\n\n
Crear una nueva aplicaci\u00f3n Angular<\/h2>\n\n
npx -p @angular\/cli ng new amplify-app\n\n? Would you like to add Angular routing? Y\n? Which stylesheet format would you like to use? (your preferred stylesheet provider)\n\ncd amplify-app<\/code><\/pre>\n\nCompatibilidad con Angular 6+<\/h2>\n\n
src\/polyfills.ts<\/code> para recrearlos:<\/p>\n\n(window as any).global = window;\n(window as any).process = {\n env: { DEBUG: undefined },\n};<\/code><\/pre>\n\nIniciar el proyecto Amplify<\/h2>\n\n
amplify init\n\nEnter a name for the project (amplify-auth-angular)\n\n# All AWS services you provision for your app are grouped into an \"environment\"\n# A common naming convention is dev, staging, and production\nEnter a name for the environment (dev)\n\n# Sometimes the CLI will prompt you to edit a file, it will use this editor to open those files.\nChoose your default editor\n\n# Amplify supports JavaScript (Web & React Native), iOS, and Android apps\nChoose the type of app that you're building (javascript)\n\nWhat JavaScript framework are you using (angular)\n\nSource directory path (src)\n\nDistribution directory path (dist)\nChange from dist to dist\/amplify-auth-angular\n\nBuild command (npm run-script build)\n\nStart command (ng serve or npm start)\n\n# This is the profile you created with the `amplify configure` command in the introduction step.\nDo you want to use an AWS profile\n\n<\/code><\/pre>\n\naws-exports.js<\/code> in the <\/em>src<\/code> directory<\/em><\/p>\n\nInstala las dependencias de Amplify y Angular<\/h2>\n\n
amplify-auth-angular<\/code>, instala la librer\u00eda Amplify Angular y ejecuta tu aplicaci\u00f3n:<\/p>\n\nnpm install --save aws-amplify @aws-amplify\/ui-angular\n\nnpm start<\/code><\/pre>\n\n@aws-amplify\/ui-angular<\/code> es un conjunto de componentes Angular y un proveedor Angular que ayuda a integrar su aplicaci\u00f3n con la biblioteca AWS-Amplify.<\/p>\n\nCrear servicio de autenticaci\u00f3n en Angular<\/h2>\n\n
amplify add auth<\/code><\/pre>\n\n? Do you want to use the default authentication and security configuration? Default configuration\n? How do you want users to be able to sign in? Username\n? Do you want to configure advanced settings? No, I am done.<\/code><\/pre>\n\npush<\/code>:<\/p>\n\namplify push<\/code><\/pre>\n\nConfigurar AWS Amplify en la aplicaci\u00f3n<\/h2>\n\n
import { Amplify } from '@aws-amplify\/core';\nimport { Auth } from '@aws-amplify\/auth';\nimport awsconfig from '.\/aws-exports';\n\nAmplify.configure(awsconfig);\nAuth.configure(awsconfig);<\/code><\/pre>\n\nImportar el m\u00f3dulo AWS Amplify UI<\/h2>\n\n
import { BrowserModule } from '@angular\/platform-browser';\nimport { NgModule } from '@angular\/core';\n\n\/* import AmplifyUIAngularModule *\/\nimport { AmplifyUIAngularModule } from '@aws-amplify\/ui-angular';\n\nimport { AppRoutingModule } from '.\/app-routing.module';\nimport { AppComponent } from '.\/app.component';\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n AppRoutingModule,\n \/* configure app with AmplifyUIAngularModule *\/\n AmplifyUIAngularModule\n ],\n providers: [],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }<\/code><\/pre>\n\nimport { Component, ChangeDetectorRef } from '@angular\/core';\nimport { onAuthUIStateChange, CognitoUserInterface, AuthState } from '@aws-amplify\/ui-components';\n\n@Component({\n selector: 'app-root',\n templateUrl: '.\/app.component.html',\n styleUrls: ['.\/app.component.css']\n})\nexport class AppComponent {\n title = 'amplify-angular-auth';\n user: CognitoUserInterface | undefined;\n authState: AuthState;\n\n constructor(private ref: ChangeDetectorRef) {}\n\n ngOnInit() {\n onAuthUIStateChange((authState, authData) => {\n this.authState = authState;\n this.user = authData as CognitoUserInterface;\n this.ref.detectChanges();\n })\n }\n\n ngOnDestroy() {\n return onAuthUIStateChange;\n }\n}<\/code><\/pre>\n\n<amplify-authenticator *ngIf=\"authState !== 'signedin'\"><\/amplify-authenticator>\n\n<div *ngIf=\"authState === 'signedin' && user\" class=\"App\">\n <amplify-sign-out><\/amplify-sign-out>\n <div>Hello, {{user.username}}<\/div>\n <!-- This is where you application template code goes --> \n<\/div><\/code><\/pre>\n\n![\"](\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/image-22.png\")
<\/figure>\n\nPersonalizaci\u00f3n de la interfaz de usuario con Angular<\/h2>\n\n
formFields<\/code><\/em><\/strong>propiedad<\/p>\n\nformFields = [\n {\n type: \"email\",\n label: \"Custom email Label\",\n placeholder: \"custom email placeholder\",\n required: true,\n },\n {\n type: \"password\",\n label: \"Custom Password Label\",\n placeholder: \"custom password placeholder\",\n required: true,\n },\n {\n type: \"phone_number\",\n label: \"Custom Phone Label\",\n placeholder: \"custom Phone placeholder\",\n required: false,\n },\n ];\n }<\/code><\/pre>\n\n<amplify-authenticator usernameAlias=\"email\">\n <amplify-sign-up\n slot=\"sign-up\"\n usernameAlias=\"email\"\n [formFields]=\"formFields\"\n ><\/amplify-sign-up>\n <amplify-sign-in slot=\"sign-in\" usernameAlias=\"email\"><\/amplify-sign-in>\n<\/amplify-authenticator><\/code><\/pre>\n\n![\"](\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/image-1-18.png\")
<\/figure>\n\nEjemplo de c\u00f3digo Angular en Github<\/h2>\n\n