Handleiding aanmaken badges Heinrich W. Klöpping, MSc CISSP CCSP CIPP/E SCI Versie A.6
Inhoudsopgave Aanleiding...3 Het algemene idee...3 De structuur op onze webserver...4 Aanmaken van een badge stappenplan...5 Stap 1 - het maken van de afbeelding...5 Stap 2 - het aanmaken van het bewijs bestand...5 Stap 3 - Het aanmaken van het JSON bestand...6 Stap 4 Bakken van de badge...7 Het gebruik van de badge...7 Pagina 2 van 8 MSMOG 2019 Handleiding aanmaken badges
Aanleiding Certificaten, diploma' s en getuigschriften worden veelal op papier verstrekt. Maar de moderne molenaar wil zijn verdiensten ook graag on-line laten zien, bijvoorbeeld op zijn LinkedIn profiel, op Twitter of via Facebook. Open Badges maken het mogelijk om naast een certificaat ook een on-line verificatie van van een leerprestatie te maken. Deze badges verschijnen on-line en door er op te klikken kunnen ze worden geverifieerd. Zo kunnen bijvoorbeeld onze moleninstandhouders on-line laten zien dat ze werkelijk moleninstandhouder zijn. Hoe het maken en uitgeven van deze badges werkt staat in dit document beschreven. Het algemene idee Badges zijn PNG plaatjes met een JSON file er aan verbonden. Je publiceert plaatje en JSON bestand op een publieke webserver en laat dan een zogenaamde badge baker hiervan een geïntegreerde badge maken. Die badge kan dan in Mozilla Backpack worden ingelezen door de geslaagde kandidaat. De badge kan dan worden getoond in het LinkedIn profiel van de kandidaat en worden geverifieerd. In het JSON bestand staat van wie de badge is aan de hand van een mail adres. Verder wie de badge heeft uitgegeven, een link naar een bewijspagina op een webserver met de gegevens en status van de badge, verwijzingen naar de eisen die aan de eigenaar van de badge zijn gesteld en het mail adres van de partij die de badges uit heeft gegeven. Handleiding aanmaken badges MSMOG 2019 Pagina 3 van 8
De structuur op onze webserver Het bewijsbestand, het plaatje en de JSON beschrijving voor de badge moeten op onze webserver staan. De lokaties voor de diverse bestanden daar zijn: /fs0/msmog/cemi lokatie voor cemi bestanden -- 0000001.html het bewijsbestand voor certificaat 1 -- 0000002.html het bewijsbestand voor certificaat 2... etc -- badges -- 0000001.json de beschrijving van certificaat 1 -- 0000001.png het plaatje bij certificaat 1 -- 0000002.json de beschrijving van certificaat 2 -- 0000002.png het plaatje bij certificaat 2... etc. -- classes de soorten badges (classes) -- cemi_red.png moederplaatje met rode punt -- cemi_yellow.png moederplaatje met gele punt... etc. `-- index.php redirect naar pagina met cemi eisen Pagina 4 van 8 MSMOG 2019 Handleiding aanmaken badges
Aanmaken van een badge stappenplan Stap 1 - het maken van de afbeelding We beginnen met het maken van het plaatje. Ik gebruik daar het tekenprogramma The Gimp voor, maar je kunt gebruiken wat je wilt, als je er maar PNG afbeeldingen mee kunt maken. Hiernaast zie je de badge die ik voor de molen instandhouder in elkaar heb gezet. Dit plaatje is 210 x 210 pixels groot en staat op een transparante achtergrond. Het plaatje kan dienen voor alle badges die in een bepaalde categorie worden uitgedeeld. Het overzetten van het plaatje naar de webserver. Het plaatje wordt nu overgezet naar de MSMOG webserver en in lokatie /fs0/msmog/cemi/badges/classes/ gezet. Kies een logische naam voor de badge, bijvoorbeeld in ons geval: cemi_red.png Als iemand deze badge haalt maak je een hardlink aan naar de juiste afbeelding in de classes directory: # ln /fs0/msmog/cemi/badges/classes/cemi_red.png /fs0/msgmog/cemi/badges/0000001.png Je moet het plaatje nu in je browser kunnen tonen: https://www.msmog.nl/cemi/badges/0000001.png Stap 2 - het aanmaken van het bewijs bestand Een badge is waardeloos als er niet een vorm van verificatie bestaat. De manier waarop dat bij OpenBadges wordt gedaan is eenvoudig: je neemt een url op van een pagina op een webserver waarop je deze bewijsinformatie kunt vinden. Dat kan een eenvoudige tabel zijn zoals deze: <html> <h1>cemi register MSMOG</h1> <p> <table> <tr><td>nummer</td><td>0000001</td></tr> <tr><td>status</td><td>wacht OP CONTRACT</td></tr> <tr><td>naam</td><td>leendert Huizer</td></tr> <tr><td>uitgegeven op</td><td>8 mei 2019</td></tr> <tr><td>geldig voor</td><td>alle MSMOG molens</td><tr> <tr><td valign="top">toetsingen</td><td align="top"> <table> <tr><td>regionaal examen GVM</td><td>4 mei 2019</td><tr> <tr><td>certificaat valbeveiliging</td><td>19 mei 2018</td><tr> </table> </td></tr> </table> </p> </html> Handleiding aanmaken badges MSMOG 2019 Pagina 5 van 8
Deze tabel noem je nu 0000001.html. Omdat ik een RewriteRule in de httpd configuratie gebruikkun je ook 0000001 gebruiken zonder.html er achter. Opvragen van deze tabel moet nu lukken: https://www.msmog.nl/cemi/0000001 Dat ziet er dan zo uit: Het is uiteraard van belang dat deze pagina via https:// en met een geldig certificaat wordt getoond en op de website van de uitgevende partij staat. Stap 3 - Het aanmaken van het JSON bestand De informatie die aan / in het plaatje moet komen dient aan te worden gemaakt als een zogenaamd JSON bestand. Een voorbeeld volgt: { "recipient": "henk@fortean.org", "evidence": "https://www.msmog.nl/cemi/0000001", "issued_on": "2019-05-08", "badge": { "version": "1.0.0", "name": "Moleninstandhouder", "image": "https://www.msmog.nl/cemi/badges/0000001.png", "description": "Bevoegd tot het binnen kaders draaien van alle molens van de MSMOG", "criteria": "https://www.msmog.nl/cemi/", "issuer": { "origin": "http://www.msmog.nl/", "name": "Bestuur MSMOG", "org": "Molenstichting Midden- en Oost-Groningen, 2019", "contact": "badges@msmog.nl" } } } In het rood staan na evidence de url van het file waarin de status van de badge wordt bijgehouden, en achter image de URL van het plaatje dat bij de badge hoort. Dat is in de praktijk een link naar één van de standaard badge afbeeldingen. Je kunt deze urls pas gebruiken als je de JSON file hebt aangemaakt, over gezet naar de webserver (op de goede plek) en dan een link hebt gemaakt naar het juiste PNG plaatje. Dit JSON bestand zet je in /fs0/msmog.nl/cemi/badges/ onder het nummer van het certificaat, aangevuld met nullen (7 lang). Opvragen moet dan als volgt kunnen: https://www.msmog.nl/cemi/badges/0000001.json Negeer de inhoud, het gaat puur om hoe het er uit ziet (in firefox): Pagina 6 van 8 MSMOG 2019 Handleiding aanmaken badges
Stap 4 Bakken van de badge Ga, om certificaat 0000001 aan te maken, naar http://backpack.openbadges.org/baker?assertion=https://www.msmog.nl/cemi/badges/0000001.json Nu wordt de badge aangemaakt en kun je die downloaden. Het gebruik van de badge De zojuist gebakken badge kun je in een Mozilla Backpack account inlezen. Mozilla backpack site: https://backpack.openbadges.org/ Maak eerst een account aan. Merk op dat bij het aanmaken van het account een werkend mail adres in dat account moet worden opgenomen. Dat moet hetzelfde adres zijn dat in je badge staat. Het is mogelijk meerdere mail adressen met je account te associëren. Nu kun je de zojuist aangemaakte badge uploaden. Dan kun je die badge in een collection zetten. Die kan bestaan uit 1 of meerdere badges. Je kunt alleen maar alle badges uit een collectie tonen, wil je dus maar één badge op je bijvoorbeeld LinkedIn profiel zetten dan moet je dus zo' n 1 badge ' collection ' aanmaken. Klik daarna het vinkje ' public ' aan in die collection en klik dan op het ' share ' symbool (rechtsonderin). De URL die je nu in je webbrowser balk ziet, vergelijkbaar met dit, kopieëer je dan: https://backpack.openbadges.org/share/8cd031f11af9fce83bf22dfd311c8cf2/ Log nu in op je LinkedIn pagina en maak een nieuwe entry aan in de sectie met certificaties, zoals hieronder in het voorbeeld: Handleiding aanmaken badges MSMOG 2019 Pagina 7 van 8
Pagina 8 van 8 MSMOG 2019 Handleiding aanmaken badges