Looking for a specific tag

Question

I had a previous question regarding a way to access a proxy card from within a web page when using Chrome. I'm now attempting to instead use a vb.Net application with an embedded CefSharp object. I have the code I need to access the proxy card (thanks to Smart Card API), but I need an easy way to indicate that this is even an option. My thought is to:

1. Put an otherwise empty element on the web page (such as <div id='smartcard' />)
2. Inside Visual Basic, monitor the contents of the page for this <div />
   1. If the <div /> is found, make sure the card reader is detected. If so, add some text (and maybe an image) to its contents indicating the the card can be scanned
   2. Once a card scan is detected, put the value from the card into a form element and POST it

It seems likely to me that I'm going to have to use some combination of JavaScript and vb.net code, but I'm so new to CefSharp that I really have no idea where to start.

Thanks in advance for all your help.

Answer 1

Not being a C# programmer, I looked at the information on the General Usage guide many times and still didn't really understand it. That said, I think I've been able to get this project off the ground. In addition to the CefSharp project, I'm also using the non-free Smart Card API from CardWerk.

Below is some snippets of what I did.

VB.Net

Imports CefSharp
Imports Subsembly  ' For the SmartCard namespace

Class MainWindow
    Private WithEvents CardManager As SmartCard.CardTerminalManager

    Private Sub MainWindow_Initialized(sender As Object, e As EventArgs) Handles Me.Initialized

        browser.Address = "https://jake-dev7.local/trainingmatrix/"

        Debug.Print(SmartCard.SMARTCARDAPI.API_VERSION)
        CardManager = SmartCard.CardTerminalManager.Singleton
        CardManager.Startup(True)
    End Sub

    Private Sub browser_LoadingStateChanged(sender As Object, e As LoadingStateChangedEventArgs) Handles browser.LoadingStateChanged
        Dim script As String

        If Not e.IsLoading Then
            If CardManager.SlotCount Then
                script = "if ($('#proxcard').length) { proxcard_init() }"
                browser.GetMainFrame().ExecuteJavaScriptAsync(script)
            End If
        End If
    End Sub

    Protected Sub InsertedEvent(ByVal aSender As Object, ByVal aEventArgs As SmartCard.CardTerminalEventArgs) Handles CardManager.CardInsertedEvent
        Dim aCard As SmartCard.CardHandle
        Dim nActivationResult As SmartCard.CardActivationResult
        Dim iFacilityCode As Integer
        Dim iCardID As Integer

        ' There's a bunch of code here taken from the sample code that came 
        ' with the SmartCard API from CardWerk to pull the facility code and
        ' card id out of the prox card.

        If iFacilityCode <> 0 And iCardID <> 0 Then
            Dim script As String

            script = "if ($('#proxcard').length) { proxcard_scan(" & iFacilityCode & ", " & iCardID & ") }"
            browser.GetMainFrame().ExecuteJavaScriptAsync(script)

        End If
    End Sub
End Class

JavaScript

(This is in a .js file that is loaded by the web page. This page can also be loaded in Chrome, Firefox, IE, etc and these functions will never be run which keeps this utility usable for computers that don't have the custom .exe and card reader).

// These proxcard_* functions are called via our parent application
// (CefSharp object embeded in a vb.Net assembly)
function proxcard_init() {
    $('#proxcard').html("<div class='or'>- OR -</div><div><img src='proxcard.jpg'><br>Scan your card</div>");
}

function proxcard_scan(facilityID, cardID) {
    var vars = {
       facilityID: facilityID,
       cardID: cardID
    };
    if ($('form#adduser').length) {
        // We're on the add user page. Check to see if this card matches somebody.
        $.post('httprequest.php?type=get-emp-from-prox', vars, function(data) {
            if (data && data.number) {
                // Update UI and backend form fields. If everything validates, submit the form
            } else {
                // Clear UI and backend form fields that pertain to user ID
                alert('Card not found');
            }
        }, 'json');
    } else if ($('form#update').length) {
        // Deal with the update form
    }
}

In my actual code, I have multiple else if statements for dealing with different forms where I allow a card to be scanned. They are not included to keep this from getting out of hand :).

Please Note: This is not intended to be the entire project or all the code needed to process prox cards using CefSharp. My hope is that it will be enough to help somebody else.