Blog TemplateMonster Türkiye

JQuery ile Dinamik Şifre Üretimi ve Değerlendirme

Barış Hepçorman

Kayıt formları genellikle web sitelerinin ortak bir parçası. Kayıtlı kullanıcılar kazanıyor bloglar, webapps, sosyal ağlar ve web siteleri için daha onlarca yarar sağlayabilir. Dinamik jQuery efektleri  kullanıcılara oldukça pratik yol gösterici kapsamlı deneyim için faydalı olabiliyor.  Bu aşamalardan biriside İnternet korsanlığını önlemek açısından yeterince karışık ve benzersiz şifreler üretmek gerekebilir.

Bu eğitim için ben Passy adlı açık kaynak kodlu bir jQuery eklentisinin gücünü göstermek istiyorum.  Bu parola üretimi ve karmaşıklığı açısından test yapabileceğimiz iki ana fonksiyon ile birlikte gelir.  Uzunluk, karakter türleri, harf ve diğer benzer özellikleri kontrol etmek için özel parametreler den oluşan listeler bulunur.  Fakat, Passy kendi özel ayarları ile ilgili bir takım kodlama olmadan da kullanılabilir.   Benim örnek dosyamı inceleyin ve kodları kopyalamak için lütfen çekinmeyin.

Canlı  Demo – Kaynak Kodunu indir

Sayfa Oluşturma

Öncelikle temel HTML dosyası kurulum ve Passy eklentisinin bir kopyasını yüklememiz gerekir.  Bunun için en son jQuery kütüphanesinin bir kopyası ile birlikte tek bir JS dosyası gereklidir. Aslında oldukça küçük, resmi bir Github repo Passy bir kopyasıdır. Zip arşivi içerisinde sadece beni oku ile birlikte JS dosyasını içermektedir.

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Dynamic Password Generation & Rating Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://www.templatemonster.com/favicon.ico">
  <link rel="icon" href="http://www.templatemonster.com/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
  <script type="text/javascript" src="js/jquery-passy.js"></script>
</head>

Tasarım stillerini, tüm bu ana HTML dosyalarının alt kısmına eklemek gerekir ve özel jQuery kodu yazılır. JS eklenti kodunu anlamak için ve özelleştirmek için herhangi bir zorluk içermez gayet kolaydır.  Bende genel sayfa tasarımını şekillendirebilmek adına kendi sitillerimi dahil ettim.

1
2
3
4
5
6
7
8
 
<div id="someform">
    <input type="password" name="password" id="input" class="basictxt" placeholder="Type your password">

      <span id="output">...</span>
  </div>

  <a href="#" id="generate" >Generate Password</a>
  <input type="text" id="generatedpw">

Sayfa bünyesinde bu HTML kodlarının saklanması için herhangi bir yöntem gerekmez.  Bu değer niteliğinde eklenir çünkü, bir giriş alanı ve parolaları oluşturmak için kullanılabilir. Diğer tek yöntem daha sonra HTML içinde şifre  üzerine kopyalanır, gizli bir giriş üzerinde üretimi geçerli olacaktır.  Biraz daha kıvrık, ama PW üretimi için tek bir giriş için başka bir şey gerekiyorsa bu yararlı olacaktır.

Sayfanın en üstünde bizim tarafımızdan oluşturulan başka bir span öğesi ile tipik bir şifre girişi vardır.  Bu bekleme süresi canlı Passy'nin demo ayarıdır ID no çıkışı kullanılarak hedeflenmektedir.

Tasarım Sitilleri

Benim örnek demom dahil, gerçekten harika bazı özel tasarımlarda vardır.  Çeşitli sınıfların bir çoğunu görmek için benim hazırladığım styles.css stil dosyamı kontrol edebilirsiniz.  Özellikle ben @import deneyimini kullanarak tek bir Google Web Font API dosyasını dahil ettim.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
.btn { 
  display: inline-block;
  margin: 2px;
  padding: 0px 15px 3px;
  background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));
  background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));
  background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));
  background-image: -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));
  background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));
  background-color: #659ae0;
  vertical-align: middle;
  font: italic 14px/32px Georgia,Serif;
  text-align: center;
  color: #fff;
  text-decoration: none;
  text-shadow: 0px 1px 0px rgba(0,0,0,0.15);
  -webkit-box-shadow: inset 0px -3px 0px rgba(0,0,0,0.1), 0px 3px 0px rgba(0,0,0,0.1);
  -moz-box-shadow: inset 0px -3px 0px rgba(0,0,0,0.1), 0px 3px 0px rgba(0,0,0,0.1);
  box-shadow: inset 0px -3px 0px rgba(0,0,0,0.1), 0px 3px 0px rgba(0,0,0,0.1);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.btn:hover {
  color: #fff;
  background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2));
  background-image: -moz-linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2));
  background-image: -ms-linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2));
  background-image: -o-linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2));
  background-image: linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2));
}
.btn:active{ 
  position: relative;
  top: 2px;  
  -webkit-box-shadow: inset 0px -1px 0px rgba(0,0,0,0.1), 0px 2px 0px rgba(0,0,0,0.1);
  -moz-box-shadow: inset 0px -1px 0px rgba(0,0,0,0.1), 0px 2px 0px rgba(0,0,0,0.1);
  box-shadow: inset 0px -1px 0px rgba(0,0,0,0.1), 0px 2px 0px rgba(0,0,0,0.1);
}

Bu büyük mavi düğme Codepen kullanılarak Stephan Rusu tarafından tasarlanmıştır. Onun kodları arasında daha çok, siyah ve yeşil butonlar bulunmaktadır eski Firefox tasarımlarını içerir. Herhangi bir düzen için güzel renkli butonları dahil ederek kolay bir yöntem olabilir.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
/* page structure */
#w {
  display: block;
  width: 800px;
  margin: 0 auto;
  background: #fff;
  padding: 15px 20px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

#someform {
  display: block;
  margin-bottom: 30px;
}

.basictxt {
  padding: 4px 7px;
  color: #474747;
  font-size: 1.75em;
  width: 320px;
}

#generatedpw {
  display: block;
  margin-top: 15px;
  border: 1px solid #ddd;
  padding: 5px;
  width: 260px;
  color: #575757;
  font-size: 1.7em;
}

#output {
  position: relative;
  top: -1px;
  padding: 8px 10px;
  font-size: 1.4em;
  color: #fff;
  text-shadow: 0px 1px 1px rgba(0,0,0,0.25);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

Benim stil dosyasının altında tüm sayfa içeriğini bulabilirsiniz.  Bu stiller çeşitli form elemanları ile birlikte temel Wrapping divi içermektedir.  Şifre gerçek değerlendirilmesi jQuery kullanılarak ele alınır, özelleştirmek için bu şekilde daha kolay olacak. Her iki şekil de, sadece çok benzer bir web sitesi tasarımı kurulumu biraz sabır ve biraz el emeği alır.

jQuery ile Geliştirilmesi

Son olarak bu eklenti için son parça tim varsayılan işlevleri oluşturmaktadır.  Bu demo örnek kod şifre gereksinimleri için kendi desen belirtilmeden en kolay yöntemlerden biri etrafına dayanır. Daha anlaşılır olması için jQuery çok daha kolay bir hale getirir, küçük parçacıklar halinde her bölümü incelemek istiyorum.

1
2
3
4
5
 
var $input  = $('#input');
var $output = $('#output');
var $generate = $('#generatedpw');

$.passy.requirements.length.min = 5;

İlk olarak hedef  öğeleri için bir kaç satır kurulum değişkenleri bulunur.  $input bağlamsal değerlendirilmesi ise $output parola alanıdır.  Şimdi $generate başkabir giriş alanı sayfanın alt kısmında yer alır. Bu dinamik olarak oluşturulmuş bir parola alır ve kopyala/yapıştır  ile kendi parolası olarka kullanmak için ziyaterçilere normal metin olarak görünürler.

The $.passy.requirements nesneyi işleyebilirsiniz farklı bir sürü özellikleri içermektedir. bu demo sadece bir şifrenin 5 karakterden daha uzun olmasını gerektirir.

1
2
3
4
5
6
7
8
9
10
11
12
 
var feedback = [
    {color: '#d0a14f', text: 'weak'},
    {color: '#4fb9d0', text: 'okay'},
    {color: '#4fd098', text: 'good'},
    {color: '#2fc170', text: 'perfect!'}
];

// setup the passy() function on each input
$input.passy(function(strength, valid) {
  $output.text(feedback[strength].text);
  $output.css('background-color', feedback[strength].color);
});

Geri bildirim karmaşıklığı değişen nesneleri tutan özel bir dizidir.  Şifre değerlendirmesi mekanızması bir şifre düze düzeyini görüntülemek için kullanılır.  Gerektiği gibi renk ve diğer stil ayarlarını özelleştirmenize olanak sağlar, ancak eklenti kaynak koduna inşa edilmiştir.

Kod ikinci blogu passy() fonksiyonunu çalışırken bizim giriş alanımızı hedefliyor.  Biz mevcut dize geçerliliğini güncellemek için yeni bir karakter alanına yazdığımızı her zaman kontrol eder.  Tüm yaptığımız $output elemanı için dahili metin ve arka plan rengini güncellenmesi olabilir. Hatta söz dizimi kullanılarak her seviye için kendi özelliklerini oluşturabilir ve erişebilirsiniz.
feedback[strength].nameofproperty.

1
2
3
4
5
 
// unique password generation
$('#generate').on('click', function(e) {
  e.preventDefault();
  $generate.passy('generate', 10);
});

Bu kod son blok benzersiz özel parola oluşturur ve $generate oluşturmak için giriş alanına yerleştirilir. Parametre ile arama passy() biz eklenti farklı bir yöntem ile çağrısını bekliyoruz anlamına gelir.  Benim ikinci parametre yeni şifre uzunluğu belirten bir sayıdır.  Bu yöntemleri araştırma ihtiyacı duyuyorsanız biraz daha çevrimiçi eklenti belgelerine göz atın.

Canlı Demo – Kaynak Kodunu İndir

Kapanış

Passy dinamik kayıt formları kurmak için idealdir tabi ki bu benim kendi şahsi fikrimdir. Kullanıcıların aklına bir parça akıl vermek için bir şifre karmaşıklığı denetleyicisi ile doğru olur.  Web siteniz beklentileri karşılayan durumda bir şifre seçerken insanların karar vermesine yardımcı olabilir. Kesinlikle benim kaynak kodlarımın kopyasını indirmek ve kendi web projeleriniz için bu eklentinin nasıl görüneceğini görmek için çekinmeyin.