@campfirelearning/unsafe-frontend-example
Setup
Running yarn build:minify
will output dist/index.min.js
which provides a global CampfireSDK
object
that will allow you to do the very first test of consuming an LTI Provider application like Campfire.
Before you go into production you must move OAuth signature generation to the server-side in order to
protect your OAuth secrets.
Usage
Once you have the minified JavaScript you can include it in an HTML file and invoke the Campfire LTI Tool
Consumer class and run its mount
method to launch the integration.
<!DOCTYPE html>
<html>
<head>
<title>Campfire LTI Integration Unsafe Test</title>
<link
rel="stylesheet"
href="https://unpkg.com/modern-normalize@2.0.0/modern-normalize.css"
/>
<style type="text/css">
iframe {
width: 100%;
height: 90vh;
border: 1px solid #999;
}
div#app {
margin: 0 2rem;
}
</style>
</head>
<body>
<div id="app">
<h1>Campfire 🔥 LTI Integration</h1>
<iframe id="tool" name="tool"></iframe>
</div>
<script src="./index.min.js"></script>
<script>
const launchUrl = "https://example.com/lti/launch/path";
const consumer = new CampfireSDK.LTIToolConsumer({
params: {
oauth_consumer_key: "YOUR_CONSUMER_KEY_HERE",
lti_version: "LTI-1p0",
lti_message_type: "basic-lti-launch-request",
resource_link_id: "0",
user_id: "student@example.com",
lis_person_contact_email_primary: "student@example.com",
lis_person_name_given: "Student",
lis_person_name_family: "Learner",
lis_person_name_full: "Student Learner",
roles: "Learner",
},
launchUrl: launchUrl,
signingFunction: CampfireSDK.getUnsafeOauthSigningFunction({
launchUrl: launchUrl,
secretKey: "YOUR_SECRET_KEY_HERE",
}),
});
consumer.mount("tool").then(() => {
console.log("Mounted!");
});
</script>
</body>
</html>