Integrating Member Login and Digital Delivery into Your Headless Frontend

When you run online courses, paid newsletters, audio programs, or digital downloads on your own frontend, the most challenging parts to maintain are usually "buyer login," "entitlement checks (who can access which unit)," "private video/PDF anti-leeching signatures," and "cross-device progress synchronization."

Kanorio encapsulates these underlying capabilities into two layers, allowing you to choose based on your customization needs:

1. Drop-in <kanorio-*> elements (@kanorio/elements, fastest): Use a single tag or React component to bring Kanorio’s built-in passwordless login, public curriculum, and protected player directly into your external website.
2. Direct Customer API calls (https://{your-site}/api/v1/customer/*): Use your own UI to call passwordless authentication, fetch the tree structure of purchased deliverables, exchange for 600-second short-lived signed URLs, and report progress.

Full Specification Reference (SSOT):

• All customer endpoints, parameters, and response structures: Customer API Reference
• Component attributes, custom events, and CSS variables: Kanorio Elements Reference

Option 1: Embedding @kanorio/elements (Recommended)

@kanorio/elements provides standard Web Components (compatible with any framework or plain HTML) and React components, with 58 built-in locales and light/dark theme variables:

React Integration Example

import { KanorioProvider, KanorioLogin, KanorioUnit } from "@kanorio/elements";
import "@kanorio/elements/elements.css";

export function CoursePlayerPage() {
  return (
    <KanorioProvider siteUrl="https://s-k4m9x2p7q8w3.kanorio.com" locale="en" theme="auto">
      <KanorioLogin siteName="My Online Academy" />
      <KanorioUnit
        deliverable="react-masterclass"
        onProgress={(e) => console.log("Progress updated:", e)}
      />
    </KanorioProvider>
  );
}

Option 2: Customizing Learning Interfaces via Customer API

If you prefer to design your own curriculum and learning interface from scratch, you can call the Customer API directly from your browser (after adding your frontend domain to "Allowed Origins" in "Site Settings › Developer") or from your server:

1. Passwordless Login for Bearer Token:
   • Call POST /api/v1/customer/auth/challenge to send a 6-digit verification code and login link.
   • After the buyer enters the code, call POST /api/v1/customer/auth/verify to obtain the buyer's sessionToken (knr_cat_*, double-bound to the site and the contact).
2. Fetching Deliverables and Chapter Tree:
   • Include Authorization: Bearer knr_cat_... in the header and call GET /api/v1/customer/deliverables to list all deliverables the buyer has valid for.
   • Call GET /api/v1/customer/deliverables/{key} to retrieve the full chapter tree, unlock status for each unit, and current viewing progress.
3. Exchanging for 600-second Signed URLs and Reporting Progress:
   • When a buyer clicks a unit, call POST /api/v1/customer/units/{id}/open (the server will verify entitlement and check if the releaseAt/releaseAfterDays condition is met) to receive a 600-second private media signed URL.
   • During playback, periodically call POST /api/v1/customer/progress to report positionSeconds. The server will determine completion based on the deliverable's rules and trigger the deliverables.progress.completed Webhook.

The Three Clear Boundaries of Rights

When designing your headless frontend, please note that Kanorio strictly separates these three types of rights:

• Customer Entitlement: The right to view a specific deliverable or unit, granted after purchase or manual assignment by the site owner. Checked via Customer API and <kanorio-unit>.
• Team Operations (RBAC): Permissions for site owners, admins, and editors to access the dashboard and Management API (knr_pat_). "Ability to view a course" never equals "ability to modify the curriculum."
• External Application Custom Roles: If you are building a system with specific roles (e.g., "branch teachers can only see their own students," "TAs can only grade assignments"), these application-layer roles are outside the scope of Kanorio's platform primitives (see Capabilities Matrix). Please implement these in your own backend and use the Management API to read student progress.

Related Documentation