Aix\u00ed, com vam veure a l’article anterior,<\/a> <\/p>\n\n AWS Amplify \u00e9s un conjunt d’eines i serveis que permet als desenvolupadors web m\u00f2bils i front-end crear aplicacions de pila completa segures i escalables, impulsades per AWS.<\/em><\/p><\/blockquote>\n\n Aix\u00ed doncs, aqu\u00ed explorarem un altre cas d’\u00fas d’AWS amplify, que \u00e9s afegir l’autenticaci\u00f3 a l’aplicaci\u00f3 web angular mitjan\u00e7ant amplify de dues maneres, <\/p>\n\n 1. Utilitzar components d’IU preconstru\u00efts<\/p>\n\n 2. Fer crides manualment a les API d’autenticaci\u00f3<\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n Utilitzeu l’ Angular CLI<\/a> per iniciar una nova aplicaci\u00f3 Angular:<\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n Actualment, les versions m\u00e9s recents d’Angular (6+) no inclouen calces per a “global” o “proc\u00e9s”, tal com es proporciona a les versions anteriors. Afegiu el seg\u00fcent al vostre <\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n Ara que tenim una aplicaci\u00f3 Angular en funcionament, \u00e9s hora de configurar Amplify per a aquesta aplicaci\u00f3<\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n El proc\u00e9s anterior crea un fitxer anomenat<\/em> <\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n Dins el <\/p>\n\n El <\/p>\n\n <\/p>\n\n <\/p>\n\n Per comen\u00e7ar des de zero, executeu l’ordre seg\u00fcent a la carpeta arrel del vostre projecte:<\/p>\n\n Si voleu reutilitzar un recurs d’autenticaci\u00f3 existent d’AWS (per exemple, Amazon Cognito UserPool o Identity Pool), consulteu aquesta secci\u00f3<\/a> .<\/p><\/blockquote>\n\n Per implementar el servei, executeu el Ara, el servei d’autenticaci\u00f3 s’ha desplegat i podeu comen\u00e7ar a utilitzar-lo. Per veure els serveis desplegats al vostre projecte en qualsevol moment, aneu a Amplify Console executant l’ordre seg\u00fcent:<\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n Al punt d’entrada de la vostra aplicaci\u00f3 (\u00e9s a dir, main.ts<\/strong> ), importeu i carregueu el fitxer de configuraci\u00f3:<\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n Fitxer<\/strong> : app.module.ts<\/p>\n\n <\/p>\n\n <\/p>\n\n Substitu\u00efu el contingut d’ app.component.ts<\/strong><\/em> pel seg\u00fcent:<\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n Substitu\u00efu el contingut dins de app.component.<\/strong><\/em> html<\/strong> amb el codi html donat,<\/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 voleu personalitzar els camps del formulari al component d’inici de sessi\u00f3 o registre de l’autenticador, podeu fer-ho mitjan\u00e7ant el A app.component.ts<\/em><\/strong> afegiu la variable formFields<\/em><\/strong> de la seg\u00fcent manera:<\/p>\n\n <\/p>\n\n <\/p>\n\n Fitxer<\/strong> : app.componen.html<\/p>\n\n <\/p>\n\n <\/p>\n\n <\/p>\n\n Per veure m\u00e9s opcions: https:\/\/docs.amplify.aws\/ui\/auth\/authenticator\/q\/framework\/angular#customization<\/a><\/p>\n\n <\/p>\n\n <\/p>\n\n Si teniu cap problema en qualsevol moment, podeu consultar la implementaci\u00f3 completa aqu\u00ed,<\/p>\n\nRequisits previs:<\/h3>\n\n
Creeu una nova aplicaci\u00f3 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\nSuport Angular 6+<\/h2>\n\n
src\/polyfills.ts<\/code> fitxer per recrear-los:<\/p>\n\n(window as any).global = window;\n(window as any).process = {\n env: { DEBUG: undefined },\n};<\/code><\/pre>\n\nInicieu el projecte 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> en el<\/em>src<\/code> directori<\/em><\/p>\n\nInstal\u00b7leu les depend\u00e8ncies Amplify i Angular<\/h2>\n\n
amplify-auth-angular<\/code> directori, instal\u00b7leu la biblioteca Amplify Angular i executeu la vostra aplicaci\u00f3:<\/p>\n\nnpm install --save aws-amplify @aws-amplify\/ui-angular\n\nnpm start<\/code><\/pre>\n\n@aws-amplify\/ui-angular<\/code> El paquet \u00e9s un conjunt de components Angular i un prove\u00efdor Angular que ajuda a integrar la vostra aplicaci\u00f3 amb la biblioteca AWS-Amplify.<\/p>\n\nCrear un servei d’autenticaci\u00f3 a 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> comandament:<\/p>\n\namplify push<\/code><\/pre>\n\nConfigureu AWS Amplify Config a l’aplicaci\u00f3<\/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\nImporta el m\u00f2dul d’interf\u00edcie d’usuari d’AWS Amplify<\/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\nPersonalitzaci\u00f3 de la IU amb Angular<\/h2>\n\n
formFields<\/code> propietat.<\/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\nExemple de codi angular a Github<\/h2>\n\n