Esta funcionalidad usa delegación. De forma predeterminada, la delegación está deshabilitada para los inquilinos que, a fecha de 8 de junio de 2017, no tenían ningún complemento en uso. Los inquilinos legados que actualmente usan un complemento que requiere delegación pueden seguir usando esta funcionalidad. Si la funcionalidad de delegación cambia o se elimina del servicio en algún momento, se notificará con antelación a los clientes que la usan actualmente y se les dará tiempo suficiente para migrar. Además, tenga en cuenta que la delegación no admite el uso de dominios personalizados, por lo que cualquier funcionalidad que dependa de ella puede no funcionar por completo junto con un dominio personalizado.
En este paso, creará una aplicación sin servidor de una sola página con el framework AngularJS, que publicará desde un bucket de AWS S3 configurado para funcionar como un sitio web estático.
Para empezar con una aplicación sencilla, descargue un proyecto de ejemplo específico de este tutorial. Inicie sesión para que sus credenciales de Auth0 queden preconfiguradas.Copie el contenido de este proyecto de inicio en una carpeta local llamada pets, que usará durante el resto de este tutorial. Dentro de esta carpeta, actualice auth0-variables.js con AUTH0_CLIENT_ID y AUTH0_CLIENT_ID de su aplicación de Auth0 (esta información está disponible en el Dashboard de administración de la aplicación en cuestión).
Asegúrese de haber creado el bucket de AWS S3 configurado para funcionar como un sitio web estático. Durante el proceso de configuración, copie el contenido de la carpeta pets en su bucket de S3 para proporcionar contenido al sitio web.Si utiliza un bucket ya existente, puede mover los archivos con la AWS CLI mediante el siguiente comando.
Antes de continuar, asegúrese de tener al menos un usuario asociado a su conexión Username-Password-Authentication (o a la conexión de base de datos asociada con la aplicación que está usando). Para aprovechar al máximo la funcionalidad de su aplicación de ejemplo y su integración con AWS, necesitará ese usuario para probar la autenticación y obtener acceso.Por último, asegúrese de que Auth0 permita la autenticación desde su sitio web proporcionando la URL en el campo Orígenes permitidos de la página de configuración de su aplicación. La URL de su sitio web debería tener un aspecto similar a este:http://your-bucket.s3-website-us-east-1.amazonaws.comSi no sabe cuál es su URL, puede encontrarla en la pestaña Propiedades de su bucket de S3.Antes de continuar, pruebe a iniciar sesión en su aplicación. Abra http://your-bucket-domain/index.html en su navegador. Después de iniciar sesión, debería aparecer un cuadro de alerta con el mensaje “getPets not implemented”:También debería ver la página para ver las mascotas.
En este punto, ya tienes la autenticación configurada con Auth0 y cuentas con un . Esta es la estructura de directorios del código generado:
Puedes usar la capacidad de delegación de Auth0 para obtener un de AWS basado en el de Auth0. Internamente, Auth0 autentica tu token de identidad y luego usa en función del addon que configuraste.Actualiza pets/login/login.js de la siguiente manera para obtener un token de delegación de AWS a partir del token de identidad después de iniciar sesión correctamente con auth.signin. Ten en cuenta que estás tratando como Admin a cualquier usuario que no haya iniciado sesión mediante una Conexión social. Más adelante, programaremos un segundo rol y mostraremos mejores formas de aplicar la selección de roles.
auth.signin(params, function(profile, token) { //Establecer usuario como admin si no usó un login social. profile.isAdmin = !profile.identities[0].isSocial; store.set('profile', profile); store.set('token', token); // obtener token de delegación a partir del identity token. var options = getOptionsForRole(profile.isAdmin, token); // TODO: Paso 3: Habilitar esta sección una vez que configure la delegación de AWS. /* auth.getToken(options) .then( function(delegation) { store.set('awstoken', delegation.Credentials); $location.path("/"); }, function(err) { console.log('no se pudo adquirir el token de delegación', err); }); */ // TODO: Paso 3: Eliminar esta redirección después de agregar la API get token. $location.path("/");}, function(error) { console.log("Hubo un error al iniciar sesión", error);});
Para modificar las cadenas role y principal (que corresponden a las dos últimas líneas de la instrucción if incluida en la función proporcionada), especifique los valores adecuados mediante Rules:
Asegúrate de actualizar los valores de ARN de role y [principal] con los correspondientes a tu integración.Copia los archivos actualizados en tu bucket de S3 para tu sitio web.Opcionalmente, puedes establecer un punto de interrupción en el navegador en store.set('awstoken', delegation.Credentials);. Cuando cierres sesión y vuelvas a iniciarla, inspecciona delegation.Credentials al llegar al punto de interrupción. Verás valores conocidos, como AccessKeyId y SecretAccessKey:
Para agregar el código de la API para llamar a tu servicio, copia el contenido de apiGateway-js-sdk.zip que descargaste anteriormente al directorio pets. El contenido debe incluir:
apiClient.js;
la carpeta lib;
README.md.
Para revisar la descarga, consulta Tutorial de AWS API Gateway, parte 2.Ya existe un archivo README.md en el directorio pets, por lo que tendrás que cambiarle el nombre a uno de los archivos para conservar ambos en el directorio. El archivo README.md de API Gateway explica cómo usar la aplicación de API desde tu aplicación de Auth0.Abre el archivo index.html, ubicado en la raíz de la carpeta pets, para agregar a index.html todos los scripts enumerados en la parte superior del archivo Léame de la API:
<!-- scripts para aws api gateway, inclúyelos después de crear tu paquete desde aws para api gateway. --><script type="text/javascript" src="/lib/axios/dist/axios.standalone.js"></script><script type="text/javascript" src="/lib/CryptoJS/rollups/hmac-sha256.js"></script><script type="text/javascript" src="/lib/CryptoJS/rollups/sha256.js"></script><script type="text/javascript" src="/lib/CryptoJS/components/hmac.js"></script><script type="text/javascript" src="/lib/CryptoJS/components/enc-base64.js"></script><script type="text/javascript" src="/lib/moment/moment.js"></script><script type="text/javascript" src="/lib/url-template/url-template.js"></script><script type="text/javascript" src="/lib/apiGatewayCore/sigV4Client.js"></script><script type="text/javascript" src="/lib/apiGatewayCore/apiGatewayClient.js"></script><script type="text/javascript" src="/lib/apiGatewayCore/simpleHttpClient.js"></script><script type="text/javascript" src="/lib/apiGatewayCore/utils.js"></script><script type="text/javascript" src="/apigClient.js"></script>
Si abre apigClient.js, verá que la biblioteca descargada ha creado contenedores como petsPost y petsGet para los métodos de su API. No necesita modificar este código generado.
Abre home.js en la carpeta home y actualiza el contenido de getPets con un método para obtener los datos de las mascotas (asegúrate de actualizar la región si no se está ejecutando en us-east-1):
function getPets() { // esto no está autenticado var apigClient = apigClientFactory.newClient({ region: 'us-east-1' // La región donde está desplegada la API }); apigClient.petsGet({},{}) .then(function(response) { console.log(response); $scope.pets = response.data; $scope.$apply(); }).catch(function (response) { alert('pets get failed'); showError(response); });}
Copia el código actualizado en tu bucket de S3. Actualiza la página para ver dos animales en la lista (si ejecutaste la prueba descrita anteriormente en tus API, que creó estas mascotas).
Ahora que tiene una aplicación de Auth0 funcional con API Gateway, agregará un método para actualizar la tabla pets.Modifique la lógica del método putPets para actualizar la tabla pets mediante la función de API. Esta función se usará tanto para agregar mascotas como para eliminarlas.
function putPets(updatedPets) { var body = {pets: updatedPets}; var apigClient = apigClientFactory.newClient({ region: 'us-east-1' // establece esto según la región en la que estés trabajando. }); apigClient.petsPost({},body) .then(function(response) { console.log(response); }).catch(function (response) { alert('actualización de mascotas fallida'); showError(response); });}
Copia el código actualizado en tu bucket de S3. Prueba el método:
Cierra sesión y vuelve a iniciarla.
Introduce valores en Pet Type y Pet Price.
Haz clic en Save para enviar tus datos.
Deberías ver un mensaje que diga: “Tenemos un <Pet Type> en venta por <Pet Price>”, con un botón rojo REMOVE a la izquierda.Para añadir seguridad, agrega la función getSecureApiClient al inicio del método putPets:
function putPets(updatedPets) { var apigClient = getSecureApiClient();}
Copie el código en su bucket de S3.La función getSecureApiClient que se le proporciona recupera del almacenamiento local el token de AWS obtenido mediante delegación con la API y utiliza la clave de acceso, la clave secreta y el token de sesión:
function getSecureApiClient() { var awstoken = store.get('awstoken'); return apigClientFactory.newClient({ accessKey: awstoken.AccessKeyId, secretKey: awstoken.SecretAccessKey, sessionToken: awstoken.SessionToken, region: 'us-east-1' // La región desde la que estás trabajando. }); }
Autenticar
Administrar usuarios
Personalizar
Auth0 AI
Plataforma