Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.

# Crear una aplicación React con AWS Amplify y añadir autenticación con Amazon Cognito
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito"></a>

*Rishi Singla, Amazon Web Services*

## Resumen
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-summary"></a>

Este patrón muestra cómo usar AWS Amplify para crear una aplicación basada en React y cómo añadir autenticación a frontend mediante Amazon Cognito. AWS Amplify consta de un conjunto de herramientas (marco de código abierto, entorno de desarrollo visual, consola) y servicios (alojamiento de aplicaciones web y sitios web estáticos) para acelerar el desarrollo de aplicaciones móviles y web en AWS. 

## Requisitos previos y limitaciones
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-prereqs"></a>

**Requisitos previos**
+ Una cuenta de AWS activa
+ [Node.js](https://nodejs.org/en/download/) y [npm](https://www.npmjs.com/get-npm) instalados en su equipo

**Versiones de producto**
+ Node.js versión 10.x o posterior (para verificar su versión, ejecute `node -v` en una ventana de terminal)
+ npm versión 6.x o posterior (para verificar su versión, ejecute `npm -v` en una ventana de terminal)

## Arquitectura
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-architecture"></a>

**Pila de tecnología de destino**
+ AWS Amplify
+ Amazon Cognito

## Tools (Herramientas)
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-tools"></a>
+ [Amplificar la interfaz de la línea de comandos (CLI)](https://docs.amplify.aws/cli/)
+ [Bibliotecas Amplify](https://docs.amplify.aws/lib/q/platform/react-native/) (bibliotecas cliente de código abierto)
+ [Amplify Studio](https://docs.amplify.aws/console/) (interfaz visual)

## Epics
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-epics"></a>

### Instalar la CLI de AWS Amplify
<a name="install-aws-amplify-cli"></a>


| Tarea | Descripción | Habilidades requeridas | 
| --- | --- | --- | 
| Instalar la CLI de Amplify | La CLI de Amplify es una cadena de herramientas unificada para crear servicios en la nube de AWS para su aplicación React. Para instalar la CLI de Amplify, ejecute:<pre>npm install -g @aws-amplify/cli</pre>npm le notificará si hay una nueva versión principal disponible. Si es así, utilice el siguiente comando para actualizar su versión de npm:<pre>npm install -g npm@9.8.0</pre>donde 9.8.0 se refiere a la versión que desea instalar. | Desarrollador de aplicaciones | 

### Crear una aplicación React
<a name="create-a-react-app"></a>


| Tarea | Descripción | Habilidades requeridas | 
| --- | --- | --- | 
| Crear una React App. | Para crear una nueva aplicación React, utilice el comando:<pre>npx create-react-app amplify-react-application</pre>donde `ampify-react-application` es el nombre de la aplicación.Cuando haya creado correctamente la aplicación, verá el siguiente mensaje:<pre>Success! Created amplify-react-application</pre>Se creará un directorio con varias subcarpetas para la aplicación React. | Desarrollador de aplicaciones | 
| Inicie la aplicación en el equipo local. | Vaya al directorio `amplify-react-application` que se creó en el paso anterior y ejecute el comando:<pre>amplify-react-application% npm start</pre>Esto inicia la aplicación React en la máquina local. | Desarrollador de aplicaciones | 

### Configurar la CLI de Amplify
<a name="configure-the-amplify-cli"></a>


| Tarea | Descripción | Habilidades requeridas | 
| --- | --- | --- | 
| Configure Amplify para que se conecte a su cuenta de AWS. | Configure Amplify ejecutando el comando:<pre>amplify-react-application % amplify configure</pre>La CLI de Amplify le pide que siga estos pasos para configurar el acceso a su cuenta de AWS:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito.html)En este escenario, se requieren usuarios de IAM con acceso programático y credenciales de larga duración, lo que supone un riesgo de seguridad. Para ayudar a mitigar este riesgo, le recomendamos que brinde a estos usuarios únicamente los permisos que necesitan para realizar la tarea y que los elimine cuando ya no los necesiten. Las claves de acceso se pueden actualizar si es necesario. Para obtener más información, consulte [Actualización de claves de acceso](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_credentials_access-keys.html#Using_RotateAccessKey) en la *Guía de usuario de IAM*.Estos pasos se muestran en la terminal de la siguiente manera.<pre>Follow these steps to set up access to your AWS account:<br />Sign in to your AWS administrator account:<br />https://console.aws.amazon.com/<br />Press Enter to continue<br />Specify the AWS Region<br />? region:  us-east-1<br />Follow the instructions at<br />https://docs.amplify.aws/cli/start/install/#configure-the-amplify-cli<br />to complete the user creation in the AWS console<br />https://console.aws.amazon.com/iamv2/home#/users/create<br />Press Enter to continue<br />Enter the access key of the newly created user:<br />? accessKeyId:  ********************<br />? secretAccessKey:  ****************************************<br />This would update/create the AWS Profile in your local machine<br />? Profile Name:  new<br /><br />Successfully set up the new user.</pre>Para obtener más información sobre estos pasos, consulte la [documentación](https://docs.amplify.aws/cli/start/install/#configure-the-amplify-cli) del Amplify Dev Center. | AWS general, desarrollador de aplicaciones | 

### Inicializar Amplify
<a name="initialize-amplify"></a>


| Tarea | Descripción | Habilidades requeridas | 
| --- | --- | --- | 
| Inicialice Amplify. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito.html) | Desarrollador de aplicaciones, AWS general | 

### Agregar la autenticación a frontend
<a name="add-authentication-to-the-frontend"></a>


| Tarea | Descripción | Habilidades requeridas | 
| --- | --- | --- | 
| Añada la autenticación. | Puede usar el comando `amplify add <category>` para agregar característica como el inicio de sesión de un usuario o una API de backend. En este paso, utilizará el comando para añadir la autenticación.Amplify proporciona un servicio de autenticación de backend con Amazon Cognito, bibliotecas de frontend y un componente de Authenticator UI integrado. Las características incluyen el registro de usuarios, el inicio de sesión de los usuarios, la autenticación multifactorial, el cierre de sesión de los usuarios y el inicio de sesión sin contraseña. También puede autenticar a los usuarios mediante la integración con proveedores de identidad federados, como Amazon, Google y Facebook. La categoría de autenticación de Amplify se integra perfectamente con otras categorías de Amplify, como API, análisis y almacenamiento, para que pueda definir reglas de autorización para usuarios autenticados y no autenticados.[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito.html) | Desarrollador de aplicaciones, AWS general | 

### Cómo cambiar el archivo App.js
<a name="change-the-app-js-file"></a>


| Tarea | Descripción | Habilidades requeridas | 
| --- | --- | --- | 
| Cambie el archivo App.js. | En la carpeta `src`, abra y revise el archivo `App.js`. El archivo modificado debe tener el siguiente aspecto:<pre>{  App.Js File after modifications:<br />import React from 'react';<br />import logo from './logo.svg';<br />import './App.css';<br />import { Amplify } from 'aws-amplify';<br />import { withAuthenticator, Button, Heading } from '@aws-amplify/ui-react';<br />import awsconfig from './aws-exports';<br />Amplify.configure(awsconfig);<br />function App({ signOut }) {<br />  return (<br />      <div><br />      <h1>Thankyou for doing verification</h1><br />      <h2>My Content</h2><br />       <button onClick={signOut}>Sign out</button><br />    </div><br />  );<br />}<br />export default withAuthenticator(App);</pre> | Desarrollador de aplicaciones | 
| Importe paquetes de React. | El archivo `App.js` importa dos paquetes de React. Instale estos paquete mediante el comando:<pre>amplify-react-application1 % npm install --save aws-amplify @aws-amplify/ui-react</pre> | Desarrollador de aplicaciones | 

### Inicie la aplicación React y compruebe la autenticación
<a name="launch-the-react-app-and-check-authentication"></a>


| Tarea | Descripción | Habilidades requeridas | 
| --- | --- | --- | 
| Inicie la aplicación. | Inicie la aplicación React en su máquina local:<pre>amplify-react-application1 % npm start</pre> | Desarrollador de aplicaciones, AWS general | 
| Compruebe la autenticación. | Compruebe si la aplicación solicita los parámetros de autenticación. (En nuestro ejemplo, configuramos el correo electrónico como método de inicio de sesión).La frontend UI debería pedirle las credenciales de inicio de sesión y ofrecerle la opción de crear una cuenta.También puede configurar el proceso de compilación de Amplify para añadir el backend como parte de un flujo de trabajo de implementación continua. Sin embargo, este patrón no aborda esa opción. | Desarrollador de aplicaciones, AWS general | 

## Recursos relacionados
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-resources"></a>
+ [Introducción](https://docs.npmjs.com/getting-started) (documentación de npm)
+ [Crear una cuenta de AWS independiente](https://docs.aws.amazon.com/accounts/latest/reference/manage-acct-creating.html) (documentación de administración de cuentas de AWS) 
+ [Documentación de AWS Amplify](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html)
+ [Documentación de Amazon Cognito](https://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html)