Asp.Net Mvc QrCode Oluşturma

Merhaba arkadaşlar, bu yazımızda Asp.Net Mvc’ de QrCode nasıl oluşturulur, görsellik nasıl katılır gibi bir kaç konuya bakıyor olacağız.


Daha önce SignalR ile sistemin web arayüzünde şifre girmeye ihtiyaç duymadan mobil uygulama aracılığıyla sisteme giriş yapmayı sağlayan Authenticator yapmıştık. Bu işlemi biraz daha geliştirip Web Whatsapp’ taki oturum mantığıyla çalışan QrCode ile bir authenticator yapmaya karar verdim. Bunun içinde ilk adımımız olan QrCode oluşturmayı ayrı bir yazı olarak biraz daha fazla özelliğine değinerek sizlerle paylaşmak istedim. Sonrasında yine küçük bir uygulama ile Web Whatsapp benzeri bir QrCode ile sisteme giriş yapıyor olacağız. Ama şimdi sadece Qrcode konusuna değinelim.

1.QrCode paketini indirme.

Projemiz açıldıktan sonra projeye sağ tıklayarak Manage Nuget Packages seçeneği tıklanır. Nuget’ tan QrCoder paketi projeye dahil edilir.

2.QrCode oluşturma metodunun yazılması.

        [HttpPost]
        public ActionResult QrCode()
        {
            string mesaj= "Merhaba QrCode oluşturuyorum";
            QRCodeGenerator qrGenerator = new QRCodeGenerator();
            QRCodeData qrCodeData = qrGenerator.CreateQrCode(mesaj, QRCodeGenerator.ECCLevel.Q);
            QRCode qrCode = new QRCode(qrCodeData);
            Bitmap qrCodeImage = qrCode.GetGraphic(20);
            var bitmapBytes = BitmapToBytes(qrCodeImage);
            return Json(Convert.ToBase64String(bitmapBytes));
        }
        private static byte[] BitmapToBytes(Bitmap img)
        {
            using (MemoryStream stream = new MemoryStream())
            {
                img.Save(stream, System.Drawing.Imaging.ImageFormat.Png);
                return stream.ToArray();
            }
        }

Şimdi kısaca yukarıdaki kodu nasıl özelleştirebilirz kısa bir şekilde ona bakalım.

mesaj kısmı QrCode cihazda okutulduğunda elde edilmek istenen datayı ifade eder. Basit bir örnek vermek gerekirse müşteri bilgisini tutarak mobil cihazımızdan müşteri bilgilerine bu sayede erişebiliriz.

Burada dikkatinizi çektiğini düşündüğüm GetGraphic adında bir metod var. bu metodun 4 farklı kullanım şekli var. Sırasıyla şimdi onlara bakalım.

  • (int pixelPerModule)
  • (int pixelPerModule,Color darkcolor,Color lightColor,[bool drawQuietZones=true])
  • (int pixelPerModule,string darkColorHtmlHex,string lightColorHtmlHex,[bool drawQuietZones=true])
  • (int pixelPerModule,Color darkcolor,Color lightColor,[Bitmap icon=null],[int iconSizePercent=15],[int iconBorderWidth=6],[bool drawQuietZones=true])

En basit haliyle birinci metodu kullanabilir. Bu metoda gönderdiğimiz parametre qr code’ daki her kutu başına düşen pixel değerini belirtiyor.

2. ve 3. metodlarda ise göndereceğimiz parametre qr code daki siyah görünen yerin hangi renk; 3.parametre ise beyaz görünen yerine hangi renkte olacağını belirtiyor;4. ve son parametremiz qr code’ un kenarlarındaki boşluklarla ilgili. False yapmamız durumunda qr code üretildiğinde kenarlarında boşluk olmayacaktır.

4. ve son metodumuzda dilersek qr code’ a icon ekleyebilir ve 5. ve 6. parametrelerle bu iconumuzun kenarlık ve genişlik değerleri ile oynama yapabiliriz.

Son adım olarak üretilen Qr kodu ToBase64String() metodu ile return ederek view’ de gösteririz.

View İşlemleri

<img id="imgQrCode" style="width:250px;height:250px" />

Sayfamıza imgQrCode adında bir img tagi ekleriz. Aşağıdaki function ile de jquery yardımıyla img taginin src attribute’ na metodumuzdan dönen değeri veririz.

        $.ajax({
            type: 'POST',
            url: "/ServiceYonetim/QrCode",
            datatype: "json",
            data: "",
            success: function (data) {
                //console.log(data);
                $("#imgQrCode").attr('src', 'data:image/jpeg;base64,' + data);
            }
        });

Related Post

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir