Après plusieurs recherches sur le Net, je n’ai pas trouvé ce que je voulais pour la récupération des données de la carte d’identité « eID » dans les champs d’un formulaire.
Je me suis donc, décidez de récupérer le SDK ainsi que le Developer Guide sur la page du site fédéral.
D’après l’exemple sur des champs statiques, j’ai modifié le code pour la récupération dans des champs de type input « text ».
Par facilité, j’ai gardé la structure du fichier exemple fourni par le fédéral, c’est-à-dire que vous aller retrouver les CSS, JavaScript, HTML dans le même fichier HTML. Perso je n’aime pas cette manière de codé, pour moi tout dois être séparé dans des fichiers distincts, cela rend la lecture du code plus facile et en cas de mise à jour, il est évident que cela reste un moyen plus rapide.
Je pars dans le principe que vous avec installer correctement votre lecteur de carte sur votre pc.
Bon aller on arrête de bavarder et on y vas
Récupération du « SDK »
Avant tout, allez chercher le « Belgium Identity Card Developer’s Kit » sur le site. (ICI).
La fonction « getIDData() » et getAddressData()
function getIDData()
{
var strTemp;
var strTemp2;
var strTemp3;
strTemp = getBEIDApplet().getCardNumber();
document.getElementById("cardNumberField").value = strTemp;
strTemp = getBEIDApplet().getChipNumber();
document.getElementById("chipNumberField").value = strTemp;
strTemp = getBEIDApplet().getValidityDateBegin();
document.getElementById('valBeginField').value = strTemp;
strTemp = getBEIDApplet().getValidityDateEnd();
document.getElementById('valEndField').value = strTemp;
strTemp = getBEIDApplet().getIssMunicipality();
document.getElementById('issMunicField').value = strTemp;
strTemp = getBEIDApplet().getNationalNumber();
document.getElementById('natNumberField').value = strTemp;
strTemp = getBEIDApplet().getSurname();
document.getElementById('nameField').value = strTemp;
strTemp = getBEIDApplet().getFirstName();
strTemp2= getBEIDApplet().getInitials();
if (strTemp2!="")
{
strTemp = strTemp + " ";
strTemp = strTemp + strTemp2;
}
document.getElementById('firstNamesField').value = strTemp;
strTemp = getBEIDApplet().getNationality();
document.getElementById('natField').value = strTemp;
strTemp = getBEIDApplet().getBirthLocation();
document.getElementById('birthLocField').value = strTemp;
strTemp = getBEIDApplet().getBirthDate();
document.getElementById('birthDateField').value = strTemp;
strTemp = getBEIDApplet().getSex();
document.getElementById('sexField').value = strTemp;
strTemp = getBEIDApplet().getNobleCondition();
document.getElementById('titleField').value = strTemp;
getBEIDApplet().getWhiteCane();
getBEIDApplet().getYellowCane();
getBEIDApplet().getExtendedMinority();
}
//--------------------------------------------
// Récupération de l'adresse
//--------------------------------------------
function getAddressData()
{
var strTemp;
var strTemp2;
var strTemp3;
strTemp = getBEIDApplet().getStreet();
strTemp2 = getBEIDApplet().getStreetNumber();
strTemp3 = getBEIDApplet().getBoxNumber();
document.getElementById('streetField').value = strTemp + " " + strTemp2 + " " + strTemp3;
strTemp = getBEIDApplet().getZip();
strTemp2 = getBEIDApplet().getMunicipality();
document.getElementById('municField').value = strTemp + " " + strTemp2;
strTemp = getBEIDApplet().getCountry();
document.getElementById('countryField').value = strTemp;
strTemp = getBEIDApplet().getSpecialStatus();
document.getElementById('specialStatusField').value = strTemp;
}
Cette fonction permet de récupérer tous les champs disponibles sur la carte d’identité, et les retourne dans les différents champs « input »
Ex.: cette ligne de code veut dire :
document.getElementById('natField').value = strTemp;
Le getElementById permet de récupérer l’id de l’élément donner à un input, ici le nom(id) est natField, et le .value permet de venir placer le contenu de la variable strTemp dans le champ input.
Les champs « input » en HTML
<tr class="backgroundRoundedPanel"> <td class="labelText" align="right" style="width:150">Prénom :</td> <td> <input type="text" class="dataText" align="left" id="firstNamesField" ></td> </tr>
Voilà rien de bien méchant, ici on ajoute un label « Prénom » et on injecte le contenu de la carte dans l’input id « firsNamesField »
Le chargement de l’applet
<script type="text/j-avascript" language="javascript">
//----------------
// CHARGEMENT DES APPLET POUR LE FONCTIONNEMENT DU FORMULAIRE
// give the following variables:
// subdir: the subdirectory where the applet jar file resides
// jnlpPath: the path to the jnlp file
// ex: subdir="appletDir";
// jnlpPath=subdir;
//----------------
var subdir="";
var jnlpPath=subdir;
//----------------
// - get the href of this page
// - strip off the name of this page
//----------------
var myloc = window.location.href;
var locarray = myloc.split("/");
delete locarray[(locarray.length-1)];
var url = locarray.join("/");
document.writeln('<applet code="org.jdesktop.applet.util.JNLPAppletLauncher"');
document.writeln('codebase = "' + url + subdir + '"');
document.writeln('width ="140"');
document.writeln('height ="200"');
document.writeln('name = "BEIDAppletLauncher"');
document.writeln('id = "BEIDAppletLauncher"');
document.writeln('archive="applet-launcher.jar,beid35libJava.jar,BEID_Applet.jar">');
document.writeln('<param name="codebase_lookup" value="false">');
document.writeln('<param name="subapplet.classname" value="be.belgium.beid.BEID_Applet">');
document.writeln('<param name="progressbar" value="true">');
document.writeln('<param name="jnlpNumExtensions" value="1">');
document.writeln('<param name="jnlpExtension1" value= "' + url + jnlpPath + '/beid.jnlp">');
document.writeln('<param name="jnlp_href" value="' + url + jnlpPath + '/beid.jnlp">');
document.writeln('<param name="debug" value="false"/>');
document.writeln('<param name="Reader" value=""/>');
document.writeln('<param name="OCSP" value="-1"/>');
document.writeln('<param name="CRL" value="-1"/>');
document.writeln('</applet>');
</script>
Ce script permet de charger les différents fichiers de l’applet. Vous devrez faire attention à la déclaration du chemin de ces fichiers.
Regarder le petit commentaire dans le script vous devriez comprendre le fonctionnement, si pas laisser un commentaire
Et voilà cela est terminer, alors rien de compliqué non ?
Je vous mets aussi le code complet avec le css, JavaScript et HTML tout-en-un, mais comme dit plus haut cela n’est pas une bonne manière de coder
Le code complet
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<title>Belgian eID Card -- RyleBlog</title>
<meta name="keywords" content="Belgian, Belgique, eID, Card, input, lecture />
<meta name="description" content="Récupération des champs de la carte d'identité dans un champs de type input" />
<meta name="author" content="RyleBlog" />
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-15" />
<script type="text/j-avascript" language="javascript">
//--------------------------------------------
// Chargement de l'applet
//--------------------------------------------
function getBEIDApplet()
{
try {
return document.BEIDAppletLauncher.getSubApplet();
} catch(e) {
return document.BEIDAppletLauncher;
}
}
//--------------------------------------------
// Chargement des données
//--------------------------------------------
function getIDData()
{
var strTemp;
var strTemp2;
var strTemp3;
strTemp = getBEIDApplet().getCardNumber();
document.getElementById("cardNumberField").value = strTemp;
strTemp = getBEIDApplet().getChipNumber();
document.getElementById("chipNumberField").value = strTemp;
strTemp = getBEIDApplet().getValidityDateBegin();
document.getElementById('valBeginField').value = strTemp;
strTemp = getBEIDApplet().getValidityDateEnd();
document.getElementById('valEndField').value = strTemp;
strTemp = getBEIDApplet().getIssMunicipality();
document.getElementById('issMunicField').value = strTemp;
strTemp = getBEIDApplet().getNationalNumber();
document.getElementById('natNumberField').value = strTemp;
strTemp = getBEIDApplet().getSurname();
document.getElementById('nameField').value = strTemp;
strTemp = getBEIDApplet().getFirstName();
strTemp2= getBEIDApplet().getInitials();
if (strTemp2!="")
{
strTemp = strTemp + " ";
strTemp = strTemp + strTemp2;
}
document.getElementById('firstNamesField').value = strTemp;
strTemp = getBEIDApplet().getNationality();
document.getElementById('natField').value = strTemp;
strTemp = getBEIDApplet().getBirthLocation();
document.getElementById('birthLocField').value = strTemp;
strTemp = getBEIDApplet().getBirthDate();
document.getElementById('birthDateField').value = strTemp;
strTemp = getBEIDApplet().getSex();
document.getElementById('sexField').value = strTemp;
strTemp = getBEIDApplet().getNobleCondition();
document.getElementById('titleField').value = strTemp;
getBEIDApplet().getWhiteCane();
getBEIDApplet().getYellowCane();
getBEIDApplet().getExtendedMinority();
}
//--------------------------------------------
// Récupération de l'adresse
//--------------------------------------------
function getAddressData()
{
var strTemp;
var strTemp2;
var strTemp3;
strTemp = getBEIDApplet().getStreet();
strTemp2 = getBEIDApplet().getStreetNumber();
strTemp3 = getBEIDApplet().getBoxNumber();
document.getElementById('streetField').value = strTemp + " " + strTemp2 + " " + strTemp3;
strTemp = getBEIDApplet().getZip();
strTemp2 = getBEIDApplet().getMunicipality();
document.getElementById('municField').value = strTemp + " " + strTemp2;
strTemp = getBEIDApplet().getCountry();
document.getElementById('countryField').value = strTemp;
strTemp = getBEIDApplet().getSpecialStatus();
document.getElementById('specialStatusField').value = strTemp;
}
//--------------------------------------------
// Récupération de la photo
//--------------------------------------------
function getImg()
{
return getBEIDApplet().GetPicture();
}
//--------------------------------------------
// Vidage des différents champs
//--------------------------------------------
function emptyScreen()
{
var strTemp = "";
document.getElementById('cardNumberField').value = strTemp;
document.getElementById('chipNumberField').value = strTemp;
document.getElementById('valBeginField').value = strTemp;
document.getElementById('valEndField').value = strTemp;
document.getElementById('issMunicField').value = strTemp;
document.getElementById('natNumberField').value = strTemp;
document.getElementById('nameField').value = strTemp;
document.getElementById('firstNamesField').value = strTemp;
document.getElementById('natField').value = strTemp;
document.getElementById('birthLocField').value = strTemp;
document.getElementById('birthDateField').value = strTemp;
document.getElementById('sexField').value = strTemp;
document.getElementById('streetField').value = strTemp;
document.getElementById('municField').value = strTemp;
document.getElementById('countryField').value = strTemp;
document.getElementById('StatusField').value = strTemp;
}
//--------------------------------------------
// Ajoute les noms des différent lecteur de carte à la liste
//--------------------------------------------
function AddCardReaderName( readerName )
{
var newOption = document.createElement("OPTION");
newOption.text = readerName;
newOption.value = readerName;
document.getElementById("ID_CardReadersCombo").options.add(newOption);
}
//--------------------------------------------
// clear the card reader dropdown list
//--------------------------------------------
function clearCardReaderList()
{
for (var i = document.getElementById("ID_CardReadersCombo").options.length-1; i >= 0; i--)
{
document.getElementById("ID_CardReadersCombo").remove(i);
}
}
//--------------------------------------------
// clear the card reader dropdown list
//--------------------------------------------
function getSelectedReader()
{
var nrReaders = document.getElementById("ID_CardReadersCombo").options.length;
for (var i = 0; i<nrReaders; i++)
{
if (document.getElementById("ID_CardReadersCombo").options[i].selected)
{
return i;
}
}
return -1;
}
//--------------------------------------------
// Add all the card reader names to the dropdown list
//--------------------------------------------
function getCardReaders()
{
clearCardReaderList();
var nrReaders = getBEIDApplet().readerCount();
if (nrReaders==0)
{
alert("No card readers found");
}
for( var idx=0; idx<nrReaders; idx++)
{
var readerName = getBEIDApplet().getReaderByNum(idx);
AddCardReaderName(readerName);
}
}
//--------------------------------------------
// Read the card from the selected card reader
//--------------------------------------------
function readCard()
{
if (document.getElementById("ID_CardReadersCombo").options.length==0)
{
return;
}
var selectedReaderIdx = getSelectedReader();
if (selectedReaderIdx==-1)
{
alert("Please select a card reader");
return;
}
emptyScreen();
//--------------------------------------------
// get the name of the reader and initialize with this reader
//--------------------------------------------
var readerName = document.getElementById("ID_CardReadersCombo").options[selectedReaderIdx].text;
getBEIDApplet().InitLib(readerName);
if (!getBEIDApplet().isCardPresent(readerName))
{
getBEIDApplet().exitLib();
return;
}
document.getElementById('StatusField').innerHTML = "Lecture de l'identité, patientez ...";
getIDData();
document.getElementById('StatusField').innerHTML = "Lecture de l'adresse, patientez ...";
getAddressData();
document.getElementById('StatusField').innerHTML = "Chargement de la photo, patientez ....";
getImg();
document.getElementById('StatusField').innerHTML = "Terminer";
}
function refresh()
{
getBEIDApplet().InitLib(null);
getCardReaders();
}
function bodyLoaded()
{
if(getBEIDApplet()==null)
{
setTimeout("bodyLoaded()", 100);
}
else
{
refresh();
}
}
</script>
<style type="text/css">
.fontName {font-family:Arial Unicode MS, Verdana, Arial, Helvetica, sans-serif;}
.backgroundPanel {background-color:#F7F7F7;}
.backgroundRoundedPanel {background-color:#CED3DE;}
.labelText {font-size:12px; color:#4A5563; }
.dataText {font-size:12px; color:#000000;font:bold}
.tableDarkShadow {background-color:#87CFA3;}
</style>
</head>
<body on-Load = "javascript:bodyLoaded()">
<form name=actionform>
<table class="fontName" style="width:100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2">
<table class="fontName" style="width:100%" border="0" cellspacing="0" cellpadding="0">
<tr class="tableDarkShadow">
<td class="labelText" valign="top" align="center">LECTURE DES DONNEES DE LA CARTE eID</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td valign="middle" style="width:160">
<!-- -->
<script type="text/j-avascript" language="javascript">
//----------------
// CHARGEMENT DES APPLET POUR LE FONCTIONNEMENT DU FORMULAIRE
// give the following variables:
// subdir: the subdirectory where the applet jar file resides
// jnlpPath: the path to the jnlp file
// ex: subdir="appletDir";
// jnlpPath=subdir;
//----------------
var subdir="";
var jnlpPath=subdir;
//----------------
// - get the href of this page
// - strip off the name of this page
//----------------
var myloc = window.location.href;
var locarray = myloc.split("/");
delete locarray[(locarray.length-1)];
var url = locarray.join("/");
document.writeln('<applet code="org.jdesktop.applet.util.JNLPAppletLauncher"');
document.writeln('codebase = "' + url + subdir + '"');
document.writeln('width ="140"');
document.writeln('height ="200"');
document.writeln('name = "BEIDAppletLauncher"');
document.writeln('id = "BEIDAppletLauncher"');
document.writeln('archive="applet-launcher.jar,beid35libJava.jar,BEID_Applet.jar">');
document.writeln('<param name="codebase_lookup" value="false">');
document.writeln('<param name="subapplet.classname" value="be.belgium.beid.BEID_Applet">');
document.writeln('<param name="progressbar" value="true">');
document.writeln('<param name="jnlpNumExtensions" value="1">');
document.writeln('<param name="jnlpExtension1" value= "' + url + jnlpPath + '/beid.jnlp">');
document.writeln('<param name="jnlp_href" value="' + url + jnlpPath + '/beid.jnlp">');
document.writeln('<param name="debug" value="false"/>');
document.writeln('<param name="Reader" value=""/>');
document.writeln('<param name="OCSP" value="-1"/>');
document.writeln('<param name="CRL" value="-1"/>');
document.writeln('</applet>');
</script>
</td>
<td valign="top">
<table class="fontName" style="width:100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table class="fontName" style="width:100%" border="0" cellspacing="0" cellpadding="0">
<tr class="tableDarkShadow">
<td class="labelText" valign="top" align="center">INFORMATION PERSONNEL</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top">
<table style="width:100%" border="0" cellspacing="0" cellpadding="0">
<tr class="backgroundPanel">
<td class="labelText" align="right" style="width:150">Nom : </td>
<td> <input type="text" class="dataText" align="left" id="nameField" ></td>
</tr>
<tr class="backgroundRoundedPanel">
<td class="labelText" align="right" style="width:150">Prénom :</td>
<td> <input type="text" class="dataText" align="left" id="firstNamesField" ></td>
</tr>
<tr class="backgroundPanel">
<td class="labelText" align="right" style="width:150">Nationalité :</td>
<td> <input type="text" class="dataText" align="left" id="natField"></td>
</tr>
<tr class="backgroundRoundedPanel">
<td class="labelText" align="right" style="width:150">Localité :</td>
<td> <input type="text" class="dataText" align="left" id="birthLocField"></td>
</tr>
<tr class="backgroundPanel">
<td class="labelText" align="right" style="width:150">Date de naissance :</td>
<td > <input type="text" class="dataText" align="left" id="birthDateField"></td>
</tr>
<tr class="backgroundRoundedPanel">
<td class="labelText" align="right" style="width:150" nowrap="nowrap">Sex :</td>
<td > <input type="text" class="dataText" align="left" id="sexField" nowrap="nowrap"></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr class="tableDarkShadow">
<td colspan="2" class="labelText" valign="top" align="center">ADRESSE</td>
</tr>
<tr class="backgroundPanel">
<td class="labelText" align="right" style="width:150" nowrap="nowrap">Adresse : </td>
<td > <input type="text" class="dataText" align="left" id="streetField"></td>
</tr>
<tr class="backgroundRoundedPanel">
<td class="labelText" align="right" style="width:150" nowrap="nowrap">Code postal : </td>
<td> <input type="text" class="dataText" align="left" id="municField"></td>
</tr>
<tr class="backgroundPanel">
<td class="labelText" align="right" style="width:150" nowrap="nowrap">Pays : </td>
<td> <input type="text" class="dataText" align="left" id="countryField"></td>
</tr>
<tr class="backgroundRoundedPanel">
<td colspan="2"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2">
<table class="fontName" style="width:100%" border="0" cellspacing="0" cellpadding="0">
<tr class="tableDarkShadow">
<td class="labelText" valign="top" align="center">INFORMATION SUPPLEMENTAIRE</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" colspan="2">
<table style="width:100%" border="0" cellspacing="0" cellpadding="0">
<tr class="backgroundPanel">
<td class="labelText" align="right" style="width:150">N° registre nationnal : </td>
<td> <input type="text" class="dataText" align="left" id="natNumberField"></td>
</tr>
<tr class="backgroundRoundedPanel">
<td class="labelText" align="right" style="width:150"> Title: </td>
<td> <input type="text" class="dataText" align="left" id="titleField"></td>
</tr>
<tr class="backgroundPanel">
<td class="labelText" align="right" style="width:150">Status spécial : </td>
<td> <input type="text" class="dataText" align="left" id="specialStatusField"></td>
</tr>
<tr class="backgroundRoundedPanel">
<td colspan="2"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2">
<table class="fontName" style="width:100%" border="0" cellspacing="0" cellpadding="0">
<tr class="tableDarkShadow">
<td class="labelText" valign="top" align="center">INFORMATION SUR LA CARTE</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" colspan="2">
<table style="width:100%" border="0" cellspacing="0" cellpadding="0">
<tr class="backgroundPanel">
<td class="labelText" align="right" style="width:150">Valide du : </td>
<td> <input type="text" class="dataText" align="left" id="valBeginField"></td>
</tr>
<tr class="backgroundRoundedPanel">
<td class="labelText" align="right" style="width:150">Valide jusqu'au : </td>
<td> <input type="text" class="dataText" align="left" id="valEndField"></td>
</tr>
<tr class="backgroundPanel">
<td class="labelText" align="right" style="width:150">Délivré par l'administration de : </td>
<td> <input type="text" class="dataText" align="left" id="issMunicField"></td>
</tr>
<tr class="backgroundRoundedPanel">
<td class="labelText" align="right" style="width:150">Numéro de carte : </td>
<td> <input type="text" class="dataText" align="left" id="cardNumberField"></td>
</tr>
<tr class="backgroundPanel">
<td class="labelText" align="right" style="width:150">Puce numéro : </td>
<td> <input type="text" class="dataText" align="left" id="chipNumberField" style="width:250"></td>
</tr>
<tr class="backgroundRoundedPanel">
<td colspan="2"></td>
</tr>
</table>
</td>
</tr>
<tr><td colspan="2"> </td></tr>
</table>
<input type="button" name="IDRefresh" on-click="javascript:refresh()" value="Mise à jour des lecteurs" title="Refresh"/> </td>
<br/>
<select id="ID_CardReadersCombo">
</select>
<input type="button" name="IDButton" on-click="javascript:readCard()" value="Lecture carte " title="Read Card"/>
<br/>
<p class="labelText" id="StatusField"></p>
</form>
<body>
</html>
Attention le code est grand, mais regarder bien il n’y a rien de compliqué à cela
Amusé vous bien