Capability to Unbake Open Badge 3.0

[alexfigtree]

Credly makes it possible for their users to download a baked badge image. This means that the .png image is encoded with an open badge 3.0. This 1EdTech reference explains the baking specification: https://www.imsglobal.org/spec/ob/v3p0

This issue is to add functionality to the LCW on the Add Credential screen. Users should be able to click on "Add from file" and upload their badge image. The code should:

1. extract the data
2. confirm that it is an open badge 3.0 -- it's possible that this function will be implied in a related issue for verifying the credential

In this issue at 1EdTech: there are some libraries mentioned that will perform the extraction: 1EdTech/openbadges-specification#586

including: https://www.npmjs.com/package/png-itxt

(Note offer for assistance from Credly in the 1EdTech issue if we need a hand).

The Mozilla badge bakery is outdated so we don't want to use that one.

This tool is a browser interface that can be used to manually extract the information: https://www.nayuki.io/page/png-file-chunk-inspector

Note: Out of scope are any image formats that aren't .png. The 1EdTech spec does allow for .svg but we will only be handling .pngs at this time.

Here is one badge to test with. Can provide an open badges 2.0 version if needed for testing

Related issues to link to once they are created:

• Capability to Unbake Open Badge 3.0 digitalcredentials/web-verifier-plus#142 (comment)
• add cryptosuite:eddsa-rdfc-2022 to verification
• instructions for Credly users to download their badge and add to LCW and use on VerifierPlus (Wiki?)

[jchartrand]

The embedded VC from above:

{
  "@context": [
    "https://www.w3.org/ns/credentials/v2",
    "https://purl.imsglobal.org/spec/ob/v3p0/context-3.0.3.json",
    "https://purl.imsglobal.org/spec/ob/v3p0/extensions.json"
  ],
  "id": "https://www.credly.com/api/v1/obi/v3/open_badge_credentials/2116ec78-6c6a-4c8f-b837-5740379a5687",
  "type": [
    "VerifiableCredential",
    "OpenBadgeCredential"
  ],
  "credentialSchema": [
    {
      "id": "https://purl.imsglobal.org/spec/ob/v3p0/schema/json/ob_v3p0_achievementcredential_schema.json",
      "type": "1EdTechJsonSchemaValidator2019"
    }
  ],
  "issuer": {
    "type": [
      "Profile"
    ],
    "id": "did:web:www.credly.com:api:v1:obi:v3:issuers:e0e2733e-936d-462a-8af0-d14c5fa7fd1a",
    "name": "Education Design Lab",
    "email": "[email protected]",
    "image": {
      "id": "https://images.credly.com/images/9fa0195c-593c-4b03-8c93-0d1d94d13b51/blob.png",
      "type": "Image",
      "caption": "Logo of Education Design Lab"
    },
    "url": "https://eddesignlab.org/",
    "description": "We are non-profit innovators from different parts of the education ecosystem who delight in the possibilities of the future of learning. We are connected in our belief that designing models from the learner perspective can address equity gaps and skills gaps in the fast changing hiring marketplace."
  },
  "validFrom": "2024-10-28T04:00:00.000Z",
  "name": "Kerri Lemoie",
  "credentialSubject": {
    "type": [
      "AchievementSubject"
    ],
    "identifier": [
      {
        "type": "IdentityObject",
        "hashed": true,
        "identityHash": "sha256$7ccd5d709d772e75a5044945451463617b2b07866e2ae18f7077c2136961253d",
        "identityType": "emailAddress"
      }
    ],
    "achievement": {
      "id": "https://www.credly.com/api/v1/obi/v3/issuers/e0e2733e-936d-462a-8af0-d14c5fa7fd1a/achievements/e122d4aa-ddd9-4d21-a5f0-959a55ac0451",
      "type": [
        "Achievement"
      ],
      "achievementType": "Badge",
      "name": "Durable Skills Badge Facilitator",
      "description": "The individual who has earned this badge has demonstrated 21st Century Facilitation, which includes the capacity to advocate the value of digital credentials for students, make 21st century skills explicit across curriculum, assess 21st century skills, and utilize badging technologies.",
      "image": {
        "id": "https://images.credly.com/images/1f3d1268-12b2-480f-9977-5f3047c746e3/image.png",
        "type": "Image"
      },
      "creator": {
        "type": [
          "Profile"
        ],
        "id": "did:web:www.credly.com:api:v1:obi:v3:issuers:e0e2733e-936d-462a-8af0-d14c5fa7fd1a",
        "name": "Education Design Lab",
        "email": "[email protected]",
        "image": {
          "id": "https://images.credly.com/images/9fa0195c-593c-4b03-8c93-0d1d94d13b51/blob.png",
          "type": "Image",
          "caption": "Logo of Education Design Lab"
        },
        "url": "https://eddesignlab.org/",
        "description": "We are non-profit innovators from different parts of the education ecosystem who delight in the possibilities of the future of learning. We are connected in our belief that designing models from the learner perspective can address equity gaps and skills gaps in the fast changing hiring marketplace."
      },
      "criteria": {
        "id": "https://www.credly.com/org/education-design-lab/badge/durable-skills-badge-facilitator",
        "narrative": "Professional Experience: To earn this badge, the individual delivered an elevator pitch to various stakeholders articulating the value of 21st century skills micro-credentials. \nEducation Experience: To earn this badge, the individual updated their syllabus to highlight 21st century skills so students can have deeper awareness of where the skills are happening. \nAssessment: To earn this badge, the individual gave feedback to mock students to practice using the Lab's rubrics. \nProfessional Experience: To earn this badge, the individual issued a badge to demonstrate the ability of issuing and sharing a digital badge. "
      },
      "tag": [
        "Articulate Value",
        "Assessment",
        "Constructive Feedback",
        "Curriculum Mapping",
        "Digital Badge Design",
        "Digital Badging System",
        "Microcredential Development"
      ]
    },
    "source": {
      "type": [
        "Profile"
      ],
      "id": "did:web:www.credly.com:api:v1:obi:v3:issuers:e0e2733e-936d-462a-8af0-d14c5fa7fd1a",
      "name": "Education Design Lab",
      "email": "[email protected]",
      "image": {
        "id": "https://images.credly.com/images/9fa0195c-593c-4b03-8c93-0d1d94d13b51/blob.png",
        "type": "Image",
        "caption": "Logo of Education Design Lab"
      },
      "url": "https://eddesignlab.org/",
      "description": "We are non-profit innovators from different parts of the education ecosystem who delight in the possibilities of the future of learning. We are connected in our belief that designing models from the learner perspective can address equity gaps and skills gaps in the fast changing hiring marketplace."
    }
  },
  "credentialStatus": {
    "id": "https://www.credly.com/api/v1/obi/v3/open_badge_credentials/2116ec78-6c6a-4c8f-b837-5740379a5687/revocation_list",
    "type": "1EdTechRevocationList"
  },
  "proof": [
    {
      "type": "DataIntegrityProof",
      "created": "2024-11-21T16:50:11Z",
      "verificationMethod": "did:web:www.credly.com:api:v1:obi:v3:issuers:e0e2733e-936d-462a-8af0-d14c5fa7fd1a#key-0",
      "cryptosuite": "eddsa-rdfc-2022",
      "proofPurpose": "assertionMethod",
      "proofValue": "z5vUq9ivd1YdCjqhgRqooojPJfUNbnsh121VbJsPkVy5WaWGnpwQPyPBStvDreVDrGmCYxDwoqU1pJYDB6iq1fdFR"
    }
  ]
}

[kayaelle]

Review error messaging w/ @alexfigtree for:

• image not a .png
• image doesn't contain an Open Badge 3.0

[kayaelle]

Current error message for uploading a file is: Unable to Add Credentials Ensure the file contains one or more credentials, and is a supported file type.

@alexfigtree - could you help look into what the testing is and what triggers this message? I think we may be able to re-use it but would edit to be more helpful based on what you learn. Thanks!

related to VerifierPlus issue: digitalcredentials/web-verifier-plus#142

Note that the VerifierPlus error message is: "JSON cannot be parsed" so will need to do this research for this implementation too. Will make a note in that issue.

[alexfigtree]

Error messaging reviewed, will need to perform the following checks:

1. Add credential --> Add from File (currently will only show JSON, but will need to add functionality for showing PNG files (OBV3s).
2. Determine if file chosen is actually OBV3 (i.e., png vs json)
3. Find correct extraction library to extract data from PNG file, assign variable within extraction that contains open badge
   4) Check context.file to ensure that it's a real OBV3 (ask James or Dmitri what latest versions are, etc.)
4. Hand code over to verify, etc., in the same way we handle creds for display.

[kayaelle]

@alexfigtree - I asked James about step #4 and he said that the verification core code should handle that because it needs to check if it is a VC which is good enough for us for now. So we can skip #4 and go to #5.

Will add a new comment with the error message for the file type here soon.

[alexfigtree]

Updated my comment from yesterday

[kayaelle]

I think this message should work if the file upload type is not .json or .png:

File Upload Error
This file format is not supported

Will add this to digitalcredentials/web-verifier-plus#142