CuteDev Elektronik İmza

Elektronik imzalamayı Chrome üzerinde yapabilmeyi sağlayan örnek çalışmadır.

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/volkansendag/cutedev-eimza/master/ClientWeb/assets/cutedev/cute.eimza.js"></script>
<div class="main container">
  <form id="imzala">
    <div class="form-group">
      <label for="file1">İmzalanacak Dosya</label>
      <input name="file" type="file" class="form-control" id="file1" placeholder="imzalanacak dosya seçiniz.">
    </div>
    <div class="form-group">
      <label for="pin">E-imza Parolası</label>
      <input id="pin" value="" type="password" class="form-control" placeholder="Parola">
    </div>
    <div class="form-group">
      <button type="submit" class="btn btn-primary imzala glyphicon glyphicon-certificate">
        <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>İmzala
      </button>
    </div>
    <div class="form-group">
      <div id="response"></div>
    </div>
  </form>
  <form id="install-info">
    <div class="form-group">
      <div>Eimza uygulaması burada görüntülenecek. Ancak bunun için Chrome eklentisini kurmanız gerekiyor.</div>
      <br />
      <div>Chrome eklentisine <a href='https://chrome.google.com/webstore/detail/cutedev-e-imza/ehjffgchplohbcbeakpncbgconplfjpg/' target='_blank'>chrome web strore</a> adresinden ulaşabilirsiniz.</div>
    </div>
  </form>
</div>

CSS

.container {
  margin-top: 15px;
}

#imzala,
#install-info {
  display: none;
}

JavaScript

$(document).ready(function() {
  var $input = $('input[name="file"]').file2Base64(),
    $pin = $('#pin');

  function detectExtension(extensionId, callback) {
    var img;
    img = new Image();
    img.src = "chrome-extension://" + extensionId + "/img/icon.png";
    img.onload = function() {
      callback(true);
    };
    img.onerror = function() {
      callback(false);
    };
  }

  function saveAs(uri, filename) {
    var link = document.createElement('a');
    if (typeof link.download === 'string') {
      link.href = uri;
      link.download = filename;

      document.body.appendChild(link);

      link.click();

      document.body.removeChild(link);
    } else {
      window.open(uri);
    }
  }

  function initForm() {

    window.addEventListener("message", function(e) {
      if (e.data && e.data.type && e.data.type == "FROM_APP") {
        var response = e.data.response;
        if (response.Error) {
          $("#response").html(response.Message);
        } else if (response.Value) {
          var url = 'data:' + $input.data("type") + ';base64,' + response.Value.signedBase64File;
          saveAs(url, $input.data("name") + ".p7s");
          $("#response").html("Dosya imzalandı.");
        } else if (typeof response == "string") {
          $("#response").html(response);
        } else {
          $("#response").html("Sonuç alınamadı.");
        }
      }
    }, false);

    $("form").submit(function() {
      var base64 = $input.data("base64");

      if (!base64) {
        $("#response").html("Dosya seçilmemiş.");
      } else {
        $("#response").html("Dosya imzalanıyor...");
        try {
          window.postMessage({
            type: "FROM_PAGE",
            methodName: "imzala",
            callbackId: "78465416549879",
            Data: {
              base64File: base64,
              pin: $pin.val(),
            }
          }, "*");
        } catch (e) {
          $("#response").html("İmzalama başarısız. Ex:" + e.message);
        ...