Tutorial de Bubble.io - Desarrollar la comprobación de contraseñas [alemán]

En este vídeo aprenderás a desarrollar tu propia comprobación de seguridad de contraseñas en Bubble.io. La función de validación de contraseñas básicamente hace que su sitio sea mucho más seguro para los usuarios, ya que guía a los usuarios a elegir una buena contraseña.

Primero empezaremos con el diseño en Bubble io, si quieres los detalles aquí solo reduce la velocidad de reproducción del video tutorial.

El siguiente paso es trabajar en la fortaleza de la contraseña. En el campo Entrada, seleccione Contraseña; luego vaya al cuadro de texto Fuerza de la contraseña y en el Condicional , añada la variable Entrada, Fuerza de la contraseña y diga que si es menor de 30, entonces se cambiará el texto mostrado. Por un lado la fuerza de la contraseña: débil y por otro lado el color al rojo. Para ello, elija el editor de texto enriquecido. Amplía la funcionalidad de forma análoga para los otros casos de uso.

A continuación, desarrollamos la función de mostrar o no mostrar una contraseña. Dependiendo de lo que quiera el usuario. El propósito de esta función es dar al usuario el control sobre su contraseña. Para ello, dirígete a la pestaña de Plugin e instala el plugin gratuito Reveal & Hide Password de Zeroqode. Basta con arrastrar el elemento Reveal al lienzo.

El elemento no es visible; en la configuración hay que activar la opción HTML ID y entonces le damos al elemento de entrada un elemento ID. A continuación, haga un estado booleano al campo de entrada (contraseña visible: Sí, No). Después de eso, haga clic en el texto de la pantalla y haga clic en Iniciar/Editar flujo de trabajo y tome la función Alternar revelar una contraseña y ajuste los estados para que se dé la funcionalidad. Por último, añadimos la funcionalidad para que coincida con los distintos requisitos de las contraseñas.

Para ello utilizamos las funcionalidades de Bubble.io como el número de caracteres del valor de entrada es mayor que 8 para el requisito de al menos 8 caracteres.

Y para las otras funciones, usamos RegEx, que son Expresiones Regulares. Para ello, vaya a https://www.regexr.com. En Bubble.io, utilizamos el extracto de Input Value con el recuento de RegEx mayor que 0 y luego vamos a RegExr.com para encontrar el patrón RegEx correcto.

Para las letras mayúsculas la expresión regular es: [A-Z\s]+1

A continuación, desarrollamos la funcionalidad para tener al menos 1 número como requisito de contraseña en Bubble.io.

Utiliza aquí de nuevo análogamente RegExr: \d+

Por último, tenemos los caracteres especiales.

Copie los condicionales y tome el patrón RegEx: [^A-Z, 0-9, a-z]

Después optimizamos adicionalmente la velocidad.

El plugin de texto instantáneo de AirDev garantiza que la validación de nuestra contraseña se produzca sin ningún retraso apreciable.

Por último, queremos tener una funcionalidad de backend para que sólo se puedan crear contraseñas fuertes por parte del usuario y crear los flujos de trabajo de Bubble.io para ello. En primer lugar, creamos un estado booleano "Contraseña suficiente", que sólo se permite si se cumplen los requisitos previos. Aquí es posible decidir de forma granular qué requisitos previos de seguridad deben cumplirse.

También puedes activar la funcionalidad "Definir una política de contraseñas" de Bubble.io en la configuración. Aquí tiene la posibilidad de validar la seguridad de la contraseña en el lado del servidor.

Transcripción del vídeo:

Hola, mi nombre es Chris Strobl y hoy voy a mostrarte cómo crear una burbuja inn de validación de contraseña. Empecemos con el diseño. Me gustaría mostrarte el paso a paso, pero lo he acelerado un poco. Si esto le resulta demasiado aburrido, pase al siguiente capítulo. Ahora pasaremos a la vista previa. Y ya ves, tenemos un muy buen diseño. La siguiente tarea es dinamizar el conjunto para que las diferentes funciones estén presentes. Comenzamos con la fuerza de la contraseña.

Para ello, vaya a Fuerza de la contraseña y entre en el condicional y vaya directamente si la entrada, es decir, la fuerza de la contraseña, es menor o igual a 30 y lo que es importante es que el valor de la entrada no esté vacío. Es decir, si sólo tiene menos de 30, entonces dice fuerza de la contraseña, incluso si la entrada está vacía. Es decir, sólo se quiere mostrar si alguien ha rellenado algo. Ahora vamos al texto y añadimos aquí nuestras condiciones.

Escribimos "Débil" y podemos ir al editor de texto enriquecido. Lo seleccionamos. Aquí elegimos el color: el verde. Y cambiar este color a nuestro tono de color del diseño. Luego hacemos la siguiente condición: mayor que 30 y menor que 70. Copiamos eso. Ahora tenemos "medio". Y también cambiar el color.

Y ahora pasa a la última condición. Vuelve a copiar. La fuerza de la contraseña de Bubble le da un valor numérico de 0 a 100, dependiendo de la fuerza de su contraseña. Y ahora tenemos las condiciones. Echemos un vistazo a la vista previa. Ahora vemos "Débil". "Medio". Y entonces se convierte en "fuerte". Y así es como todo el asunto vuelve a ser. Esto significa que ahora tenemos la posibilidad de que nuestro usuario obtenga una retroalimentación dependiendo de si su contraseña es fuerte o débil y, como he dicho, tenemos el valor numérico entre 0 y 100 del valor de entrada. A continuación, queremos hacer lo que usted sabe de otros sitios, es decir, cuando hago clic en mostrar, la contraseña se muestra y cuando hago clic de nuevo, no es, lo que queremos hacer en Bubble. Para ello necesitamos primero un plugin.

Existe un plugin gratuito de Zeroquode: Reveal & Hide Password. Lo instalamos. Si ahora vas a tus elementos visuales, tienes el elemento Reveal aquí. Lo arrastraremos a donde sea, porque este elemento Reveal siempre permanecerá en el fondo. A continuación, entramos en la configuración y tenemos que habilitar los ID de HTML. Tiene en apariencia General: "exponer la opción de añadir un atributo ID a los elementos HTML". Lo seleccionas.

Y luego vas a tu elemento de entrada y le das un atributo ID. Por una vez, lo llamaré "contraseña". Entonces tenemos que establecer un estado. Para ello, vaya al campo de entrada, Añada un nuevo estado personalizado y pregunte si la contraseña es visible. Es de tipo booleano "sí/no". Y el valor por defecto es "no". Por defecto, la contraseña no es visible. A continuación, hacemos clic en el campo de texto "Mostrar", le añadimos un elemento blanco, un fondo blanco, para que esté siempre visible y lo traemos al frente. Vamos a Inicio/ editar Flujo de trabajo y en Acciones de los elementos se ve Alternar una revelación. Eso es exactamente este plugin.

E inserte el ID del campo de entrada aquí. Entonces tenemos que establecer el estado. Tomamos el estado de entrada personalizada contraseña visible y ahora decir "sí". Esto es ahora tomamos el color rojo, eso significa que sólo si el estado de entrada contraseña visible? es "no", entonces ejecutamos este flujo de trabajo, por lo que sólo si es no, entonces mostramos todo alrededor de hacer el estado de entrada a "sí". Copiamos este flujo de trabajo una vez. Añade esto. Poner todo en verde una vez para que lo conozcamos mejor. Ahora decimos "sí" y en "sí" ... Así que es visible y luego vuelve a ser invisible. El último punto es que le damos al elemento de texto un condicional y decimos: ¿si el estado de entrada contraseña es visible? "Sí" - por lo que es visible - entonces escribimos en el texto "ocultar" como un botón y si "no", entonces es como ahora en el defecto, entonces escribimos "mostrar". Ahora probaremos el conjunto.

Lo mostramos todo. También podemos seguir escribiendo aquí. Escóndete de nuevo. Y también podemos volver a borrar cosas. Así que ahora has visto cómo podemos mostrar y ocultar la contraseña. El siguiente paso es cómo podemos validar estas contraseñas o cómo podemos ayudar al usuario a crear y establecer mejores contraseñas para tener una experiencia de usuario más segura para el usuario y para eso tenemos estos cuatro campos. Volvemos a Bubble y entramos una vez en "Al menos 8 caracteres" y ponemos una condicional: si el valor de Input número de caracteres es mayor o igual a 8, cambiamos el color de la fuente a este verde. Copiamos el formato condicional y lo pegamos aquí. Verás, queremos dar al color del icono el mismo tono de verde. Ahora vamos a probarlo.

Y ves con un poco de retraso que nuestro campo de entrada se pone verde cuando tenemos ocho caracteres y cuando tenemos siete, vuelve a estar gris. El siguiente punto es que tenemos letras mayúsculas. Ahora establecemos la condición para ello. Vas a extraer con RegEx. RegEx significa Expresiones Regulares. Hay patrones RegEx para esto. Y RegEx es una cosa en la programación que se utiliza muy a menudo, especialmente en la ciencia de datos, para extraer formatos. Y también puedes usarlo en Bubble. Esto es ahora un tema muy grande: "RegEx". Pero quiero mostrarte cómo proceder. Para ello, nos dirigimos a www.regexr.com, que ahora parece muy complicado, pero es uno de los mejores sitios para familiarizarse con RegEx.

Es decir, tienes una chuleta aquí y podemos copiarla aquí, por ejemplo, y también aquí en la parte superior y puedes ver que ahora sólo aparecen números. Si ahora añado, por ejemplo, un 2 aquí abajo o un 5 aquí o un 5 aquí, entonces sólo estos números son elegidos aquí. O dices que sólo quiero los caracteres entre a y g o entre a y b.

Y luego ya ves, sólo tenemos los resaltados. Ahora lo usamos una vez y sólo queremos las mayúsculas. Como ves, ahora sólo tenemos las mayúsculas con este comando. Lo copiamos todo. Póngalo en Bubble.io. Y ahora necesitamos la :cuenta de ello. Y tiene que ser mayor que 0. Esto significa que extraemos el valor con RegEx de todas las letras mayúsculas. El resultado de esto, este número, debe ser mayor que 0, entonces tenemos al menos una letra mayúscula. Ponemos el color de la fuente en el mismo verde. Al mismo tiempo, copiamos la condición, la pegamos aquí, pero el color del icono también pasa a este verde. Ahora entramos en la prueba una vez. Verás, tenemos los 8 personajes. Pero no tenemos mayúsculas.

Y ahora, con un poco de retraso, también tenemos esta letra mayúscula. Si se lo quitamos, no lo volveremos a hacer. Lo siguiente es el número. Copiamos la condición. Lo añadimos. Y de nuevo, copiamos la condición. Añádelo. Lo único que tenemos que cambiar es el patrón RegEx. Para ello vamos a la chuleta y vemos este "\d" y añadimos el + para tener un número con al menos uno. Lo copiamos todo. Una vez más, tenemos la cuenta mayor que 0 y añadir esto a la RegEx para el icono. Volvemos a copiar la condición.

Y ahora tenemos los caracteres especiales. Este es un patrón RegEx un poco más complicado. No decimos A-Z, no decimos 0- 9, decimos reloj, decimos letras mayúsculas de la A a la Z y no decimos a - z minúsculas. Ahora mismo no tenemos ninguno y veremos que en cuanto añadamos caracteres especiales los tendremos. Copias este patrón, vuelves a Bubble y lo añades todo. Y ahora probamos si el conjunto funciona. Y vemos maravillosamente, tan pronto como nos vamos o tenemos uno, se muestra.

Lo mismo para los números y también para las mayúsculas. Y así es como se ve esta validación. Pero lo que has notado es que no es instantáneo y también hay una solución para eso, que se valide inmediatamente y eso es otro plugin. Vamos a Plugins, añadimos un plugin. Instant Text de AirDev; también es gratuito. Añadimos que. Entramos en la pestaña de diseño, texto vivo. También sólo añadir que. Y tenemos aquí el elemento livetext A. Lo llamaré simplemente texto vivo. Y aquí se ve de nuevo el elemento ID.

Ya hemos establecido la contraseña de nuestro campo de entrada como atributo ID. Lo seleccionas y ahora este campo de entrada está siempre activo. Pero, por supuesto, usted tiene que ajustar aquí también en lugar del valor de la entrada se hace el valor del texto en vivo y entonces usted también tiene que añadir estos patrones. Aquí la expresión vive el número de caracteres del texto "8". Ten cuidado con el RegEx aquí también.

Primero copiamos esta fórmula RegEx para que no se pierda. A partir de esto, el :count es mayor que 0. Lo copias. Y también copiamos esto una vez aquí, luego tomamos el patrón RegEx de allí. Copias la fórmula. Copie el patrón RegEx una vez. Y volvemos a probar todo con el plugin en vivo. Y ya ves: ahora todo es instantáneo y, por tanto, mucho más fácil de reconocer para tu usuario. Por último, queremos que el botón sólo se pueda pulsar si la contraseña también cumple nuestros requisitos y para ello entramos en Bubble y hacemos primero una ventana de alerta para ver si todo funciona. "La contraseña es suficiente" y mostramos esta alerta casi para simular este flujo de trabajo.

Normalmente esto sería ahora registrarse con la contraseña y validar eso. Pero sólo para nuestro ejemplo, es a partir de cuando se puede hacer clic en el botón "Siguiente". Verás, si hacemos clic en él ahora, funciona inmediatamente. Incluso si la contraseña está vacía. Ahora decimos que el botón, básicamente, no es clicable. Vamos a la Vista Previa y ves que no podemos hacer clic en el botón. Entonces creamos un estado personalizado y preguntamos si la contraseña es suficiente. El valor por defecto es "no". En el condicional decimos que si la contraseña es suficiente "no", entonces el elemento no es clicable y si la contraseña es suficiente "sí", entonces el elemento es clicable.

Así que no se puede hacer clic está abierto, no se selecciona. Ahora vamos al flujo de trabajo y decimos, si una condición es siempre verdadera, es decir, si el valor de texto vivo número de caracteres es mayor o igual a 8, si ese es el caso, y ese es nuestro punto verde, establecemos el estado de nuestro botón, es decir, contraseña suficiente, a "sí". Copiamos eso una vez y decimos rojo, si es menos de 8, entonces lo ponemos en "no". Por supuesto, también puede crear otras condiciones aquí, como que haya al menos una letra mayúscula o un carácter especial.

Ahora pasamos a la vista previa. Ves que el botón no está activado. Ahora tenemos ocho caracteres y el botón se puede utilizar. Si tenemos siete, no funciona. Así que puedes hacer una maravillosa validación y permitir que tus usuarios establezcan sólo contraseñas seguras. En este contexto, también me gustaría mostrar una función de Bubble que también permite las políticas de contraseña. Ve a Configuración y a Privacidad y Seguridad. Y aquí puede hacer clic en defnina una política de contraseñas. Tienes que seleccionar esto y verás que Bubble también te da estas políticas de contraseñas directamente. Por ejemplo, una longitud mínima de 5 o que haya al menos un número o una letra mayúscula o un carácter especial.

Haré un mínimo de 5 y un número. Hay algunas cosas que hay que tener en cuenta y me gustaría mostrárselas. Entramos en la pestaña de diseño, seleccionamos el campo de entrada y ya tenemos aquí "comprobar la contraseña mientras se escribe". La razón es que esta validación, si la política de contraseñas es correcta, sólo ocurre en el back-end de Bubble. Es decir, sólo si se tiene el flujo de trabajo, se crea un nuevo usuario o se da de alta el usuario, y se toma la contraseña, sólo entonces. Pero si se escribe la contraseña, también se activa en el frontend. Y quiero mostrarte eso una vez. Simplemente añadimos un campo de texto como ejemplo y tomamos la entrada y entonces la pregunta es "es válido" o "no es válido".

Aquí formateo como texto para que se vea mejor. Y hay una segunda cosa aquí. Es decir, si no se introduce nada en Bubble, entonces no es "es válido" y no "no es válido", pero también hay que añadir: El valor de la entrada no está vacío y también que una vez como texto. Añadimos un espacio aquí para que se vea mejor. En nuestra política hemos establecido un mínimo de cinco letras y un número.

Vamos a la vista previa una vez. Y ahora vemos aquí: no hemos introducido nada, aún no se ha introducido ninguna contraseña, pero "sí" la contraseña es válida. Así que aquí tienes que tener una fórmula "y" si quieres validar eso. Se ha introducido algo. Pero no tenemos un número y en cuanto lo tenemos, todo funciona. Entonces tienes dos síes. Si sólo desea esta importación de Bubble, entonces usted simplemente tiene que introducir la fórmula en el flujo de trabajo en lugar de sólo ahora el valor número de caracteres, ya que aquí la entrada es válida sí y no está vacío.

Vamos a hacer una vista previa de nuevo. Me parece fascinante lo fácil que es crear incluso validaciones de contraseñas complejas en Bubble y así hacer que tu sitio sea mucho más seguro para los usuarios, pero también crear una gran experiencia de usuario al mismo tiempo. Te deseo que sigas teniendo éxito y que nos veamos pronto.