← Back to overview
September 19, 2011 · Belgian eID Dynamics CRM 2011

Belgian eID and .NET - Part 3: Using the eID in Dynamics CRM 2011

Dynamics CRM 2011 allows you to manage all kinds of data (xRM) but when you start working with actual people it might come in handy to work with eID cards. Especially in healthcare, education, … where the end user has to work with a lot of people during the day. Instead of manually entering the data over and over again you could use the eID card to automate this process. That’s what we’ll build today!

Before we get started there are some prerequisites:

Note: This post will explain how to do this in a regular deployment. For IFD I’ll write a post in some time explaining how to do this with Windows Azure.


Sigh… Java. I never thought I’de mention this in one of my posts but yes… we’ll be using Java. On code.google.com you’ll find a project named eid-javascript-lib. This project allows you to use the eID Java Applet to make the connection between your websites using Javascript and the Belgian eID. And since Dynamics CRM 2011 relies heavily on Javascript this is the perfect match.

This is how the solution will look like:

In CRM 2011 you are able to add some web resources, but the system only allows a few types like HTML, CSS, JS, XML, PNG, … You might think, why not change the extension to one of these types… but this won’t work since the MIME type used to serve the Java applets will not be the right one (like application/x-java-jnlp-file for example, more on this later). That’s why we’ll need a seperate site to host the Java specific stuff.

Hosting the eid-javascript-lib and the applets

Before we can dive into Dynamics CRM 2011 we need to host the required Javascript and Java files. Remember that this is only suited for regular deployments, the guide to host this in an IFD will follow soon.

First we’ll create an IIS website that will contain all the data. If your CRM deployment is https be sure to also make the IIS website an https website. If you don’t do this, you’ll get some nasty popups saying only the secure parts of the page are displayed etc…

So I’ve created a website in IIS with HTTPS binding (https://localhost:100/). In this website I’ll be hosting 3 types of files: .js, .jar and *.jnlp. If you want these to work correctly you’ll need to check if the MIME Types have been configured in your IIS website. Go to your website and open the MIME Types option:

Be sure the following MIME Types exist:

Now the site is ready to host our files. I assume you installed the Belgian eID SDK (see prerequisites). If you did, you should have a directory like this: ‘C:\Documents and Settings\\My Documents\Belgium Identity Card SDK\beidlib\Java\bin‘. This directory should contain the following files:

Copy these files to the directory of your newly created website. Now go to the download page of the eid-javascript-lib (http://code.google.com/p/eid-javascript-lib/downloads/list) and download the following files (also in the website’s directory):

Modify both *.jnlp files, the codebase (2nd. line) should contain the address of the IIS website containing all these files. Here is an example of the beid.jnlp file:

<?xml version="1.0" encoding="utf-8"?>  
<jnlp codebase="https://localhost:100/" href="beid.jnlp">  
    <title>Java Binding to Belgium eID Middleware 3.5</title>
  <resources os="Windows">
      <nativelib href = "beid35JavaWrapper-win.jar" />
    <resources os="Linux">
      <nativelib href = "beid35JavaWrapper-linux.jar" />
    <resources os="Mac OS X">
      <nativelib href = "beid35JavaWrapper-mac.jar" />
  <component-desc />

Finally create a new file in your website called web.config containing the following (this will make sure the Java Applets are hosted correctly):

<?xml version="1.0" encoding="UTF-8"?>  
            <mimeMap fileExtension=".jnlp" mimeType="application/x-java-jnlp-file" />

This should be the end result:

Creating the Dynamics CRM 2011 solution

Now that we’ve done the heavy lifting it’s time to do some work in CRM 2011. I’ve started by adding a new button in the Ribbon of the contact page. Since this post is focused on the eID I will not explain how to modify the Ribbon. Take a look at http://msdn.microsoft.com/en-us/library/gg309639.aspx to get started with Ribbon modifications.

This is my button on the contact page:

Now the goal is that the user clicks the button and a dialog opens. In this dialog the user will be able to read the eID card and if required store the information in the current contact. First we’ll write the code for the dialog. The dialog is actually very simple. We’ll just write some HTML to display the form and some Javascript to interact with it:

    <title>eID: Read</title>
    <script type="text/javascript" src="https://localhost:100/be_belgium_eid.js"></script>
    <script language="javascript" type="text/javascript">
        // Initialize the reader.
        var cardReader = new be.belgium.eid.CardReader();

        // Bind error events.
        function noCardPresentHandler() { window.alert("No card present!"); }
        function noReaderDetectedHandler() { window.alert("No reader detected!"); }
        function appletNotFoundHandler() { window.alert("Applet not found!"); }
        function appletExceptionHandler(e) { window.alert("Error reading card!\r\nException: " + e + "\r\nPlease try again."); }

        // Read the card.
        function readCard() {
            document.getElementById("content").value = "Please wait ...";
            window.card = cardReader.read();
            if (window.card != null) {
                document.getElementById("content").value = window.card.toString();
            } else {
                document.getElementById("content").value = "No card returned.";

        // Save the card to contact.
        function saveCard() {
            var data = { firstName: card.getFirstName1().toString(),
                lastName: card.getSurname().toString(),
                street: card.getStreet().toString(),
                streetNumber: card.getStreetNumber().toString(),
                zipCode: card.getZipCode().toString(),
                country: card.getCountry().toString(),
                municipality: card.getMunicipality().toString()
<body style='background-color: rgb(233, 237, 241)'>  
    <td valign='top'>
        <applet code="org.jdesktop.applet.util.JNLPAppletLauncher" codebase="https://localhost:100"
                width="140" height="200" name="BEIDAppletLauncher" id="BEIDAppletLauncher" archive="applet-launcher.jar,beid35libJava.jar,BEID_Applet.jar">
            <param name="codebase_lookup" value="false">
            <param name="subapplet.classname" value="be.belgium.beid.BEID_Applet">
            <param name="progressbar" value="true">
            <param name="jnlpNumExtensions" value="1">
            <param name="jnlpExtension1" value= "https://localhost:100/beid.jnlp">
            <param name="debug" value="false"/>
            <param name="Reader" value=""/>
            <param name="OCSP" value="-1"/>
            <param name="CRL" value="-1"/>
            <param name="jnlp_href" value="https://localhost:100/beid_java_plugin.jnlp" />
    <td valign='top'>
        <textarea id='content' wrap='virtual' cols='80' rows='20'> </textarea>
        <input title="Read Card" onclick=javascript:readCard() value="Read Card" type=button> 
        <input title="Save" onclick=javascript:saveCard() value="Save" type=button> 

There isn’t actually that much to it:

That’s it for the dialog. I’ve saved the HTML page as a Web Resource and called it contacteid_page (write this down, you’ll need this later on).

Now we still need to write some code for the Ribbon button and for updating entity. I’ve created a new Web Resource holding this code.

// Open the card reader page.
function readCard() {  
  window.open ("https://crm2011.some.url//WebResources/new_contacteid_page", 'ReadEid', 'width=850, height=450'); 

// Update the contact based on the eID data.
function onUpdateContact(data)  
   Xrm.Page.getAttribute("address1_line1").setValue(data.street + ' ' + data.streetNumber);

Again this code is pretty straightforward:

Our Customizations In Action!

First I’ve opened my contact list:

Now I’ve opened the contact Cathan Cook and pressed the *Connect eID *button:

If all goes well you should see a security warning. Press Run to continue:

To read the card I press the Read button and this is the result:

To update the CRM contact press Save and you’ll see that the dialog will close and your contact will be updated:

That wasn’t so hard was it?

Troubleshooting Javascript

We’re working with 2 websites, Javascript, Java Applets, … and this can sometimes be a pain to troubleshoot. Here are some quick tips!

When saving the dialog to the entity you might bump into a Permission Denied error caused by the same origin policy (http://en.wikipedia.org/wiki/Sameoriginpolicy). To fix this issue, make sure the hostname of the dialog’s URL is the same as the hostname of the CRM server. In my example I had the following URLs:

Do you see the difference? One link has ‘api’ in the hostname and the other one doesn’t.

Troubleshooting the Java Applet

The following issue took me a while to troubleshoot… when pressing the Read Card button I suddenly got an Error reading card! error. And a few minutes before everything just worked!

After investigating a bit I stumbled upon the following:

<TD vAlign=top><APPLET id=BEIDAppletLauncher name=BEIDAppletLauncher archive=applet-launcher.jar,beid35libJava.jar,BEID_Applet.jar codeBase="https://localhost:100" code=org.jdesktop.applet.util.JNLPAppletLauncher width=140 height=200><PARAM NAME="_cx" VALUE="3704"><PARAM NAME="_cy" VALUE="5291"></APPLET> </TD>  
<TD vAlign=top><TEXTAREA id=content wrap=virtual cols=80 rows=20> </TEXTAREA> <BR><INPUT title="Read Card" onclick=javascript:readCard() value="Read Card" type=button> <INPUT title=Save onclick=javascript:saveCard() value=Save type=button> </TD></TR></TBODY></TABLE></BODY></HTML>  

It looked like the code of my HTML page (for the dialog) suddenly changed. Everything was wrapped on two lines and some parts were actually missing. The reason why this happened was because I modified the file using the Text Editor in the Web Resource page. Don’t use the Text Editor because it will change your page! Always modify the file locally and upload it using the browse button.


With a bit of magic you can now use the Belgian eID in Dynamics CRM 2011. Think about the possibilities here… this is great for all healthcare, education, … projects. Projects where you’ll want the users to sign in visitors, register people, …


  • LinkedIn
  • Tumblr
  • Reddit
  • Google+
  • Pinterest
  • Pocket
Comments powered by Disqus