Titre: Intégration de la carte d'identité électronique EID dans une page web (15/11/2007 Par zion)
Introduction
Après avoir installé le lecteur ACR38U, le plus courant en Belgique de chez Zètes, pour une utilisation sur le site fédéral ou simplement par curiosité. Après avoir décrit comment utiliser un langage de haut niveau comme Delphi pour extraire les données de la carte, ouvrons un troisième volet de la saga avec l'intégration de la carte d'identité électronique sur une page web.

images/articles/article2809/001.jpg

Avant de nous lancer à corps perdu dans la tâche, reprenons tout d'abord les bases. Que faut-il installer avant de commencer? En tant que client, il faut tout d'abord avoir installé le beid runtime forni sur le site fédéral. C'est obligatoire, mais il faut aussi évidemment posséder un lecteur de carte d'identité électronique.

Pour bien comprendre la suite, ou pour aller plus loin ensuite, vous pouvez télécharger le SDK ainsi que le Developer Guide sur la même page du site fédéral. Tout n'y est pas parfait mais cela vous donnera une très bonne idée de ce qui est possible.

images/articles/article2809/002.png

Retour maintenant au développement à proprement parler. Pour la simplicité de l'article, nous allons uniquement nous occuper de la partie récupérant les informations de la carte d'identité, la gestion en PHP ou dans un autre environnement des données par la suite restera à développer, mais cela ne devrait avoir aucun secret pour vous.
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.

Code:
  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. > 
  12. <param name="Reader" value=""> 
  13. <param name="OCSP" value="-1"> 
  14. <param name="CRL" value="-1"> 
  15. <param name="DisableWarning" value="false"> 
  16. </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:

Code:
  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.

Code:
  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.


Code:
  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.


Code:
  1.     function getIDData() 
  2.     { 
  3.         var strTemp; 
  4.         var strTemp2; 
  5.         var strTemp3; 
  7.         strTemp = document.BEIDApplet.getCardNumber() + " "; 
  8.         document.getElementById('cardNumberField').innerHTML = strTemp; 
  9.         strTemp = document.BEIDApplet.getChipNumber() + " "; 
  10.         document.getElementById('chipNumberField').innerHTML = strTemp; 
  11.         strTemp = document.BEIDApplet.getValidityDateBegin() + " "; 
  12.         document.getElementById('valBeginField').innerHTML = strTemp; 
  13.         strTemp = document.BEIDApplet.getValidityDateEnd() + " "; 
  14.         document.getElementById('valEndField').innerHTML = strTemp; 
  15.         strTemp = document.BEIDApplet.getIssMunicipality() + " "; 
  16.         document.getElementById('issMunicField').innerHTML = strTemp; 
  17.         strTemp = document.BEIDApplet.getNationalNumber() + " "; 
  18.         document.getElementById('natNumberField').innerHTML = strTemp; 
  19.         strTemp = document.BEIDApplet.getName() + " "; 
  20.         document.getElementById('nameField').innerHTML = strTemp; 
  21.         strTemp = document.BEIDApplet.getFirstName1(); 
  22.         strTemp2 = document.BEIDApplet.getFirstName2(); 
  23.         strTemp3 = document.BEIDApplet.getFirstName3(); 
  24.         document.getElementById('firstNamesField').innerHTML = strTemp + " " + strTemp2 + " " + strTemp3 + " "; 
  25.         strTemp = document.BEIDApplet.getNationality() + " "; 
  26.         document.getElementById('natField').innerHTML = strTemp; 
  27.         strTemp = document.BEIDApplet.getBirthLocation() + " "; 
  28.         document.getElementById('birthLocField').innerHTML = strTemp; 
  29.         strTemp = document.BEIDApplet.getBirthDate() + " "; 
  30.         document.getElementById('birthDateField').innerHTML = strTemp; 
  31.         strTemp = document.BEIDApplet.getSex() + " "; 
  32.         document.getElementById('sexField').innerHTML = strTemp; 
  33.         document.BEIDApplet.getNobleCondition(); 
  34.         document.BEIDApplet.getWhiteCane(); 
  35.         document.BEIDApplet.getYellowCane(); 
  36.         document.BEIDApplet.getExtendedMinority(); 
  37.     }
Le résultat
Et voila, c'est tout, réellement tout. Avec cette applet, c'est tout simplement un jeu d'enfant que de récupérer des informations à partir d'une carte d'identité pour remplir un formulaire web. Quand on voit cela, on se demande quand même pourquoi si peu de sites utilisent la technologie? Parce que les gens ont peur d'utiliser leur carte d'identité électronique?

images/articles/article2809/003.png

En tout cas voici un mystère de résolu.
Retour