Merge pull request #230 from serlo/selection-during-deeplinking

feat: show selection on deep linking launch
serlo · Jan 24, 2025 · d91a4e4 · d91a4e4
2 parents b188309 + d678dbe
commit d91a4e4
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 82 deletions.
diff --git a/package.json b/package.json
@@ -40,7 +40,7 @@
     "jsonwebtoken": "9.0.2",
     "jwt-decode": "4.0.0",
     "lodash": "^4.17.21",
-    "ltijs": "^5.9.6",
+    "ltijs": "5.9.5",
     "mongodb": "5.1.0",
     "mysql2": "^3.11.5",
     "openai": "^4.77.0",

diff --git a/src/backend/editor-route-handlers.ts b/src/backend/editor-route-handlers.ts
@@ -6,13 +6,107 @@ import { AccessToken, Entity } from '.'
 import { getMariaDB } from './mariadb'
 import config from '../utils/config'
 import { logger } from '../utils/logger'
+import { IdToken } from 'ltijs'
+import urljoin from 'url-join'
+import { v4 as uuid_v4 } from 'uuid'
+
+import { Provider as ltijs } from 'ltijs'
 
 const ltijsKey = config.LTIJS_KEY
 
 export async function app(_: Request, res: Response) {
   return res.sendFile(path.join(__dirname, '../../dist/frontend/index.html'))
 }
 
+export async function selectContentType(
+  __: IdToken,
+  _: Request,
+  res: Response
+) {
+  return res.send(`
+    <!doctype html>
+    <html lang="de">
+    <head>
+      <meta charset="UTF-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <title>Serlo Editor</title>
+      <style>
+        #clicktarget {
+          display: block; width: 760px; height: 568px;
+          background: url('https://editor.serlo.dev/media/serlo-org/fzinqkwqekgnx9jhgrazvfe4/image.svg')
+            no-repeat center center;
+          background-size: contain;
+        }
+          /* hide visually */
+        #clicktarget span {
+          border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px;
+        }
+      </style>
+    </head>
+    <body style="margin:0; padding:0"><a id="clicktarget" href="/deeplinking-done?type=serlo-editor&ltik=${res.locals.ltik}"><span>Serlo Editor Inhalt (ohne Vorlage)</span></a></body>
+  </html>
+  `)
+}
+
+export async function deeplinkingDone(req: Request, res: Response) {
+  const idToken = res.locals.token
+
+  if (!idToken) return res.status(400).send('Missing idToken')
+
+  const mariaDB = getMariaDB()
+
+  const ltiCustomClaimId = uuid_v4()
+
+  // Create new entity in database
+  const { insertId: entityId } = await mariaDB.mutate(
+    'INSERT INTO lti_entity (custom_claim_id, id_token_on_creation) values (?, ?)',
+    [ltiCustomClaimId, JSON.stringify(idToken)]
+  )
+
+  logger.info('entityId: ', entityId)
+
+  const url = new URL(urljoin(config.EDITOR_URL, '/lti/launch'))
+
+  // https://www.imsglobal.org/spec/lti-dl/v2p0#lti-resource-link
+  const items = [
+    {
+      type: 'ltiResourceLink',
+      url: url.href,
+      title: `Serlo Editor Content`,
+      text: 'Placeholder description',
+      icon: {
+        url: 'https://editor.serlo.dev/media/serlo-org/skkwa1vksa3v2yc7bj9z0bni/image.png',
+        width: 500,
+        height: 500,
+      },
+      // thumbnail:
+      // window:
+      // iframe: {
+      //   width: 400,
+      //   height: 300,
+      // },
+      custom: {
+        // Important: Only use lowercase letters in key. When I used uppercase letters they were changed to lowercase letters in the LTI Resource Link launch.
+        id: ltiCustomClaimId,
+        type: req.query['type'],
+      },
+      // lineItem:
+      // available:
+      // submission:
+
+      // Custom properties
+      // presentation: {
+      //   documentTarget: "iframe",
+      // },
+    },
+  ]
+
+  // Creates the deep linking request form
+  const form = await ltijs.DeepLinking.createDeepLinkingForm(idToken, items, {})
+
+  return res.send(form)
+}
+
 export async function getEntity(req: Request, res: Response) {
   const database = getMariaDB()
 

diff --git a/src/backend/index.ts b/src/backend/index.ts
@@ -1,12 +1,10 @@
 import { IdToken, Provider as ltijs } from 'ltijs'
 import path from 'path'
 
-import { v4 as uuid_v4 } from 'uuid'
 import * as t from 'io-ts'
 import { NextFunction, Request, Response } from 'express'
 import { createAccessToken } from './util/create-acccess-token'
 import { registerLtiPlatforms } from './util/register-lti-platforms'
-import urlJoin from 'url-join'
 import config from '../utils/config'
 import * as edusharing from './edusharing'
 import * as editor from './editor-route-handlers'
@@ -97,6 +95,8 @@ const setup = async () => {
   // Opens Serlo editor
   app.get('/app', editor.app)
 
+  app.get('/deeplinking-done', editor.deeplinkingDone)
+
   // Endpoint to get content
   app.get('/entity', editor.getEntity)
 
@@ -292,59 +292,7 @@ const setup = async () => {
 
   // Successful LTI deep linking launch
   // @ts-expect-error @types/ltijs
-  ltijs.onDeepLinking(async (idToken, __, res) => {
-    const mariaDB = getMariaDB()
-
-    const ltiCustomClaimId = uuid_v4()
-
-    // Create new entity in database
-    const { insertId: entityId } = await mariaDB.mutate(
-      'INSERT INTO lti_entity (custom_claim_id, id_token_on_creation) values (?, ?)',
-      [ltiCustomClaimId, JSON.stringify(idToken)]
-    )
-
-    logger.info('entityId: ', entityId)
-
-    const url = new URL(urlJoin(config.EDITOR_URL, '/lti/launch'))
-
-    // https://www.imsglobal.org/spec/lti-dl/v2p0#lti-resource-link
-    const items = [
-      {
-        type: 'ltiResourceLink',
-        url: url.href,
-        title: `Serlo Editor Content`,
-        text: 'Placeholder description',
-        // icon:
-        // thumbnail:
-        // window:
-        // iframe: {
-        //   width: 400,
-        //   height: 300,
-        // },
-        custom: {
-          // Important: Only use lowercase letters in key. When I used uppercase letters they were changed to lowercase letters in the LTI Resource Link launch.
-          id: ltiCustomClaimId,
-        },
-        // lineItem:
-        // available:
-        // submission:
-
-        // Custom properties
-        // presentation: {
-        //   documentTarget: "iframe",
-        // },
-      },
-    ]
-
-    // Creates the deep linking request form
-    const form = await ltijs.DeepLinking.createDeepLinkingForm(
-      idToken,
-      items,
-      {}
-    )
-
-    return res.send(form)
-  })
+  ltijs.onDeepLinking(editor.selectContentType)
 
   await ltijs.deploy()
 

diff --git a/yarn.lock b/yarn.lock
@@ -8596,15 +8596,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-value@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "get-value@npm:3.0.1"
-  dependencies:
-    isobject: "npm:^3.0.1"
-  checksum: 10/3ba777d33448181d8b6c21ce11f31194257119d32dbd632b27db6e3f27fe78100405b4dd93137eea9f4aa2d0a9c623b13747d728d472a7ca6cb93046c3f521a1
-  languageName: node
-  linkType: hard
-
 "git-hooks-list@npm:^3.0.0":
   version: 3.1.0
   resolution: "git-hooks-list@npm:3.1.0"
@@ -10719,9 +10710,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ltijs@npm:^5.9.6":
-  version: 5.9.6
-  resolution: "ltijs@npm:5.9.6"
+"ltijs@npm:5.9.5":
+  version: 5.9.5
+  resolution: "ltijs@npm:5.9.5"
   dependencies:
     "@babel/runtime": "npm:^7.24.4"
     body-parser: "npm:^1.20.2"
@@ -10733,11 +10724,10 @@ __metadata:
     got: "npm:^11.8.2"
     helmet: "npm:^6.0.1"
     jsonwebtoken: "npm:^9.0.2"
-    mongoose: "npm:^7.8.3"
+    mongoose: "npm:^7.6.10"
     parse-link-header: "npm:^2.0.0"
     rasha: "npm:^1.2.5"
-    sprightly: "npm:^2.0.1"
-  checksum: 10/83f10bd38cc2b2ba22c7387ef55ad97590fa889804c93cc7627870b75ac81d49dc877c9ade3a4c73d2028f96ae8600f2fec3e44e42aa34e5879827aa62013bbc
+  checksum: 10/1ffdcca8ee185519e27710ad422c573c8d5767b523c2ca7a0aed967487134859f06a19d9646ffc00a187d811cd72fd69efd427d353118e8ff8b81a1a603960fe
   languageName: node
   linkType: hard
 
@@ -11468,7 +11458,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mongoose@npm:^7.8.3":
+"mongoose@npm:^7.6.10":
   version: 7.8.6
   resolution: "mongoose@npm:7.8.6"
   dependencies:
@@ -13745,7 +13735,7 @@ __metadata:
     jwks-rsa: "npm:^3.1.0"
     jwt-decode: "npm:4.0.0"
     lodash: "npm:^4.17.21"
-    ltijs: "npm:^5.9.6"
+    ltijs: "npm:5.9.5"
     mongodb: "npm:5.1.0"
     multer: "npm:^1.4.5-lts.1"
     mysql2: "npm:^3.11.5"
@@ -14129,15 +14119,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sprightly@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "sprightly@npm:2.0.1"
-  dependencies:
-    get-value: "npm:^3.0.1"
-  checksum: 10/50b77101979df58496e1c7b14c75add3cd56c6beffa35c622188144ebadec02fa52a4f25b37226b5e82fd58aa2979feeaacedcc52cc20055eaa928cc4fb6b4c7
-  languageName: node
-  linkType: hard
-
 "sprintf-js@npm:1.1.1":
   version: 1.1.1
   resolution: "sprintf-js@npm:1.1.1"