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"
    }
  ]
}