Indicadores de seguridad de contraseñas
La seguridad de una contraseña, medida con honestidad.
Passcore calcula lo difícil que es adivinar una contraseña, la compara con tus reglas y le dice a cada persona qué debe cambiar, en su idioma. Un núcleo diminuto y sin dependencias, con indicadores listos para usar en jQuery, JavaScript puro, React, Vue y Svelte.
Pruébalo
@passcore/vanilla- Estimación
- 0 bits
- Nivel
- —
- Reglas
- —
O prueba una de estas:
Todo se ejecuta en tu navegador: nada de lo que escribes aquí sale de esta página.
Formularios de registro
Muestra todos los requisitos
Cada resultado enumera todas las reglas activas y si se cumplen, así que la lista que todo el mundo espera en un formulario de registro se hace en pocas líneas con cualquier paquete. Prueba con un nombre de usuario y luego con una contraseña que lo contenga.
Hazlo con
Crea una cuenta
Requisitos
- Al menos 8 caracteres , cumplido , no cumplido
- Que no sea una contraseña común , cumplido , no cumplido
- Sin datos personales, como tu nombre de usuario , cumplido , no cumplido
- Una letra minúscula , cumplido , no cumplido
- Una letra mayúscula , cumplido , no cumplido
- Un número , cumplido , no cumplido
- Un símbolo , cumplido , no cumplido
7 requisitos por cumplir
Por qué Passcore
Números honestos, palabras claras y cualquier framework
-
Estimaciones, no ilusiones
Lo primero es la longitud. Las repeticiones, las secuencias, los recorridos de teclado y las contraseñas comunes casi no cuentan, aunque estén en leetspeak:
P@ssw0rd!no es una contraseña segura. -
Reglas que se entienden
Longitud mínima, tipos de caracteres, contraseñas comunes y datos personales. La primera regla que no se cumple se convierte en el mensaje, para que cada persona sepa qué corregir.
-
Marcado accesible
Un
role="meter"de verdad con un valor que se lee en voz alta, una región en vivo discreta para el mensaje yaria-describedbypara asociarlo al campo. -
En cualquier idioma
Textos en el formato JSON de i18next, con plurales incluidos. Todos los paquetes traen inglés, español y catalán, o puedes usar tu propia función
t. -
Temas con siete propiedades
Los colores, la pista y la altura son propiedades personalizadas de CSS: adáptalo a tu sistema de diseño sin pelearte con la especificidad.
-
Un núcleo sin dependencias
@passcore/coreno toca el DOM ni contiene textos: devuelve datos y claves de mensaje, así que funciona en cualquier sitio, también en el servidor.
Paquetes
Elige tu tecnología
Todos los paquetes generan el mismo marcado con la misma hoja de estilos, así que cambiar de framework no cambia lo que ve la gente.
-
Núcleo
@passcore/coreTodo lo que devuelve la estimación, con todas las opciones a mano. Abrir el inspector -
jQuery
@passcore/jquery$.fn.password()en cualquier campo, con eventos y un indicador que aparece deslizándose. Ver las demos -
JS puro
@passcore/vanillaUna función y un elemento personalizado<passcore-meter>. Sin ningún framework. Ver las demos -
React
@passcore/reactUn componente controlado y el hookusePasswordStrength(). Ver las demos -
Vue
@passcore/vueUn componente y un composable, para Vue 3.5 o posterior. Ver las demos -
Svelte
@passcore/svelteUn componente y una función auxiliar basada en runas, para Svelte 5. Ver las demos
Primeros pasos
Instalación
Elige un paquete y tu gestor de paquetes: aquí tienes el comando y un primer fragmento de código.
pnpm add @passcore/core
import { createMeter } from '@passcore/core'
const meter = createMeter({ rules: { minLength: 10 } })
const result = meter.evaluate(password, [username])
result.percent // 0 to 100
result.message // { key: 'rule.minLength', params: { min: 10 } }pnpm add @passcore/jquery jquery
import $ from 'jquery'
import '@passcore/jquery'
import '@passcore/jquery/styles.css'
$('#password').password({ userInputs: ['#username'] })pnpm add @passcore/vanilla
import { createPasswordMeter } from '@passcore/vanilla'
import '@passcore/vanilla/styles.css'
createPasswordMeter('#password', { showPercent: true })pnpm add @passcore/react
import { PasswordStrengthMeter } from '@passcore/react'
import '@passcore/react/styles.css'
<PasswordStrengthMeter password={password} showPercent />pnpm add @passcore/vue
<script setup>
import { PasswordStrengthMeter } from '@passcore/vue'
import '@passcore/vue/styles.css'
</script>
<template>
<PasswordStrengthMeter :password="password" show-percent />
</template>pnpm add @passcore/svelte
<script>
import { PasswordStrengthMeter } from '@passcore/svelte'
import '@passcore/svelte/styles.css'
</script>
<PasswordStrengthMeter {password} showPercent />