Technology Blog

Combine Meridian & ClearPass to improve user experience 3/3

by on ‎01-11-2017 01:00 AM - last edited on ‎01-11-2017 02:32 AM by Community Administrator

It is now time for the conclusion of this trilogy.

Previously in “CPPM / Meridian integration”:

And that’s exactly where I want to drive you: use ClearPass custom user attributes to display a specific page depending on who is connecting to the Meridian App. Here’s how to do it.

 

First of all, we need to know which kind of info we want to show, thus which custom attributes to use. In my setup, I’d like to:

  • First, create an agenda when I create a new guest user in ClearPass
  • Associate this agenda to my new guest
  • Display this agenda in the Meridian App when the guest is registered

Here is what we need:

  • A web server (agenda for my setup) which will host the guest/agenda creation page and also the agenda display in the Meridian App
  • A database (in my case MariaDB) to store agenda details and map agenda to guests
  • And of course … Meridian and ClearPass

For the database, I’ll use the following structure:

 

Meridian-CPPM-part3-1.png

<-- Please note:

As you can see I also have a table called Employee. This is because, in my setup, I also want to associate to a list of guests/agenda some corporate users (such as Sales Account Manager) so that these corporate users can also access the same agenda as the guest they are responsible for. The interesting part is that for these employees I don’t need to create a guest in ClearPass: I used AD authentication directly. And the funny part is that based on their email address, I added a Yammer API call to get their picture URL and display it on top of the Meridian App Web Page J

 

Now we have the structure let’s first manage the guest / agenda creation.

 

Guest / agenda creation

 

For this, we’ll use an Apache server and we’ll code using HTML, Python and JavaScript. We’ll also use Bootstrap library so that the page/fields / images etc resize automatically depending on the size of the Window / Device.

Don’t worry, I won’t copy/paste the entire code here, only main lines. But the entire project is accessible in GitHub here.

 

Let’s describe the flow:

  • First, we need to authenticate the users via ClearPass API (so that only local ClearPass users and Corporate AD users can manage accounts).
    Below is the main portion of the Python authentication script (called from HTML / JS files):

    authURI = "/api/oauth"
    headers = {'Content-Type':'application/json'}
    d={'grant_type':'password','username':str(username),'password':str(password),'client_id':clientID}url = CPPMBaseURL + authURI
    # Request to authenticate the guest manager and receive corresponding token (mandatory to create guest)
    data = requests.post(url,headers=headers,data=json.dumps(d)).json()
    if "access_token" in data:
            return data['access_token']
    return None
    So at the end, we get a token we can use later to create CPPM guests.
  • Then we create the agenda and agenda entries in the DB, based on the data we get from the HTML Form.
    Again, here are the most interesting parts:


    MySQLQuery = 'INSERT INTO Agenda (Title,Location,Date,Logo) VALUES (\"%s\",\"%s\",STR_TO_DATE(\"%s\",\"%s\"),\"%s\")' %(title,location,date,dateFormat,logo)   
    
    MySQLQuery = 'INSERT INTO AgendaEntry (AgendaID,StartTime,Content,Presenter,Day) VALUES (\"%s\",\"%s\",\"%s\",\"%s\",\"%s\")' % (agendaID,data['begin'],data['content'],data['pres'],data['day'])
  • After that, we create the guest users in ClearPass and in the DB (again using HTML Form Data); and we associate guest and agenda thanks to agenda ID field.

    Guest creation in ClearPass:
    headers={'Authorization':'Bearer ' + token ,'Content-Type':'application/json'}
    BaseURI ="/api/guest"
    # API request for guest creation
    apiResult = requests.post(url,headers=headers,data=json.dumps(data)).json()
    In the DB:
    MySQLQuery = 'INSERT INTO Guest (Name,Email,AgendaID,PictureURL,Company) VALUES (\"%s\",\"%s\",\"%d\",\"%s\",\"%s\") ON DUPLICATE KEY UPDATE Name=\"%s\", AgendaID=\"%d\", PictureURL=\"%s\", Company=\"%s\"' % (data['visitor_name'],data['email'],agendaID,data['visitor_picture'],data['visitor_company'],data['visitor_name'],agendaID,data['visitor_picture'],data['visitor_company'])
  • Finally, we create employee users in the DB, get picture URL via Yammer API and put this all together in the DB.

    Employee creation, with agenda info, in the DB:
    MySQLQuery = 'INSERT INTO Employee (Email,AgendaID) VALUES (\"%s\",\"%d\") ON DUPLICATE KEY UPDATE AgendaID=\"%d\"' % (employee,agendaID,agendaID)
    Get employee picture URL in Yammer info (update in DB code is similar as previous examples):
    YammerBaseURL="https://www.yammer.com"
    auth_token="<Your_Yammer_API_Token>"
    headers={'Authorization':'Bearer ' + auth_token}
    
    GetUserByEmailURI="/api/v1/users/by_email.json?email="
    result = ""
    url = YammerBaseURL + GetUserByEmailURI + email
    userInfojson = requests.get(url,headers=headers).json()
    
    userPictureTemp = userInfojson[0]['mugshot_url_template']

And here is the result (I know, I’m not a Web designer, so I tried to keep it as simple as possible …):

 

Authentication

Meridian-CPPM-part3-2.png

 

Guests / Agenda form

Meridian-CPPM-part3-3.png

 

Email Receipt

Meridian-CPPM-part3-4.png

 

Agenda & Agenda Entries in DB

Meridian-CPPM-part3-5.png

Meridian-CPPM-part3-6.png

 

Employee entries in DB

Meridian-CPPM-part3-7.png

 

Guest Entries in DB

Meridian-CPPM-part3-8.png

 

And in ClearPass

Meridian-CPPM-part3-9.png

 

Meridian Setup

 

On the Meridian side, all we need to do is to add a new Web Page which will point to the agenda page display off our Web Server.

IMPORTANT: This page must be a “Hosted” Web Page, otherwise the token won’t be sent in the header when accessing it from the app.

We also checked the “Requires Login” option in order to be sure the user is authenticated and so have a token.

 

Meridian-CPPM-part3-10.png

 

Agenda Display Web Page

 

Now we need to create the web page we want to display when a Meridian user opens the agenda in the App.

To summarise, in this page we:

  • Get the token sent in the header of the page from the Meridian App
  • Based on this token, we get User additional parameters via ClearPass API (for more information on these additional parameters, see the second episode of this blog trilogy
  • Build the web page based on these additional parameters and DataBase entries

Again if you want to see the entire code, please have a look on Github here.

Here are the main steps:

  • Get the token:
    import os
    token =re.sub('Bearer ','',os.environ['HTTP_AUTHORIZATION'])
  • Get ClearPass additional parameters:
    meURI = "/api/oauth/me"
    headers={'Authorization':'Bearer ' + token ,'Content-Type':'application/json'}
    
    url = CPPMBaseURL + meURI
    # API URI call to get ClearPass user specific attribute based on the token parameter
    data = requests.post(url,headers=headers).json()
  • Build the web page based on ClearPass additional parameters and DataBase entries:
    # Print the name of the user based on parameter got from CPPM
    print("""
    	<div class="page-header text-center">
    		<div class="row">
    			<div class="col-xs-8 col-sm-8 col-md-11 col-lg-11">
    				<BR><h3>Agenda for %s</h3>
    	""" %(data['name']))
    	
    dateFormat = '%m/%d/%Y'
    # SQL query to retrieve Agenda main info (based on User CPPM parameter : Agenda)
    agendaSQLQuery = 'select Title,Location,Logo,DATE_FORMAT(Date,\'%s\') from Agenda where ID = %s' %(dateFormat,data['agenda'])
    
    SQLResult = get_db_query(agendaSQLQuery)
    
    size = '100'
    	
    # Displaying this in the html page
    for (Title,Location,Logo,Date) in SQLResult:
    	if data['image']:
    		print("""
    			<h4>%s, Date: %s</h4>
    			</div>
    			<div class="col-xs-4 col-sm-4 col-md-1 col-lg-1">
    				<BR>
    				<img class="img-responsive" src="%s" alt="%s">
    			</div>
    			</div>
    			</div>""" %(Title,Date,data['image'],data['badge']))
    … (full code on Github)

Conclusion

Finally, at the end of this series, the flow can be summarised as the following graph:

Meridian-CPPM-part3-11.png

 

And the result, from a user experience point of view, is:

Meridian-CPPM-part3-12.png

So we finally make it: we have a complete Meridian – ClearPass integration! Just to remind you, here is what we have:

  • Authentication in Meridian App through ClearPass (Blog 1)
  • Additional custom parameters in ClearPass we can use in the Meridian App (Blog 2)
  • Custom web page in Meridian App which uses these additional parameters to deliver custom content (This Blog)

I hope you enjoy this entire trip and feel free to post some comments (with remarks or questions). You can now safely release your seat belt, we’ve reached our destination.

Search Airheads
Showing results for 
Search instead for 
Did you mean: 
Announcements
Read all about it! If it’s happening now, it’s in the community.

Check out the latest blogs from your community team, the community experts and other industry sources.
Labels