Récupération des données eID dans des champs texte
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/javascript" 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/javascript" 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 onLoad = "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/javascript" 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" onclick="javascript:refresh()" value="Mise à jour des lecteurs" title="Refresh"/> </td>
<br/>
<select id="ID_CardReadersCombo">
</select>
<input type="button" name="IDButton" onclick="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
Je vous recommande aussi la lecture des sujets suivants :
- Qualité d’une base de données L'un des objectifs de création d'une base de données est...
Mots-clefs :belgium, carte d'identité, developer guide, eId, Formulaire
Ton projet me parais intéressent, mais un peux vague pour y répondre ici.
En java je ne pense pas que tu vas trouver une solution dite facile pour la récupération des certificats.
Je pense que cela ne sera pas juste un problème de java, mais qu’il faut aussi étudier le protocole utilisé pour le certificat.
Pour ma part je n’ai jamais eu à utiliser le cryptage par l’EID, peux être utilisé d’autre clef au niveau SSL, mais encore une fois je ne sais pas comme ton programme fonctionne, la structure, la technologie utiliser hormis java.
Maintenant cette personne utiliser l’authentification et le cryptage pour un chat, peux être trouvera tu de l’aide ici : http://www.cetic.be/IMG/pdf/rapport-jerome-jonckers-eid.pdf
Je continue à voir pour me renseigner, car cela est intéressent, mais si tu trouves avant moi je suis preneur de l’info
Quand j’ai l’info, je te contacte
L'utilite est de cryte une communication entre l'utilisateur et une application.
Pour ce faire il me faut recuper le certificat de l'utilisteur
le RRN tu veux juste le numéro de registre national ?
Quelle utilité de récupérer le certificat de l’utilisateur ?
Via un Windows cela ne pose pas de problème, mais via une interface web cela devient plus complexe et d’après ce que j’en sais il faut utiliser un protocole bien spécifique, mais je n’ai jamais eu à tester cela
je vais me renseigner pour voir
J'ai besoin de faire une page web ou un utilisateur va se connecte.
Et moi je dois recuperer son certificat CA et rrn.
en windows c'est tres simple. en java heu je sais pas comment faire
Bonjour,
Que voulez-vous faire exactement ?
Pouvez-vous m’en dire un peu plus ?
Bonjour, y a t'il un moyen simple de lire et sauver le certificat CA et les autres ?