lunes, 3 de diciembre de 2018

Angular: 30. Auth0. Personalizar la pantalla de Login

Vamos a ver cómo personalizar la pantalla de login de Auth0.

Lo primero que debemos saber (aunque se podía haber deducido) es que la pantalla de login de Auth0 no se encuentra en nuestra aplicación (no tenemos ningún fichero html con la pantalla del login en nuestra máquina local), sino que se aloja en los propios servidores de Auth0, por lo que las modificaciones debemos hacerlas desde la página de Auth0.

Entramos en la página de Auth0 y entramos en "Hosted Pages". Ahí hay un switch que, al activarlo, nos dará acceso al código html de la pantalla de login:


Si pulsamos la pestaña de "preview", nos aparece la ventana de login tal cual nos aparece:


Volvemos al código, y cambiamos el idioma a español y el color del botón a verde:


Guardamos los cambios. Volvemos a "preview", y comprobamos que se ha modificado la pantalla de login:


Y eso sería todo. Modificando los diferentes valores del código podemos personalizar la pantalla a nuestro gusto.

Como nota adicional, se puede cambiar la forma de login de la aplicación para que funcione por correo o móvil en lugar de por contraseña:


Y podemos agregar botones de login para diferentes redes sociales, no sólo la de Google, que es la que nos aparece por defecto en la pantalla de login:


Y eso es todo.

No hay comentarios:

Publicar un comentario