用戶被盜號(hào)了！為什么前端要被罵？

將Python客棧設(shè)為“星標(biāo)?”

第一時(shí)間收到最新資訊

密碼強(qiáng)度

平時(shí)我們在瀏覽各種網(wǎng)站和 APP 的時(shí)候，都接觸過密碼這個(gè)東西~

密碼設(shè)置的好不好，關(guān)乎到你的賬號(hào)安全性，越復(fù)雜的密碼越安全，所以密碼強(qiáng)度很重要，而我們在做注冊功能的時(shí)候，也有責(zé)任去幫協(xié)助用戶設(shè)置一個(gè)高密碼強(qiáng)度的密碼~

那么密碼強(qiáng)度怎么計(jì)算呢？ 且應(yīng)該如何實(shí)現(xiàn)以下這樣的密碼強(qiáng)度動(dòng)畫展示效果呢？

思路

其實(shí)思路很簡單：

• 1、監(jiān)聽密碼輸入框的變化
• 2、密碼變化時(shí)，獲取密碼文本，并通過某種方式計(jì)算這個(gè)密碼的強(qiáng)度分?jǐn)?shù)
• 3、根據(jù)強(qiáng)度分?jǐn)?shù)，改變下方塊的顏色和寬度
• 0分：強(qiáng)度低，紅色，寬度 20%
• 1分：強(qiáng)度低，紅色，寬度 40%
• 2分：強(qiáng)度中，橙色，寬度 60%
• 3分：強(qiáng)度高，綠色，寬度 80%
• 4分：強(qiáng)度高，綠色，寬度 100%

計(jì)算密碼強(qiáng)度分?jǐn)?shù)

用什么方式去計(jì)算密碼強(qiáng)度方式呢？我們可以用 @zxcvbn-ts/core這個(gè)庫來計(jì)算~

@zxcvbn-ts/core 是 zxcvbn 密碼強(qiáng)度估計(jì)器的 TypeScript 實(shí)現(xiàn)版本，用于幫助開發(fā)者評估用戶設(shè)置密碼的復(fù)雜度和安全性，計(jì)算的依據(jù)有：

• 密碼長度： 越長分?jǐn)?shù)越高
• 字符類型： 數(shù)字、字母、符號(hào)
• 詞典攻擊檢測： 內(nèi)置詞典列表，檢測密碼強(qiáng)度
• 評分系統(tǒng)： 0-4分，分?jǐn)?shù)越高越安全
• 熵計(jì)算： 評測密碼所需嘗試次數(shù)，熵越高，分?jǐn)?shù)越高

pnpm i @zxcvbn-ts/core

密碼強(qiáng)度動(dòng)畫展示效果

計(jì)算了分?jǐn)?shù)之后，我們需要根據(jù)分?jǐn)?shù)去展示

• 不同的顏色
• 不同的寬度

我們可以使用屬性選擇器的方式，去完成這一個(gè)效果，看以下代碼~

當(dāng)密碼改變的時(shí)候，會(huì)實(shí)時(shí)計(jì)算密碼強(qiáng)度分?jǐn)?shù)，這也就是意味著 data-score 這個(gè)屬性會(huì)一直變，接著我們可以在樣式中，去根據(jù)屬性選擇器去設(shè)置不同的顏色和寬度

現(xiàn)在可以看到這樣的效果

完善動(dòng)畫效果

但是我們?nèi)绻雽?shí)現(xiàn)分格的效果，可以借助偽元素去做~

現(xiàn)在可以達(dá)到我們期望的效果~

完整代碼

<template>
  <Input.Password v-model:value="password" autocomplete="none" />
  <div class="strength-meter-bar">
    <div class="strength-meter-bar--fill" :data-score="passwordStrength"></div>
  </div>
</template>

<script lang="ts" setup>
import { Input } from 'ant-design-vue';
import { computed, ref } from 'vue';
import { zxcvbn } from '@zxcvbn-ts/core';

const password = ref('');
const passwordStrength = computed(() => {
  return zxcvbn(password.value).score;
});
</script>

<style lang="less">
.strength-meter-bar {
  position: relative;
  height: 6px;
  margin: 10px auto 6px;
  border-radius: 6px;
  background-color: rgb(0 0 0 / 25%);

  // 增加的偽元素樣式代碼
  &::before,
  &::after {
    content: '';
    display: block;
    position: absolute;
    z-index: 10;
    width: 20%;
    height: inherit;
    border-width: 0 5px;
    border-style: solid;
    border-color: #fff;
    background-color: transparent;
  }
  &::before {
    left: 20%;
  }
  &::after {
    right: 20%;
  }
  // 增加的偽元素樣式代碼

  &--fill {
    position: absolute;
    width: 0;
    height: inherit;
    transition:
      width 0.5s ease-in-out,
      background 0.25s;
    border-radius: inherit;
    background-color: transparent;

    &[data-score='0'] {
      width: 20%;
      background-color: darken(#e74242, 10%);
    }

    &[data-score='1'] {
      width: 40%;
      background-color: #e74242;
    }

    &[data-score='2'] {
      width: 60%;
      background-color: #efbd47;
    }

    &[data-score='3'] {
      width: 80%;
      background-color: fade(#55d187, 50%);
    }

    &[data-score='4'] {
      width: 100%;
      background-color: #55d187;
    }
  }
}
</style>

往期回顧

1、阿里云盤 限速下載！啟動(dòng)！

2、僅72MB。就把Win11改了！

3、騰訊又一游戲宣布關(guān)停，上線不到一年！

4、編程語言是怎么被實(shí)現(xiàn)出來的？

5、“未穿衣人臉識(shí)別被后臺(tái)看光”上熱搜，App為何不設(shè)提示？

           

            

             


             
點(diǎn)擊關(guān)注公眾號(hào)，閱讀更多精彩內(nèi)容