Install & Setup

1. Install Lumi Education H5P SDK

Install our Javascript SDK to get started. Use the following code in your application wherever the user will view or create/edit H5P content.

<script src="https://api.Lumi.education/sdk.js" type="text/javascript"></script>

This script will add a global Lumi object to the window object, which can be called via window.Lumi

2. Identify users via SSO-Token

These are instructions on how to generate Single Sign-On tokens on your server. These tokens can be used to authenticate your users in our SDK. You can find the required private API key at https://app.Lumi.education/dashboard/user/api

• Store your private key on your server and don't share it.

• When a user wants to use the widget, request your server to generate an SSO token.

• On your server, generate a token using the snippet below.

• Pass the token back to your app and into our widget.

• We will use that token to authenticate your user.

2.1. Install a JWT library

We use JSON Web Tokens to securely authenticate your users. First, install the appropriate JWT library for your server.

Node.js

npm install --save jsonwebtoken

C#

# See instructions here:
https://www.nuget.org/packages/System.IdentityModel.Tokens.Jwt/

Go

go get github.com/golang-jwt/jwt

Java

# See instructions here:
https://mvnrepository.com/artifact/io.jsonwebtoken/jjwt/0.7.0

PHP

composer require firebase/php-jwt

Python

pip install PyJWT

Ruby

sudo gem install jwt

2.2. Generate tokens on your server

Node.js

var jwt = require('jsonwebtoken');

var PrivateAPIKey = <privateAPIKey>; // private API key is found on https://app.Lumi.education/dashboard/user/api

function createLumiToken(user) {
  var userData = {
    id: user.id,
    // These are optional
    username: user.username,
    email: user.email,
    imageUrl: user.imageUrl
  };
  return jwt.sign(userData, PrivateAPIKey, {algorithm: 'HS256'});
}

C#

public class LumiTokenCreator
{
  private static string PrivateKey = <PrivateAPIKey>; // private API key is found on https://app.Lu

  public static string CreateToken(User user)
  {
    byte[] keyBytes = Encoding.UTF8.GetBytes(PrivateKey);
    var securityKey = new SymmetricSecurityKey(keyBytes);

    var credentials = new SigningCredentials(securityKey, "HS256");
    var header = new JwtHeader(credentials);
    var payload = new JwtPayload
    {
      { "id": user.id },
      // these are optional
      { "imageUrl": user.imageUrl }, 
      { "email": user.email },
      { "username": user.username }
    };

    var securityToken = new JwtSecurityToken(header, payload);
    var handler = new JwtSecurityTokenHandler();

    return handler.WriteToken(securityToken);
  }
}

Go

import (
  "github.com/golang-jwt/jwt"
)

const PrivateKey = "<PrivateAPIKey>" // private API key is found on https://app.Lumi.education/dashboard/user/api

func createLumiToken(user map[string]interface{}) (string, error) {
  token := jwt.NewWithClaims(jwt.SigningMethodHS256, jwt.MapClaims{
    "id": user["id"],
    // optional
    "imageUrl": user["imageUrl"], 
    "email": user["email"],
    "username": user["username"],
  })
  return token.SignedString([]byte(PrivateKey));
}

Java

import java.util.HashMap;

import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.SignatureAlgorithm;

public class LumiTokenCreator {
  private static final String PrivateKey = "<PrivateAPIKey"; // private API key is found on https://app.Lumi.education/dashboard/user/api

  public static String createToken(User user) throws Exception {
    HashMap<String, Object> userData = new HashMap<String, Object>();
    userData.put("id", user.id);
    // optional, but preferred
    userData.put("imageUrl", user.imageUrl); 
    userData.put("email", user.email);
    userData.put("username", user.username);

    return Jwts.builder()
               .setClaims(userData)
               .signWith(SignatureAlgorithm.HS256, PrivateKey.getBytes("UTF-8"))
               .compact();
  }
}

PHP

use \Firebase\JWT\JWT;

const PrivateKey = '<PrivateAPIKey>'; // private API key is found on https://app.Lumi.education/dashboard/user/api

function createLumiToken($user) {
  $userData = [
    'id' => $user['id'],
    // optional, but preferred
    'imageUrl' => $user['imageUrl'], 
    'email' => $user['email'],
    'username' => $user['username'],
  ];
  return JWT::encode($userData, PrivateKey, 'HS256');
}

Python

import jwt

private_key = '<PrivateAPIKey' # private API key is found on https://app.Lumi.education/dashboard/user/api

def create_lumi_token(user):
  user_data = {
    'id': user.id,
    'imageUrl': user.image_url, # optional, but preferred
    'email': user.email,
    'username': user.username,
  }
  return jwt.encode(user_data, private_key, algorithm='HS256')

Ruby

require 'jwt'

PrivateKey = '<PrivateAPIKey' # private API key is found on https://app.Lumi.education/dashboard/user/api

def createLumiToken(user)
  userData = {
    id: user.id,
    # optional, but preferred
    imageUrl: user.image_url, 
    email: user.email,
    username: user.username
  }

  JWT.encode(userData, PrivateKey, 'HS256')
end

For demonstration purposes, you can also generate an SSO-Token at https://app.Lumi.education/dashboard/user/api

3. Initialise the SDK

To initialize the SDK you have to call the init-method on the global Lumi-object with the appId and SSO-token as arguments:

Lumi.init(<appId>, <SSO-token>);

You can find the appId on https://app.Lumi.education/dashboard/user/api. To create an SSO-Token please follow Identify users via SSO-Token.