9 Replies Latest reply on Sep 22, 2010 4:30 PM by 5TagWalt

    Digital signature application with flex

    ayortanli

      Hi,

      We are planning to develop an application which will use flex-hibernate (as client server).

      İt also provides an interface to users where they can digitally sign some important data.

      We are in the technology selection phase, and try to find some api or etc. about that problem.

      İ looked for LiveCycle digital signature ES but, i couldn't find a clear info whether it can provide a solution or not.

      does anyone have an idea/comment about digital signature in flex applications???

        • 1. Re: Digital signature application with flex
          nikos101 Level 2

          heres some code I put together a few weeks ago

           

          hope it helps.

           

          let me know you want server code

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="getIP()" creationComplete="setColor()" styleName="plain" viewSourceURL="srcview/index.html" horizontalAlign="center" verticalAlign="top" width="214" height="246">
              <mx:RemoteObject
                id="myService"
                destination="ColdFusion"
                source="signature"
                fault="mx.controls.Alert.show(event.fault.message)"
                showBusyCursor="true"> 
              <mx:method name="getVisitorIP" result="my_IP_handler(event.result)"/>
                  <mx:method name="doUpload" result="my_CFC_handler(event.result)"/>
             
              </mx:RemoteObject>

           

              <mx:Script>
                  <![CDATA[
                      import mx.rpc.events.ResultEvent;
                      import flash.events.Event;
                 
                      private var isDrawing:Boolean=false;
                     
                       public var simpleDP:Array = ['0x000000', '0xFF0000', '0xFF8800',
                          '0xFFFF00', '0x88FF00', '0x00FF00', '0x00FF88', '0x00FFFF',
                          '0x0088FF', '0x0000FF', '0x8800FF', '0xFF00FF', '0xFFFFFF'];

           

                 
                      private var x1:int;
                      private var y1:int;
                      private var x2:int;
                      private var y2:int;
                      private var sIP:String;
                      private var SigFileName:String;
                      private var drawColor:uint;
             
                      private function getIP():void {
                          myService.getVisitorIP();
                      }

           

                      private function setColor():void {
                          drawColor = cp.selectedColor;
                      }   
                                 
                      private function doErase():void {
                          canvas.graphics.clear();
                      }
                 
                      private function doMouseDown():void {
                          x1 = canvas.mouseX;
                          y1 = canvas.mouseY;
                          isDrawing = true;
                      }
                 
                 
                 
                      private function doMouseMove():void {
                          x2 = canvas.mouseX;
                          y2 = canvas.mouseY;
                          if (isDrawing)
                          {
                              canvas.graphics.lineStyle(2, drawColor);
                              canvas.graphics.moveTo(x1, y1);
                              canvas.graphics.lineTo(x2, y2);
                              x1 = x2;
                              y1 = y2;
                          }
                      }
                 
                      private function doMouseUp():void {
                          isDrawing = false;
                      }
                 
                      private function doSave():void {
                          var bd:BitmapData = new BitmapData(canvas.width,canvas.height);
                          bd.draw(canvas);
                 
                          var ba:ByteArray = PNGEnc.encode(bd);
                 
                          myService.doUpload(ba,sIP);
                      }
             
                      private function doView():void {
                          //var u:URLRequest = new URLRequest("../converted_pngs/signature_" + sIP + ".png");
                          var u:URLRequest = new URLRequest("welcome.cfm?sig=" + SigFileName + ".png");
                          navigateToURL(u,"_blank");
                      }   
                     
                      private function my_IP_handler(result:Object):void {
                          sIP = result.toString();
                          lblIP.text = "IP: " + sIP
                      }
                     
                      private function my_CFC_handler(result:Object):void {
                          SigFileName = result.toString();
                          btnView.enabled = true;
                      }
             
                  ]]>
              </mx:Script>

           

              <mx:Canvas width="100%" height="100%">
             
                  <mx:Canvas id="canvas" width="100%" height="199"
                      horizontalScrollPolicy="off" verticalScrollPolicy="off"
                      mouseDown="doMouseDown()"
                      mouseMove="doMouseMove()"
                      mouseUp="doMouseUp()">
                  </mx:Canvas>
                  <mx:Button label="Clear" click="doErase()" x="12" y="207" fontSize="10" fontWeight="bold"/>
                  <mx:Button label="Accept" click="doSave()" x="75" y="207" fontSize="10"/>
                  <mx:Button id="btnView" label="View" click="doView()" enabled="false" x="149" y="207" fontSize="10" fontWeight="bold" color="#001ED5"/>
                  <mx:Label id="lblIP" text="IP:" color="#FF6600"  y="227" x="10"/>
                    <mx:ColorPicker dataProvider="{simpleDP}" id="cp"  selectedColor="0x006699" showTextField="true" change="drawColor = event.target.selectedColor" y="0" x="0"/>
               
              </mx:Canvas>
             
          </mx:Application>

           

          package {

           

              import flash.geom.*;
              import flash.display.*;
              import flash.utils.*;

           

              public class PNGEnc {

           

                  public static function encode(img:BitmapData):ByteArray {
                      // Create output byte array
                      var png:ByteArray = new ByteArray();
                      // Write PNG signature
                      png.writeUnsignedInt(0x89504e47);
                      png.writeUnsignedInt(0x0D0A1A0A);
                      // Build IHDR chunk
                      var IHDR:ByteArray = new ByteArray();
                      IHDR.writeInt(img.width);
                      IHDR.writeInt(img.height);
                      IHDR.writeUnsignedInt(0x08060000); // 32bit RGBA
                      IHDR.writeByte(0);
                      writeChunk(png,0x49484452,IHDR);
                      // Build IDAT chunk
                      var IDAT:ByteArray= new ByteArray();
                      for(var i:int=0;i < img.height;i++) {
                          // no filter
                          IDAT.writeByte(0);
                          var p:uint;
                          if ( !img.transparent ) {
                              for(var j:int=0;j < img.width;j++) {
                                  p = img.getPixel(j,i);
                                  IDAT.writeUnsignedInt(
                                      uint(((p&0xFFFFFF) << 8)|0xFF));
                              }
                          } else {
                              for(var k:int=0;k < img.width;k++) {
                                  p = img.getPixel32(k,i);
                                  IDAT.writeUnsignedInt(
                                      uint(((p&0xFFFFFF) << 8)|
                                      (p>>>24)));
                              }
                          }
                      }
                      IDAT.compress();
                      writeChunk(png,0x49444154,IDAT);
                      // Build IEND chunk
                      writeChunk(png,0x49454E44,null);
                      // return PNG
                      return png;
                  }
             
                  private static var crcTable:Array;
                  private static var crcTableComputed:Boolean = false;
             
                  private static function writeChunk(png:ByteArray,
                          type:uint, data:ByteArray):void {
                      if (!crcTableComputed) {
                          crcTableComputed = true;
                          crcTable = [];
                          for (var n:uint = 0; n < 256; n++) {
                              var c:uint = n;
                              for (var k:uint = 0; k < 8; k++) {
                                  if (c & 1) {
                                      c = uint(uint(0xedb88320) ^
                                          uint(c >>> 1));
                                  } else {
                                      c = uint(c >>> 1);
                                  }
                              }
                              crcTable[n] = c;
                          }
                      }
                      var len:uint = 0;
                      if (data != null) {
                          len = data.length;
                      }
                      png.writeUnsignedInt(len);
                      var p:uint = png.position;
                      png.writeUnsignedInt(type);
                      if ( data != null ) {
                          png.writeBytes(data);
                      }
                      var e:uint = png.position;
                      png.position = p;
                      var d:uint = 0xffffffff;
                      for (var i:int = 0; i < (e-p); i++) {
                          d = uint(crcTable[
                              (d ^ png.readUnsignedByte()) &
                              uint(0xff)] ^ uint(d >>> 8));
                      }
                      d = uint(d^uint(0xffffffff));
                      png.position = e;
                      png.writeUnsignedInt(d);
                  }
              }
          }

          • 2. Re: Digital signature application with flex
            ayortanli Level 1

            Thanks for the reply

            but i couldn't understand where this code sign some

            does it sign image with visitor ip?

            Basically what i want is to provide an interface to the user where user sign some data by using his private digital signature which is inside a smart card most probably

            • 3. Re: Digital signature application with flex
              nikos101 Level 2

              Opps I thought you wanted a hand written sig

              • 5. Re: Digital signature application with flex
                Michael Borbor Level 4

                Download The Tour De LiveCycle http://tourdelc.adobe.com/badge/ , you can find a lot of info there, and it's meant for developers to easily understand what the heck LiveCycle and all its sub applications are.

                • 6. Re: Digital signature application with flex
                  Sean Sell

                  So I think the answer to this is no. You can't do this in your Flex/Hibernate application. I don't see anything in the Flex API that would allow me to initiate the signature process.

                   

                  You could capture a digital signature if you use Live Cycle but it will have to be within a PDF.

                   

                  Someone prove me wrong an I'll buy you lunch, because I would love this to work.

                   

                  --Sean

                  • 7. Re: Digital signature application with flex
                    5TagWalt

                    I would like a copy of your server code (the cfc) if possible. Thanks!

                    • 8. Re: Digital signature application with flex
                      Sean Sell Level 1

                      I don't have code to do this, and still don't think it's possible. I also think that if it was done it would need to be done client side in the Flex code not on the server. When you apply a digital signature you have to use the users private key. If the private key was sent to the server to do the signing, that would be a big violation of the way PKI is supposed to work. Since the private key would now be compromised.

                      • 9. Re: Digital signature application with flex
                        5TagWalt Level 1

                        Sorry, I meant that for nikos101.