From MozillaWiki
Jump to: navigation, search

Onboarding the non-technical OBI implementer

Start using the Open Badges Infrastructure (OBI) today. This step-by-step guide has been built to get you using badges as quickly and easily as you can while keeping the technology know-how to a minimum. This guide has been built for people to move through step-by-step in order. You may feel you can move quickly through a step, it is suggested you do not skip any steps.

Step 0: Do a whole lot of reading

  1. A laundry list of sites and specific pages to start your journey towards understanding badges
  2. This blog post details what I've learned so far with open badges. It also serves as a good list of resources.
  3. The p2pu challenge titled open badges 101 is a great way to jump into the community.

related screencasts

Step 1: Go out and claim yourself a badge

Go get your first badge. This is important for the claiming of your first badge exposes you to an issuer and your backpack and initiates the setup of the accounts required to be a badge holder.

An easy first step

There are a lot of sites where you could claim or earn a badge, all of these give a different perspective of how badges can be used... it is good to understand badges from many views and this list is just a beginning.

Once you've earned and claimed a few badges, think deeply of the three main infrastructures of; issuer, earner and displayer. Think about the role of these three and where the backpack would fit within these three.

Note: not all badge issuing platforms work with the open badges. This is part of the open badges initiative, to create a standard approach and messaging protocol for the issuing and display of badges.

related screencasts

Step 2: Technical Prerequisites

You can't avoid it, you are going to have to start thinking about technology. If you venturing into the open badges realm at this early stage you need to get to know some of the underlying technology. Then of course you could wait until the technology and related services are more mature. To be successful with implementing open badges you are going to need a very basic understanding of JavaScript, an idea of the web technology stack and the basics of server infrastructure. You don't require a deep understanding, but a basic understanding of these three areas will help greatly in supporting your learning.

A beginner understanding of JavaScript

To issue a badge a basic understanding of JavaScript is required. A reference needs to be set to the Mozilla JavaScript that "pushes" the badges JSON file toward the earners backpack.

Basic structure of JavaScript

To get started with issuing a badge from a web page it is strongly recommended that you brush up on your JavaScript knowledge. There are good number of online tutorials and books you can access, a simple Google search on "JavaScript Beginner" can provide a good list of resources.

Inserting a JavaScript include

One of your focuses as you learn JavaScript is going to be how to make a reference to an existing JavaScript library. Your going to require enough learning to understand this line of code and how it sets a reference to the library you require.

<script src=""></script>

Calling a JavaScript module

Combined with setting a reference to the correct JavaScript library you will also have to know how to make a call to a function within the library. Review these lines of code to provide a sample of what you will need to know. Don't worry, I will be diving a little deeper in how these JavaScript calls work. These should provide you enough to focus this first round of learning.

Joseph Badjernor
<a href="javascript:OpenBadges.issue([''], 
function(errors, successes){  });">, claim your badge.</a></p>

Or some other server side programming language or application

Making use of the javascript libraries from within a web page is the manual approach to issuing badges. If you are going to want to issue badges from within a learning management system (LMS), another software application or custom developed software you are going to have to develop an understanding of that particular environment.

related screencasts

The technology stack

Each of the three roles of issuer, earner and displayer have different technology requirements. It is expected that most people reading this will fall within the issuer role, but others will do well by continuing to read this wiki page.

For the issuer:


A web server with;

  1. a stable URL that will remain consistent until all the badges issued have expired and are no longer displayed
  2. the ability to host a web site, web pages, javascript and related services
  3. the ability to serve up JSON files (this can occur in two ways; 3.1. being the preferred approach)
    1. web programming language and a database and required software to generate the JSON message to issue a badge for each earner who has completed the criteria and provided the appropriate evidence.
    2. hand edited JSON files for each earner who has completed the criteria and provided the appropriate evidence.

For the earner:

  1. A blog, website or online portfolio to display your evidence.
  2. A blog with the correct widgets or ability to embed javascript to display badges. This blog isn't so much a place to display the badges but to write and reflect about your learnings.
  3. Personal accounts with one or more social media sites that allow the display of badges
  4. Ability to access and manage your badge backpack

For the displayer:

  1. The ability to serve up widgets or javascript
  2. Access the earners backpack via the Displayer API.
  3. Web hosting, programming language and database to store desired earner badges information

related screencasts

Server Infrastructure

Each role requires resources on the internet, these vary greatly due to the work that is required. The diagram below shows the three roles and their interactions. The issuer on the left requires the most server infrastructure. The earner backpack requires infrastructure resources which will increase if you are planning on hosting a backpack (this is currently not recommended due to the lack of backpack federation features). It is currently recommended that you use the openbadges backpack hosted at The displayer role requires the least amount of resources as displaying badges requires the least amount of softwar features. This can increase if the displayer provides additional badge display features.

Open Badges -- Tech-diagram-v3 updated.png

for the issuer:

The issuer requires the most server infrastructure, for it needs to host the badge and earners information. The servers also need the computing resources to issue (push) the badges to the Issuer API and compute and store any local badge management and tracking information. The issuer may also require the ability to inter-operate with other organizational server infrastructure (like a learning management system, event registration, etc).

To get a sense of the resource requirements for the issuer a review of the issuer json and its two main stores of information required to issue a badge are; the earner (or recipient) and the badge.

  1. earner (recipient) information
    1. evidence information
  2. badge information
    1. png file(s)
    2. criteria information
    3. issuer information

for the earner:

The earner requires the least amount of server infrastructure to support their activities. The earner could successfully earn badges with no server infrastructure of their own. The earner will require web locations to be able to host their evidence; this hosting could be in blogs, wikis, personal web spaces or existing educational infrastructure. If the earner does have their own server infrastructure or web space this could be used to host their evidence.

for the displayer:

From a server infrastructure perspective the displayer will need to have the ability to host HTML, JavaScript or an application widget that can make calls to the displayer API. This can be as simple as a hosted web page or a blog that can have the HTML of JavaScript embedded. If the displayer is providing the more robust features of a widget they will require the features for hosting the widget, making the displayer API calls, and any other programming or database infrastructure to support their widgets features.

related screencasts

Step 3: Creating your issuer site

This step is going to be the first that requires some actual coding and system admin type tasks. During this step-by-step guide we are mostly covering what you need to know to issue a badge manually. More automated approaches that include integrating with existing LMS (Moodle) or application frameworks (Drupal, Wordpress, Django, Etc.) will come in a subsequent step-by-step guide.

Basic Requirements

The resources here are going to keep things as simple as possible. As with many things technical they can quickly become much larger topics as technologies are built upon each other and discussing lower levels can easily become a part of the discussion. For the time being we are going to stay at the higher levels and loop around to dive deeper as the Open Badges project gets to its 1.0 release sometime in early 2013.

1. Stability in the URL

Having a stable URL is going to be important for being an issuer. The meta-data within the badge (or json file) needs to refer back to an internet domain name. This is so the badge can be validated and the data within the origin, criteria, and evidence can be viewed and referenced through time.

2. Basic web site with the ability to support the json content type

For manual issue of a badge your web server is going to have to support the application/json content-type. Ihis is done by some administrative tasks with your servers configuration. A Google search of your server name (Apache, IIS, etc.) and the keyword content-type should provide the information regarding your server recognizing this content-type.

   # Save your manual badge issuing as .json files and add this to your httpd.conf
   AddType   application/json   json

Note: setting the content-type can also be done in code. This is currently beyond the scope of this step-by-step guide. To review this 'in code' approach feel free to read the github page discussing assetions;

3. Ability to hash the earners email with the salt

There is currently two approaches to manually issuing a badge to the OBI backpack. These have been referenced in a number of blog posts mentioned above and in step 0 of this step-by-step guide.

  • One method is to make an http request with the correctly formatted json file as a part of the URL (provide example).
  • the second method is to submit the json file using a javascript call (remember you will need to include the correct javascript library).
<a href="javascript:OpenBadges.issue([''], function(errors, successes)
 {  });">claim your badge.</a>

One of the issues with the plain text nature of json files and massages is that private information can be exposed. One of the features of the OBI is its ability to recognize hashed text to confirm the earner without having to expose their email address in the json file. The following php code snippet hashes the earners email with a salt value using sha256 encryption and echo's (displays) the hashed value to the screen. This is a one way hash, so you can't "unhash" it. To confirm this value you would need the email address of the earner and the salt value and then hash it yourself with sha256. Once the value is hashed you should have no reason to "unhash" the value, the OBI will be able to do this as it is accepting the badge into the earners backpack.

    echo hash("sha256", ""."mwach01");

Step 4: Issuing a badge

Files and Folders

the JSON file


Step 5: Earning a badge

the Backpack

Step 6: Managing your badges

Step 7: Being a badge displayer

Step 8: Displaying your badges