por Santiago Arias, el 9 de marzo de 2022
Uno de los módulos o servicios que más nos interesa a la hora de desarrollar aplicaciones basadas en arquitecturas AWS es el conocido Cognito. Es en pocas palabras el gestor de sesiones que nos entrega totalmente funcional AWS.
Para entender un poco más sobre Cognito vamos a imaginar construir desde cero todo un sistema de registro, manejo de contraseñas, envío de códigos únicos de validación (OTP), inicios de sesión, etc. como pueden observar son muchas las funcionalidades que se deben tener en cuenta a la hora de iniciar con la construcción de dicho sistema. Entonces entendiendo lo anterior sería de gran ayuda poder contar con un sistema o módulo que nos entregue todo lo anteriormente listado y que simplemente solo sea configurar y utilizar, pues lo anterior lo podemos lograr gracias a Cognito.
AWS Cognito nos permite fácilmente incorporar funcionalidades de registros, control de sesiones, inscripción de dispositivos, entre otros. Adicional nos permite tener el control de usuarios tanto en sistemas propios Cognito o desde proveedores de identidad como Facebook, Google, Amazon.
Cognito permite ser configurado tanto en aplicaciones web como en aplicaciones móviles tanto híbridas como nativas.
Dejando de lado los conceptos vamos a pasar a la parte práctica y ver cómo podemos utilizar el módulo Cognito en una aplicación móvil híbrida desarrollada con Ionic 5.
Para efectos de este artículo vamos a asumir que ya se tiene configurado el Cognito en la consola de administración de AWS, ahora vamos a configurar la aplicación para empezar a utilizar AWS Cognito en ella.
Configurando la App
1. Agregar Amplify a la aplicación ya sea con yarn o npm
npm install aws-amplify yarn install aws-amplify
2. En el archivo de configuración inicial de la app (por ejemplo main.js, App.js o index.js) configurar y cargar la data de acceso a Cognito.
import Amplify, { Auth } from 'aws-amplify'; Amplify.configure({
Auth: {
// REQUIRED - Amazon Cognito Region
region: 'xx-xxxxx-x',
// OPTIONAL - Amazon Cognito Federated Identity Pool Region
// Required only if it's different from Amazon Cognito Region
identityPoolRegion: 'xx-xxxxx-x',
// OPTIONAL - Amazon Cognito User Pool ID
userPoolId: 'xx-xxxxx-x_xxxxxxx',
// OPTIONAL - Amazon Cognito Web Client ID (26-char alphanumeric string)
userPoolWebClientId: 'xxxxxxxxxxxxxxxxxxx'
}
});
3. La información que se encuentra enmascarada con “xxxxx” se encuentra en la console de Cognito directamente en la información del pool de usuarios.
Habilitando el módulo Cognito
Aws Cognito permite ser utilizado de dos maneras diferentes en una app:
- Utilizar el componente de interfaz de usuario preconstruido de AWS-Cognito
- Llamar directamente la API de autenticación por medio de Amplify
Opción 1:
1. Primero, instalar la librería de angular correspondiente a interfaces de usuario
>npm install @aws-amplify/ui-angular
2. Abrir “app.module.ts” para importar Amplify y agregar configuraciones iniciales
/* Agregar imports Amplify */
import { AmplifyUIAngularModule } from '@aws-amplify/ui-angular';
import Amplify from 'aws-amplify';
import awsconfig from '../aws-exports';
/* Configurar recursos Amplify */
Amplify.configure(awsconfig);
@NgModule({
declarations: [AppComponent],
imports: [AmplifyUIAngularModule /* Add Amplify module */, BrowserModule],
providers: [],
bootstrap: [AppComponent],
})
3. Abre la página o sección donde se va a incluir el componente
El componente “amplify-authenticator” permite de una manera sencilla agregar un flujo completo de autenticación en la app. Este componente encapsula un flujo de autenticación en el framework que se tenga para la app y está conectado al backend configurado en la nube de AWS del proyecto como tal.
Opción 2:
Esta es tal vez la opción más común a la hora de desarrollar proyectos a la medida, ya que se desarrollan interfaces de usuario según diseños específicos.
1. Importar en el componente deseado el módulo de autenticación de amplify
import { Auth } from 'aws-amplify';
2. Crear cada una de las funciones requeridas por el componente (signIn, CreateNewPassword, changePassword, etc.)
async function signIn() {
try {
const user = await Auth.signIn(username, password);
} catch (error) {
console.log('error signing in', error);
}
}
3. Controlar las diferentes respuestas para seguir con los flujos correspondientes
if (response.challengeName === 'SMS_MFA' ||
response.challengeName === 'SOFTWARE_TOKEN_MFA') {
//Flujo de multifactor de autenticación
} else if (response.challengeName === 'NEW_PASSWORD_REQUIRED') {
//Flujo de login primera vez y cambio de contraseña obligatorio
} else if (response.challengeName === 'MFA_SETUP') {
//Flujo configuración de TOTP
} else {
//Flujo normal hacia el home de la app
}
Opción 2:
A través del módulo de autenticación importado es posible acceder o hacer uso de múltiples flujos o servicios. A continuación un listado de algunos de los más utilizados:
- Auth.completeNewPassword
- Auth.changePassword
- Auth.forgotPassword
- Auth.signOut
Las dos opciones anteriormente explicadas permiten de forma similar consumir el pool de usuarios configurado inicialmente en la consola de AWS. Las diferencias entre las opciones radican en la necesidad puntual de desarrollar a la medida o no las interfaces de usuario.
