Indicadors de seguretat de contrasenyes
La seguretat d’una contrasenya, mesurada amb honestedat.
Passcore calcula com és de difícil endevinar una contrasenya, la compara amb les teves regles i diu a cada persona què ha de canviar, en la seva llengua. Un nucli petit i sense dependències, amb indicadors a punt per fer servir a jQuery, JavaScript pur, React, Vue i Svelte.
Prova-ho
@passcore/vanilla- Estimació
- 0 bits
- Nivell
- —
- Regles
- —
O prova’n una d’aquestes:
Tot s’executa al teu navegador: res del que escrius aquí no surt d’aquesta pàgina.
Formularis de registre
Mostra tots els requisits
Cada resultat enumera totes les regles actives i si es compleixen, així que la llista que tothom espera en un formulari de registre es fa en poques línies amb qualsevol paquet. Prova amb un nom d’usuari i després amb una contrasenya que el contingui.
Fes-ho amb
Crea un compte
Requisits
- Almenys 8 caràcters , complert , no complert
- Que no sigui una contrasenya comuna , complert , no complert
- Sense dades personals, com el teu nom d’usuari , complert , no complert
- Una lletra minúscula , complert , no complert
- Una lletra majúscula , complert , no complert
- Un número , complert , no complert
- Un símbol , complert , no complert
7 requisits per complir
Per què Passcore
Números honestos, paraules clares i qualsevol framework
-
Estimacions, no il·lusions
El primer és la llargada. Les repeticions, les seqüències, els recorreguts de teclat i les contrasenyes comunes gairebé no compten, encara que siguin en leetspeak:
P@ssw0rd!no és una contrasenya segura. -
Regles que s’entenen
Llargada mínima, tipus de caràcters, contrasenyes comunes i dades personals. La primera regla que no es compleix es converteix en el missatge, perquè cada persona sàpiga què ha de corregir.
-
Marcatge accessible
Un
role="meter"de debò amb un valor que es llegeix en veu alta, una regió en directe discreta per al missatge iaria-describedbyper associar-lo al camp. -
En qualsevol llengua
Textos en el format JSON d’i18next, amb plurals inclosos. Tots els paquets porten anglès, castellà i català, o pots fer servir la teva pròpia funció
t. -
Temes amb set propietats
Els colors, la pista i l’alçada són propietats personalitzades de CSS: adapta-ho al teu sistema de disseny sense barallar-te amb l’especificitat.
-
Un nucli sense dependències
@passcore/coreno toca el DOM ni conté textos: retorna dades i claus de missatge, així que funciona a tot arreu, també al servidor.
Paquets
Tria la teva tecnologia
Tots els paquets generen el mateix marcatge amb el mateix full d’estils, de manera que canviar de framework no canvia el que veu la gent.
-
Nucli
@passcore/coreTot el que retorna l’estimació, amb totes les opcions a mà. Obre l’inspector -
jQuery
@passcore/jquery$.fn.password()en qualsevol camp, amb esdeveniments i un indicador que apareix lliscant. Mira les demostracions -
JS pur
@passcore/vanillaUna funció i un element personalitzat<passcore-meter>. Sense cap framework. Mira les demostracions -
React
@passcore/reactUn component controlat i el hookusePasswordStrength(). Mira les demostracions -
Vue
@passcore/vueUn component i un composable, per a Vue 3.5 o posterior. Mira les demostracions -
Svelte
@passcore/svelteUn component i una funció auxiliar basada en runes, per a Svelte 5. Mira les demostracions
Primers passos
Instal·lació
Tria un paquet i el teu gestor de paquets: aquí tens l’ordre i un primer fragment de codi.
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 />