Log into Access Manager using a web camera.

4 Likes
over 1 year ago

TL;DR: after detailed explanations.

 

ISSUE:

Teachers complain it takes too long for K-2 students to log into Access Manager. The kindergartners are still learning their alphabet.

SOLUTION:

Create a custom login page for Access Manager that uses a web camera and QR codes to authenticate a student.

ASSUMPTIONS:

  • A working Access Manager environment, including the students that want to login using a badge.

  • Knowledge to copy and edit files on a Linux system.

  • This solution was created and tested using Access Manager Appliance 4.4 on SLES 11 Patch level 4.

  • Security policies allow for this high risk method for accessing protected services.

  • This example uses a badge with a QR code that uses JSON.

  • The QR code must have the keys “permId” and “passWord” with the correct values for the user.

  • Security policies allow use of third party open source software on the Access Manager server.

  • Basic steps were followed from the Access Manager Documentation, see the Configuring Access Manager section, specifically Customizing Identity Server.

HOW TO:

This solution is using two open source software java scripts from GitHub. https://github.com/mebjas/html5-qrcode download the scripts.

  1. Copy jsqrcode-combined.js and html5-qrcode.js to the /opt/novell/nids/lib/webapp/javascript directory on your server(s).

  2. Set ownership and rights to match the other files.

    1. # chmod -x /opt/novell/nids/lib/webapp/javascript/jsqrcode-qrcode.js

    2. # chmod -x /opt/novell/nids/lib/webapp/javascript/html5-qrcode.js

    3. # chown novlwww:novlwww /opt/novell/nids/lib/webapp/javascript/jsqrcode-qrcode.js

    4. # chown novlwww:novlwww /opt/novell/nids/lib/webapp/javascript/html5-qrcode.js

Copy the file login_latest.jsp

  • # cp /opt/novell/nids/lib/webapp/jsp/login_latest.jsp /opt/novell/nids/lib/webapp/jsp/camera.jsp

Edit the new camera.jsp file

  1. Add lines at the beginning of the file to load the two java script files copied to the server.

    1. <script src="<%=request.getContextPath()%>/javascript/jsqrcode-combined.js"></script>

    2. <script src="<%=request.getContextPath()%>/javascript/html5-qrcode.js"></script>

  2. Find the “$(document).ready(function(){ line in the file and add this to the script before the “onLoadFocus();” section.

 

 

 

$('#qr').html5_qrcode(function(data){ // do something when code is read var scaned = JSON.parse(data) $("input")[1].value = scaned.permId; $("input")[2].value = scaned.passWord; $("form").submit(); }, function(error){ //show read errors if (document.getElementById("camera-display").style.display=="none") { document.getElementById("camera-display").style.display = "block"; } $(".feedback").html('<style="height: 20px"> ' error); }, function(videoError){ //the video stream could be opened $(".feedback").html('<style="height: 20px"> Video error'); } );

 

 

 

  • In the form section of the html add two <div> tags and add the camera-display. 
    1. Add before the row that starts “<div id="namepassword" class="content login-page" style="margin: 25px; display: block;">

      1. <div class="row">

      2. <div class="column" style="float: left; width: 480px">

    2. Add the new <div> code and closing two </div> tags before the table line “<table border=0 style="margin-top: 1em" width="100%" cellspacing="0" cellpadding="0">

 

 

 

</div> <div id="camera-display" class="column" style="float: left; width: 610px; display: none"> <div id="qr" style="display: inline-block; width: 600px; height: 450px; border: 1px solid silver"></div> <span class="feedback" style="margin: 10px; display: inline-block"></span> </div> </div>

 

 

 

  • The instructions from Customizing the Default Login Page... were then followed. Each step is related to the instructions. Only the changes are shown below, read the published documentation for more detailed steps.

    1. Create a method with the appropriate query:

      1. Click Devices > Identity Servers > Edit > Local > Methods.

      2. Click New, then specify a Display Name: “Secure Camera – Form”

      3. In the drop-down menu for classes, select class: “Secure Name/Password – Form”

      4. Leave the Identifies User option enabled, and configure the user store option according to your needs.

      5. Skip this step.

      6. In the Properties section, click New, then specify the following values:

        Property Name: “JSP”

        Property Value: “camera”

      7. Click OK.

      8. Click Finish.
    2. Create a contract that uses this method:

      1. Click Contracts > New.

      2. Select the method you just created (Secure Camera – Form).

      3. Configure the other options to fit your requirements.

        Display name: “Secure Camera – Form”

        URI: “secure/camera/uri”

      4. Click OK.

        Update the Authentication Card

        See Configuring Authentication Contracts Step 6.

    3. Update Identity Server(s).

      /etc/init.d/novell-idp restart

     

  • Now browse to the Access Manager login page it should look exactly as before. Click the “hamburger” menu. Under LOCAL LOGINS you should see the option “Secure Camera – Form”

    Click the “Secure Camera – Form” if you have a web camera available you will be prompted to allow access. Use the camera to scan a QR code containing the required information. If a camera is not available the page will look the same as the “Secure Name/Password – Form.”

ADDITIONAL INFORMATION:

The java script line added to the file named camera.jsp “ $("input")[2].value = scaned.passWord;can use more complicated java script. We do NOT print a “passWord” value on our QR badges we use a simple combination of values to generate the students password, again these are K-2 students.

Our JSON might look like this:

 

 

 

 

{ “firstName”: “John”, “lastName”: “Smith”, “birthDay”: “01/01/2010”, “Teacher”: “Mr. Goodman” }

 

 

 

 

 Our password is a combination of these fields, like lastName and birthDay. In this example the generated password for the student in eDirectory is “Smith01012010”. The java script above then would read something like this: “$("input")[2].value = $(scaned.lastName) $(scaned.birthDate.replace( /\//g,"")).selector;

If a badge is found and scanned using a normal QR scanner there is no key named “passWord” because the “passWord” value is calculated at the time the badge is scanned.

TL;DR:

  1. Get the java script from here: https://github.com/mebjas/html5-qrcode

  2. Put the jsqrcode-qrcode.js and html5-qrcode.js in the /opt/novell/nids/lib/webapp/javascript/ directory.

  3. Set ownership and rights to the new java script files.

  4. Copy /opt/novell/nids/lib/webapp/jsp/login_latest.jsp to /opt/novell/nids/lib/webapp/jsp/camera.jsp.

  5. Edit the new camera.jsp file adding the lines from this diff:

 

 

 

14a15,17 > <script src="<%=request.getContextPath()%>/javascript/jsqrcode-combined.js"></script> > <script src="<%=request.getContextPath()%>/javascript/html5-qrcode.js"></script> > 158a162,179 > $('#qr').html5_qrcode(function(data){ > // do something when code is read > var scaned = JSON.parse(data) > $("input")[1].value = scaned.permId; > $("input")[2].value = "osd" $(scaned.birthDate.replace(/\//g,"")).selector; > $("form").submit(); > }, > function(error){ > //show read errors > if (document.getElementById("camera-display").style.display=="none") { > document.getElementById("camera-display").style.display = "block"; > } > $(".feedback").html('<style="height: 20px"> ' error); > }, function(videoError){ > //the video stream could be opened > $(".feedback").html('<style="height: 20px"> Video error'); > } > ); 215a237,238 > <div class="row"> > <div class="column" style="float: left; width: 480px"> 227a251,256 > </div> > <div id="camera-display" class="column" style="float: left; width: 610px; display: none"> > <div id="qr" style="display: inline-block; width: 600px; height: 450px; border: 1px solid silver"></div> > <span class="feedback" style="margin: 10px; display: inline-block"></span> > </div> > </div>

 

 

 

  •  Using iManager create a method:
    1. Display Name: “Secure Camera – Form”

    2. Select class: “Secure Name/Password – Form”

    3. Add the property name “JSP” with a value of “camera”

  • Using iManager create a contract:

    1. Display name: “Secure Camera – Form”

    2. URI: “secure/camera/uri”

    3. Add the method “Secure Camera – Form”

  • Restart the service. (/etc/init.d/novell-idp restart)

  • Teach the staff to use the new method.

  • Be a hero.

Labels:

Other
Comment List
Anonymous
Related Discussions
Recommended