Intégration de la carte d'identité électronique EID dans une page web
Publié le 15/11/2007 Dans Programmation
1. Introduction
2. » On programme
3. Le résultat
On programme
Pour commencer, nous avons besoin de placer une applet sur la page, l'applet est fournie dans le SDK et permet de faire un lien entre le lecteur sur le poste client et du javascript sur votre page.

  1. <applet 
  2.   codebase = "." 
  3.  archive  = "beidlib.jar" 
  4.  code     = "be.belgium.eid.BEID_Applet.class" 
  5.  name     = "BEIDApplet" 
  6.  width    = "140" 
  7.  height   = "200" 
  8.  hspace   = "0" 
  9.  vspace   = "0" 
  10.  align    = "middle" 
  11. <param name="Reader" value=""
  12. <param name="OCSP" value="-1"
  13. <param name="CRL" value="-1"
  14. <param name="DisableWarning" value="false"
  15. </applet>


Nous avons donc besoin de l'archive beidlib.jar. Dans le SDK fourni à l'heure actuelle, il était quasi introuvable, en cherchant un peu plus profondément il y a moyen de le retrouver mais pour votre confort vous le trouverez dans un lien en fin d'article.

Dans la démo complète, vous pourrez utiliser quasi tous les champs, mais limitons nous pour l'article à deux champs, le nom et prénom.

On commence tout d'abord par définir les champs en HTML:

  1.                     <tr class="backgroundPanel" height="4"><td colspan="2"></tr
  2.                     <tr class="backgroundPanel"
  3.                       <td class="labelText" align="right" width="150" nowrap>&nbsp;Name:&nbsp;</td
  4.                       <td class="dataText" id="nameField" align="left" nowrap>&nbsp;</td
  5.                     </tr
  6.                     <tr class="backgroundRoundedPanel" height="4"><td colspan="2"></tr
  7.                     <tr class="backgroundRoundedPanel"
  8.                       <td class="labelText" align="right" width="150" nowrap>&nbsp;First Names:&nbsp;</td
  9.                       <td class="dataText" id="firstNamesField" align="left">&nbsp;</td
  10.                     </tr>


Vous voyez que l'on a deux colonnes dans la table appellée pour la première nameField et pour la deuxième firstNamesField. La même chose serait applicable avec de légères modifications pour un input.

Plaçons maintenant un bouton pour récupérer les informations de la carte.

  1.           <td> <input type="button" name="IDButton" onclick="javascript:ReadCard()" value="Read Card "title="Read Card"/> </td>


Voici le code en résumé de la fonction, en enlevant les fonctions d'affichage de la progression. Il suffit en fait d'initialiser l'applet, de récupérer ensuite les données. Les fonctions getIDData et getAddressData récupèrent toutes les deux des données de la carte, la première des données de base (numéro de carte, etc, etc), la deuxième l'adresse.


  1.     function ReadCard() 
  2.     { 
  3.       var retval; 
  4.       EmptyScreen(); 
  5.       retval = document.BEIDApplet.InitLib(null); 
  6.       if(retval == 0
  7.       { 
  8.         getIDData(); 
  9.         getAddressData(); 
  10.         document.BEIDApplet.GetPicture(); 
  11.         Document.BEIDApplet.ExitLib(); 
  12.       } 
  13.     }


Intéressons nous en partie à la première fonction, le getIDData. En pratique, il suffit pour chaque champ de connaître le nom que représente la donnée sur la carte d'identité et de remplacer ensuite la valeur sur la page. Quand on a déjà fait un petit peu de javascript, cela devient vite un jeu d'enfant.


  1.     function getIDData() 
  2.     { 
  3.         var strTemp; 
  4.         var strTemp2; 
  5.         var strTemp3; 
  6.         strTemp = document.BEIDApplet.getCardNumber() + " "
  7.         document.getElementById('cardNumberField').innerHTML = strTemp; 
  8.         strTemp = document.BEIDApplet.getChipNumber() + " "
  9.         document.getElementById('chipNumberField').innerHTML = strTemp; 
  10.         strTemp = document.BEIDApplet.getValidityDateBegin() + " "
  11.         document.getElementById('valBeginField').innerHTML = strTemp; 
  12.         strTemp = document.BEIDApplet.getValidityDateEnd() + " "
  13.         document.getElementById('valEndField').innerHTML = strTemp; 
  14.         strTemp = document.BEIDApplet.getIssMunicipality() + " "
  15.         document.getElementById('issMunicField').innerHTML = strTemp; 
  16.         strTemp = document.BEIDApplet.getNationalNumber() + " "
  17.         document.getElementById('natNumberField').innerHTML = strTemp; 
  18.         strTemp = document.BEIDApplet.getName() + " "
  19.         document.getElementById('nameField').innerHTML = strTemp; 
  20.         strTemp = document.BEIDApplet.getFirstName1(); 
  21.         strTemp2 = document.BEIDApplet.getFirstName2(); 
  22.         strTemp3 = document.BEIDApplet.getFirstName3(); 
  23.         document.getElementById('firstNamesField').innerHTML = strTemp + " " + strTemp2 + " " + strTemp3 + " "
  24.         strTemp = document.BEIDApplet.getNationality() + " "
  25.         document.getElementById('natField').innerHTML = strTemp; 
  26.         strTemp = document.BEIDApplet.getBirthLocation() + " "
  27.         document.getElementById('birthLocField').innerHTML = strTemp; 
  28.         strTemp = document.BEIDApplet.getBirthDate() + " "
  29.         document.getElementById('birthDateField').innerHTML = strTemp; 
  30.         strTemp = document.BEIDApplet.getSex() + " "
  31.         document.getElementById('sexField').innerHTML = strTemp; 
  32.         document.BEIDApplet.getNobleCondition(); 
  33.         document.BEIDApplet.getWhiteCane(); 
  34.         document.BEIDApplet.getYellowCane(); 
  35.         document.BEIDApplet.getExtendedMinority(); 
  36.     }
Commentaires
Editer  Citer
Intégration de la carte d'identité électronique EID dans ...
comment fait-on pour l'intégrer dans un site intranet, et non pas sur le pc même?
Par vanderwee, Publié le 17/02/2009 @ 17:14:57
Editer  Citer
Intégration de la carte d'identité électronique EID dans ...
Merci pour cet article. j'ai teste et mis en place.

j'ai fait une page sans prétentions qui reprend les liens vers les sites utilisant l'e-id de ma connaissance
http://www.tilto.be/eid.html

si vous en connaissez d'autre je suis preneur...

plus on sais a quoi ça sert, plus on va l'utiliser cette carte :smile:
Par Tilto, Publié le 22/04/2009 @ 10:55:34
Editer  Citer
Intégration de la carte d'identité électronique EID dans ...
Comme j'ai fait un fichier pour envoyer les données dans un formulaire web, autant le mettre à la disposition de celui à qui ça peut servir :
http://www.tiptip.be/cardreader/
Par boakim, Publié le 16/03/2011 @ 20:36:35
Editer  Citer
Intégration de la carte d'identité électronique EID dans ...
Bonjour,

Votre exemple fonctionne parfaitement sous windows! Par contre je n'arrive pas à mettre la main sur l'applet Linux pour pouvoir mettre ce système sur un formulaire en ligne.

Merci d'avance,

Ludovic
Par Eza07, Publié le 30/01/2013 @ 16:13:20
Editer  Citer
Intégration de la carte d'identité électronique EID dans ...
L'applet Linux? Il y a un middleware sous Linux, mais l'applet elle est la même sur toutes les plateformes.

Néanmoins, je vous suggère de chercher eid-applet sur Google car l'applet ici est obsolète depuis pas mal de temps.
Par zion, Publié le 12/02/2013 @ 21:39:42
Editer  Citer
Intégration de la carte d'identité électronique EID dans ...
Bjr,

Merci pour cet excellent tuto et les claires explications.
Je suis en PHP et cela fonctionne très bien.
Par contre, ce qui me manque encore c'est de savoir comment récupérer la photo de la carte d'identité, l'afficher certes, mais aussi et surtout la garder dans une base sql.

Renaud
Par RenaudXtendance, Publié le 18/09/2013 @ 11:03:43
Editer  Citer
Intégration de la carte d'identité électronique EID dans ...
Bonjour,

je cherche une version plus récente adaptée aux dernières versions de Java, car celle-ci déclenche une alerte expliquant que cette apli sera bloquée dans les futurs versions.

Merci.
Par Francoi$, Publié le 18/10/2013 @ 01:43:52
Editer  Citer
Intégration de la carte d'identité électronique EID dans ...
Bonjour,

J'ai bien suivi votre tuto mais cela ne fonctionne pas, est ce que vous pouvez mettre a jour votre post ?

Bien cordialement.
Par sventek, Publié le 02/12/2020 @ 10:20:43

Poster un commentaire
Vous devez être identifié pour accéder à cette fonctionnalité

Utilisateur
Mot de passe
 
Informaticien.be - © 2002-2022 AkretioSPRL  - Generated via Kelare
The Akretio Network: Akretio - Freedelity - KelCommerce - Votre publicité sur informaticien.be ?