0.0.4 • Published 10 months ago
@campfirelearning/sdk-lti-oauth v0.0.4
@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>