vue パスワード生成

今回は6〜8桁のパスワードの作成方法を紹介します。

パスワードを生成したあとにパスワードのコピー機能もついでに付けて利便性を向上させてます。

全体のコード
html (pug)
パスワード生成の処理
コピー機能について

全体のコード

<template lang="pug">
    .page-password-generation
      h1 6桁から8桁のパスワードを生成できます。
      .password-genetation
        input(type="number" v-model="num")
        button(@click="createPassword(num)") パスワード生成
      .password
        p {{password}}
        button(@click="copy") コピー
  </template>
  
  <script>
  export default {
      data() {
          return {
              password: '',
              num: 8
          }
      },
      methods: {
          createPassword(len) {
              let passwordLength;
              const maxLength = 10
              const minLength = 6
              if (len <= minLength) {
                  alert('パスワードは6文字以上から作成できます。')
              } else if (len > maxLength) {
                  alert('最大の長さは10文字以下です。')
              } else {
                  passwordLength = len
              }

              // 生成する文字列に含める文字セット
              const passContent = "abcdefghijklmnopqrstuvwxyz0123456789";
  
              const cl = passContent.length;
              this.password = ''
              for (let i = 0; i < passwordLength; i++) {
                  this.password += passContent[Math.floor(Math.random() * cl)];
              }
          },
          copy() {
              const text = this.password
              navigator.clipboard.writeText(text).then(e => {
                  alert('コピーできました');
              });
          }
      }
  }
  </script>
  
  <style lang="stylus">
  .page-password-generation
    h1
      border-left 3px solid main-color
      padding-left 15px
      box-sizing border-box
      font-size rem(24px)
      line-height rem(32px)
    .password-genetation
      display flex
      justify-content center
      align-items center
      button
        border 1px solid main-color
        background main-color
        color #fff
        font-weight bold
        margin-top 20px
        margin-left 30px
        border-radius 10px
        padding 10px
    .password
      background #eee
      width 80%
      margin 0 auto
      margin-top 20px
      min-height 200px
      p
        font-size rem(18px)
        line-height rem(24px)
        text-align center
        vertical-align middle
      button
        border 1px solid main-color
        background main-color
        color #fff
        font-weight bold
        margin-top 20px
        margin-left 30px
        border-radius 10px
        padding 10px
  </style>

html (pug)

.page-password-generation
      h1 6桁から8桁のパスワードを生成できます。
      .password-genetation
        input(type="number" v-model="num")
        button(@click="createPassword(num)") パスワード生成
      .password
        p {{password}}
        button(@click="copy") コピー

今回は、inputに入力された数字分の探さのパスワードを生成します。

「v-model」を使って入力下値を取得します。

規定の文字よりも大きいときはvue側でアラートを表示させるようにしているので今回は「max = "" 」, 「min = ""」などは使いません。

パスワード生成の処理

createPassword(len) {
    let passwordLength;
    const maxLength = 10
    const minLength = 6
    if (len <= minLength) {
        alert('パスワードは6文字以上から作成できます。')
    } else if (len > maxLength) {
        alert('最大の長さは10文字以下です。')
    } else {
        passwordLength = len
    }
    // 生成する文字列に含める文字セット
    const passContent = "abcdefghijklmnopqrstuvwxyz0123456789";
  
    const cl = passContent.length;
    this.password = ''
    for (let i = 0; i < passwordLength; i++) {
        this.password += passContent[Math.floor(Math.random() * cl)];
    }
  },

定数、変数の準備

まずはじめにパスワード長さを格納する変数「passwordLength」を準備します。

次に最小の桁数と最大の桁数を定数で持ちます。

  const maxLength = 10 // 最大の桁数
  
    const minLength = 6 // 最小の桁数

最大や最小の多数を変更したい場合は、この数値を変更するだけでOKです。

条件の設定

次に、最大、最小の条件内でパスワードが生成されるように、

規定の範囲以外の数値が来たときに、アラートを表示する処理を追記します。

if (len <= minLength) {
      alert('パスワードは6文字以上から作成できます。')
  } else if (len > maxLength) {
      alert('最大の長さは10文字以下です。')
  } else {
      passwordLength = len
  }

まずは5桁以下だった場合の処理を追記し、

次に最大の桁数をオーバーしていないかを確認します。

2つの条件をクリアしていれば、「passwordLength」にinputで入力された値を代入します。

今回の条件で入ってくる数字は、「6, 7, 8」のどれかしか入らないので他の数字を入れてパスワードがされた場合どこかが間違えています。

パスワードの作成

// 生成する文字列に含める文字セット
  const passContent = "abcdefghijklmnopqrstuvwxyz0123456789";
  
  const cl = passContent.length;
  this.password = ''
  for (let i = 0; i < passwordLength; i++) {
      this.password += passContent[Math.floor(Math.random() * cl)];
  }

passContentはパスワードを生成する文字列に含まれる文字をセットしています。

大文字なども入れたい場合は、大文字を追加すれば大文字も含んだパスワードの生成ができます。

分岐させたい場合は、htmlでチェックボックスなどを準備して、チェックが入っていれば、passContentに大文字も含むように書いて上げるなどで対応できますね。

注意点としては、パスワードを生成する前に「this.password」を初期化することです。

初期化しないと、同じ変数に8桁づつ代入されていってしまします。

this.password += passContent[Math.floor(Math.random() * cl)];

あとは、jsにもともとあるMath関数を使ってランダムに文字列を取得するだけです。

これでランダムなパスワードを作成することができます。

コピー機能について

copy() {
      const text = this.password
      navigator.clipboard.writeText(text).then(e => {
          alert('コピーできました');
      });
  }

textにパスワードを代入して、それをクリップに保存します。

あとはボタンを押したときに関数が呼び出されるように記述してあげればOKです。