LearnCard Developer Docs
  • 🚀Get Started
    • 👋Welcome
    • ⭐Who are you?
      • Learners & Employees
      • Traditional Educator
      • Non-Traditional Educator
      • Assessment Provider
      • Employer
      • App Developer & EdTech
      • DAO & Communities
      • Content Creators
      • Research Institutions
      • NGOs & Governments
      • Plugfest Partner
        • Guide for Interop Issuers
          • 🤽Creating an Interop Issuer
        • Guide for Interop Wallets
    • Protocol Overview
      • The Internet of Education
      • The Learning Economy
      • Learner & Employee Privacy
      • 22nd Century Education
      • The Open Credential Network
      • PVCs
  • 🔰LearnCard SDK
    • What is LearnCard?
      • Why a Universal Wallet?
      • Architectural Patterns
      • Production Deployment Guide
      • Troubleshooting Guide
    • LearnCard Core
      • Quick Start
        • Create New Credentials
          • Creating Verifiable Credentials for LearnCard
          • Achievement Types and Categories
          • Custom Types
          • Understanding Boosts
          • Creating Boost Credentials
        • Sign & Send Credentials
        • Accept & Verify Credentials
        • Share & Present Credentials
      • Construction
        • Managing Seed Phrases
        • initLearnCard
        • DIDKit
        • learnCardFromSeed
        • emptyLearnCard
        • IDX Config
      • Control Planes
        • ID
        • Read
        • Store
        • Index
        • Cache
        • Context
      • Plugins
        • Adding Plugins
        • Official Plugins
          • Dynamic Loader
          • Crypto
          • DIDKit
          • DID Key
          • VC
            • Expiration Sub-Plugin
          • VC Resolution
          • VC-Templates
          • VC-API
          • Ceramic
          • IDX
          • VPQR
          • Ethereum
          • CHAPI
          • LearnCard Network
          • LearnCloud
          • LearnCard
          • Claimable Boosts
        • Writing Plugins
          • The Simplest Plugin
          • The Plugin Type
          • The LearnCard Type
          • Implementing Control Planes
          • Implementing Methods
          • The Implicit LearnCard
          • Depending on Plugins
          • Private Fields
          • Publishing a Plugin to NPM
      • URIs
      • CHAPI
        • ⭐CHAPI Wallet Setup Guide
        • ↔️Translating to CHAPI documentation
        • 🖥️Demo Application
        • 🔰Using LearnCard to Interact with a CHAPI Wallet
        • 📝Cheat Sheets
          • Issuers
          • Wallets
      • LearnCard UX
        • Quick Start
        • Components
          • Verifiable Credentials
            • VC Thumbnail
            • VC Thumbnail, Mini
          • LearnCards
            • LearnCard Front
            • LearnCard Back
        • API
      • LearnCard Bridge
      • API
      • Migration Guide
    • LearnCard Network
      • LearnCard Network API
        • Authentication
        • Auth Grants and API Tokens
        • Profile
        • Credentials
        • Boosts
        • Presentations
        • Storage
        • Signing Authorities
        • Notifications
        • API Docs
        • Launch Your Own Network
      • 🔌Connect Your Application
    • ConsentFlow
      • Setting Up ConsentFlow with an Independent Network
    • GameFlow
      • Sending xAPI Statements
        • xAPI URIs
      • Reading xAPI Statements
        • Advanced xAPI Statement Queries
      • Consentful "Claim Later" Flow
  • 🚀Applications
    • LearnCard
    • SuperSkills!
      • SuperSkills! SDK
        • Digital Wallets
        • Issuing into SuperSkills!
        • 🦸Creating a SuperSkills! Issuer
    • Metaversity
    • Admin Dashboard
  • 🔗Resources
    • Github
    • Community
    • 💅Custom Development
    • Contact Our Team
    • Learning Economy
  • 🤖LearnCard Services
    • LearnCard CLI
    • Discord Bot
    • Metamask Snap
  • 💸LearnBank SDK
    • Why LearnBank?
  • 📊LearnGraph SDK
    • Why LearnGraph?
Powered by GitBook
On this page
  • How Connected Applications Work
  • Getting Started
  • Add a Network LearnCard to your Application & Create a Service Profile
  • ConnectUrl
  • RedirectUrl
  • ⭐️ Become a Trusted Application

Was this helpful?

  1. LearnCard SDK
  2. LearnCard Network

Connect Your Application

Learn how to connect LearnCard to your existing applications, enabling seamless sharing and earning of credentials.

PreviousLaunch Your Own NetworkNextConsentFlow

Last updated 3 months ago

Was this helpful?

How Connected Applications Work

  1. (optional) Apps in the will be displayed in the LearnCard Launchpad.

  1. (optional) Users will be redirected to your when they click connect.

  2. (optional) Users sign up / login to your application.

  3. Through a direct link, or a QR code, your application redirects the user to https://learncard.app/launchpad?connectTo=yourAppProfileId&challenge=aaaa-bbbb-cccc-dddd

  4. The user will be given the option to Accept or Deny the request to connect with your application.

If you are not in the , the user will see the "Unknown App Request" prompt:

  1. If they Accept the connection request, they will be connected with your application and select the credentials that they wish to share with your application.

Getting Started

You've decided that you would like to enable your users to connect their LearnCard to your application—that's great! Let's get started.

First, install the Network Plugin for LearnCard in your project:

pnpm i @learncard/init
yarn add @learncard/init
npm i @learncard/init

Add a Network LearnCard to your Application & Create a Service Profile

There be dragons here. 🐉

In production environments, take great care and caution when generating and storing key material. Insufficient entropy or insecure storage, among other vectors, can easily compromise your data and identities.

// pnpm i @learncard/init
import { initLearnCard } from '@learncard/init';

// Create your LearnCard
const secretSeed = // string of hex characters 0123456789abcdef
const networkLearnCard = await intiLearnCard({ seed: secretSeed, network: true });

// Initialize your profile (one-time only - can also be done using LearnCard CLI)
// Your LearnCard Network account will be discoverable by both your profileId and displayName
const appProfileId = 'yourAppProfileId'; // This value will be used in urls
const appDisplayName = 'App Name Here';
await networkLearnCard.invoke.createServiceProfile({
    profileId: appProfileId,
    displayName: appDisplayName,
});

// Get your DID
const DID = networkLearnCard.id.did();

ConnectUrl

A URL where users will be redirected to when they click the "Connect" button in the LearnCard app

  • This URL should link to a co-branded page for your application and LearnCard. You may wish to have users signup for your application here.

  • When you're ready, generate an invitation to connect with your application and redirect them back to LearnCard

import { initLearnCard } from '@learncard/init';

// using secretSeed and appProfileId from above
const networkLearnCard = await initNetworkLearnCard({ seed: secretSeed, network: true });
const inviteChallenge = await networkLearnCard.invoke.generateInvite();

const redirectUrl = `https://learncard.app/launchpad?connectTo=${encodeURI(profileId)}&challenge=${inviteChallenge.challenge}`

// Redirect
window.location.replace(redirectUrl); // for example

RedirectUrl

A URL where users will be redirected to after they select credentials and click the "Share Credentials" button.

You can then get the verifiable credentials that the user just shared with your application!

import { initLearnCard } from '@learncard/init';

// Gets the credentials that the user most recently sent to your application
const getSharedCredentials = async (userProfileId: string) => {
    const networkLearnCard = await initLearnCard({ seed: secretSeed, network: true });

    const sharedCreds = await networkLearnCard.invoke.getIncomingPresentations(userProfileId);
    
    if (sharedCreds.length === 0) return [];
    
    const mostRecentBundle = sharedCreds[0];
    const bundle = await networkLearnCard.invoke.resolveFromLCN(mostRecentBundle.uri);
    const decrypted = await networkLearnCard.invoke.getDIDObject().decryptDagJWE(bundle);
    
    return decrypted.verifiableCredential;
}

⭐️ Become a Trusted Application

Trusted Applications are in beta! Soon

  • Organization info

    • Name

    • Address

  • App info

    • Name

    • Short description (~25 characters)

    • App Icon URL

    • Whether you wish to allow users to edit/update the credentials that they share with you

  • URLs

    • Main URL for your application (e.g. learncard.app)

  • LearnCard Network Profile ID

  • DID Associated with your Application

After clicking "Share Credentials" they will be redirected to your

You now have an active connection with this user and their LearnCard! This enables you to bi-directionally share and send credentials and presentations to each other using the . 🎉

Refer to for more information.

with the following information added:

This is the string that you specify when creating your

This is the DID associated with your

🔰
🔌
LearnCard Network API
Key Generation
Submit a PR in the LearnCard Registry
redirectUrl
connectUrl
redirectUrl
Network LearnCard
Network LearnCard
Trusted App Registry
connectUrl
Trusted App Registry
Authorize Connected Application Flow