Cara Memasang Tools Password Generator di Blog - Password generator adalah salah satu tools yang berguna untuk memudahkan user dalam menentukan kata sandi atau password. Adapun cara kerja dari alat ini dengan menampilkan daftar karakter secara acak menggunakan JavaScript.
Tools ini juga bisa dikustomisasi dengan menentukan panjang karakter, penggunaan huruf besar (kapital) dan kecil, angka, serta simbol. Untuk lebih lengkapnya, silahkan membuka link berikut untuk tampilan demonya:
Selain autentikasi 2 faktor, pemilihan karakter pada kata sandi memang sangat penting untuk diperhatikan. Semakin susah karakter yang digunakan, semakin kuat pula kualitas password yang dihasilkan.
Hal tersebut tentu dapat mengurangi risiko pencurian data oleh hacker. Ada beberapa langkah penting yang perlu diperhatikan saat membuat password, diantaranya yaitu:
- Jangan menggunakan nama pribadi, tanggal ulang tahun, dan angka yang berurutan
- Jangan menggunakan password yang kurang dari 6 karakter
- Jangan menggunakan password yang sama di semua akun
- Jangan menggunakan kata-kata yang umum digunakan
- Gunakan kombinasi huruf, angka, dan simbol.
Seperti yang telah saya jelaskan di atas, tools ini bisa digunakan untuk menghasilkan password secara acak dengan kombinasi huruf, angka, dan simbol. Selain itu, Anda juga bisa mengatur secara manual panjang karakter yang akan digunakan.
Cara Memasang Tools Password Generator di Blog
- Masuk ke BLOGGER
- Pilih menu HALAMAN
- Pilih HALAMAN BARU
- Salin dan tempel dalam halaman yang telah disediakan:
- Pilih PUBLIKASIKAN
- Selesai.
<!-- HTML -->
<div class="passGenerator">
<div class="passResult">
<span id="result"></span>
<button class="passButton" id="clipboard">COPY</button>
</div>
<div class="passLists">
<div class="passList">
<label>Password length</label>
<input type="number" id="length" min="0" max="20" value="12"/>
</div>
<div class="passList">
<label>Include uppercase letter</label>
<input type="checkbox" id="uppercase" checked/>
</div>
<div class="passList">
<label>Include lowercase letter</label>
<input type="checkbox" id="lowercase" checked/>
</div>
<div class="passList">
<label>Include number</label>
<input type="checkbox" id="numbers" checked/>
</div>
<div class="passList">
<label>Include symbol</label>
<input type="checkbox" id="symbols"/>
</div>
</div>
<button class="passButton largeButton" id="generate">GENERATE</button>
</div>
<!-- End HTML -->
<!-- CSS -->
<style>
/* Password Generator by www.ferisp.com */
.passGenerator{width:100%;max-width:100%;background:#fffeff;font-family:"Noto Sans",sans-serif;font-size:16px;padding:20px;border:1px solid #e6e6e6}
.passResult{display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%;height:50px;background-color:#f8f8f8;font-size:18px;letter-spacing:1px;padding:12px 10px}
.passResult #result{word-wrap:break-word;max-width:calc(100% - 40px);color:#009ee0;font-weight:bold}
input#length{background:#fafafa;padding:8px;border:0}
.passResult .passButton{position:absolute;top:5px;right:5px;font-size:20px;height:40px;font-size:12px;letter-spacing:1.5px}
.passButton{background-color:#009ee0;color:#fff;padding:8px;font-size:16px;border:none;cursor:pointer}
.largeButton{display:block;margin:0 auto;padding:10px;font-size:15px}
.passList{display:flex;justify-content:space-between;align-items:center;margin:15px 0}
input[type=checkbox]{margin-right:0}
@media screen and (max-width:400px){.passResult{font-size:14px}}
/* Dark Mode */
.drK .passResult{background:#1e1e1e}
.drK .passGenerator{background:#252526;border-color:rgba(255,255,255,.15)}
.drK .passButton{background:#2d2d30}
.drK input#length{background:#1e1e1e}
</style>
<!-- End CSS -->
<!-- JavaScript -->
<script>
const resultEl=document.getElementById("result"),lengthEl=document.getElementById("length"),uppercaseEl=document.getElementById("uppercase"),lowercaseEl=document.getElementById("lowercase"),numbersEl=document.getElementById("numbers"),symbolsEl=document.getElementById("symbols"),generateEl=document.getElementById("generate"),clipboardEl=document.getElementById("clipboard"),randomFunc={lower:getRandomLower,upper:getRandomUpper,number:getRandomNumber,symbol:getRandomSymbol};
generate.addEventListener("click",()=>{const e=+lengthEl.value,c=lowercaseEl.checked,l=uppercaseEl.checked,s=numbersEl.checked,n=symbolsEl.checked;resultEl.innerText=generatePassword(c,l,s,n,e)});
clipboardEl.addEventListener("click",()=>{const e=document.createElement("textarea"),t=resultEl.innerText;t&&(e.value=t,document.body.appendChild(e),e.select(),document.execCommand("copy"),e.remove(),alert("Password copied!"))});
function generatePassword(e,r,t,n,o){let c="";const s=e+r+t+n,l=[{lower:e},{upper:r},{number:t},{symbol:n}].filter(e=>Object.values(e)[0]);if(0===s)return"";for(let e=0;e<o;e+=s)l.forEach(e=>{const r=Object.keys(e)[0];c+=randomFunc[r]()});return c.slice(0,o)}
function getRandomLower(){return String.fromCharCode(Math.floor(26*Math.random())+97)}function getRandomUpper(){return String.fromCharCode(Math.floor(26*Math.random())+65)}function getRandomNumber(){return String.fromCharCode(Math.floor(10*Math.random())+48)}function getRandomSymbol(){return"!@#$%^&*(){}[]=<>/,."[Math.floor(Math.random()*"!@#$%^&*(){}[]=<>/,.".length)]}
const floating_passButton=document.querySelector(".floating-passButton"),close_passButton=document.querySelector(".close-passButton"),social_panel_passGenerator=document.querySelector(".social-panel-passGenerator");
floating_passButton.addEventListener("click",()=>{social_panel_passGenerator.classList.toggle("visible")}),close_passButton.addEventListener("click",()=>{social_panel_passGenerator.classList.remove("visible")})
</script>
<!-- End JavaScript -->Penutup
Agar lebih aman, jangan lupa mencatat atau menyimpan password yang dihasilkan sebagai akses akun kedepannya. Oh iya, widget kali ini dibuat berdasarkan adaptasi kode / script dari blog www.inputekno.com.
Cukup sekian artikel tentang Cara Memasang Tools Password Generator di Blog ini, Terima kasih.