Integration Instructions
This demo shows how to integrate the Grader Widget into your LMS. The widget will handle OAuth authentication and display user information.
1. Include the JavaScript Library
<script src="http://localhost:3001/assets/application.js"></script>
2. Add the Container Element
<div id="grader-widget-container"></div>
3. Initialize the Widget
const graderWidget = new GraderWidget({
apiBaseUrl: 'http://localhost:3001',
userId: 'current_user_id', // Required: Current user ID for security
lmsProviderId: 1, // Required: LMS provider ID to fetch OAuth config
containerId: 'grader-widget-container' // Optional: defaults to 'grader-widget-container'
// OAuth settings (oauthSite, clientId, redirectUri, scopes) are automatically loaded from LMS provider
});
The widget will automatically handle OAuth authentication and fetch real user data from the LMS.
New Configuration Approach: Instead of manually specifying OAuth settings, the widget now fetches them automatically from the LMS provider configuration. This makes integration simpler and more secure.
4. User Change Detection
The widget automatically detects user changes using the userId parameter:
// Basic configuration (required)
const graderWidget = new GraderWidget({
apiBaseUrl: 'http://localhost:3001',
userId: 'current_user_id', // Required: Detects user changes immediately
lmsProviderId: 1 // Required: LMS provider ID
});
Security Features:
- Immediate user detection: Compares
userId with stored user data
- No API calls needed: User change detection is instant and efficient
- Fresh data: Always displays the most current user information
- Secure by design: Requires explicit user ID for security
How it works:
- User changes: When
userId differs from stored user, forces re-authentication
- Token validation: Always validates stored tokens with the API
5. Multiple LMS Providers
For different LMS systems, specify the LMS provider ID. OAuth configuration is automatically loaded:
// Canvas LMS
const canvasWidget = new GraderWidget({
apiBaseUrl: 'http://localhost:3001',
userId: 'canvas_user_123',
lmsProviderId: 1, // Canvas LMS provider
lmsDomain: 'canvas.instructure.com'
});
// Moodle LMS
const moodleWidget = new GraderWidget({
apiBaseUrl: 'http://localhost:3001',
userId: 'moodle_user_456',
lmsProviderId: 2, // Moodle LMS provider
lmsDomain: 'moodle.example.com'
});