Human readable QR

oidc-controller/api/core/oidc/tests/__mocks__.py

@@ -1341,6 +1341,15 @@
 ver_config = VerificationConfig(
     ver_config_id="verified-email",
     subject_identifier="email",
+    metadata={
+        "title": "Get Name",
+        "claims": {
+            "en": [
+                "That you are a BC Resident",
+                "That you are a member of the Law Society of British Columbia",
+            ]
+        },
+    },
     proof_request=VerificationProofRequest(
         name="BCGov Verified Email",
         version="1.0",

oidc-controller/api/routers/oidc.py

@@ -212,6 +212,16 @@ async def get_authorize(request: Request, db: Database = Depends(get_db)):
         "controller_host": controller_host,
         "challenge_poll_uri": ChallengePollUri,
         "wallet_deep_link": wallet_deep_link,
+        "title": (
+            ver_config.metadata.title
+            if ver_config.metadata and ver_config.metadata.title
+            else "Scan with a Digital Wallet"
+        ),
+        "claims": (
+            ver_config.metadata.claims
+            if ver_config.metadata and ver_config.metadata.claims
+            else {"en": []}
+        ),
     }
 
     # Prepare the template

oidc-controller/api/templates/verified_credentials.html

@@ -24,9 +24,12 @@
         <main class="container flex-fill mt-4 text-center">
           <div v-if="!mobileDevice" class="desktop-head">
             <a v-if="backToUrl" :href="backToUrl" class="back-btn"
-              >&#129144; Go back
+            >&#129144; Go back
             </a>
-            <h1 class="mb-3">Scan with a Digital Wallet</h1>
+            <h1 class="mb-3">{{title}}</h1>
+            <div v-if="!mobileDevice" class="text-start">
+              <display-claims class="pl-5"  :claims="claims"/>
+            </div>
           </div>
           <div class="row">
             <div
@@ -35,9 +38,11 @@ <h1 class="mb-3">Scan with a Digital Wallet</h1>
             >
               <div v-if="mobileDevice" class="text-start">
                 <a v-if="backToUrl" :href="backToUrl" class="back-btn"
-                  >&#129144; Go back
+                >&#129144; Go back
                 </a>
                 <h1 class="mb-3 fw-bolder fs-1">Continue with:</h1>
+                <display-claims :claims="claims"/>
+
               </div>
               <status-description
                 key="state.current"
@@ -117,12 +122,13 @@ <h1 class="mb-3 fw-bolder fs-1">Continue with:</h1>
                   <a
                     title="Download BC Wallet"
                     href="https://www2.gov.bc.ca/gov/content/governments/government-id/bc-wallet"
-                    >Download the BC Wallet app
+                  >Download the BC Wallet app
                   </a>
                 </p>
               </div>
             </div>
           </div>
+      </div>
         </main>
 
         <footer>
@@ -188,6 +194,17 @@ <h1 class="mb-3 fw-bolder fs-1">Continue with:</h1>
     </div>
   </script>
 
+  <script type="text/x-template" id="display-claims">
+    <div v-if="claims.length > 0" class="flex-none">
+      The proof request will ask you to prove the following:
+      <ul>
+        <li v-for="claim in claims">
+          [[claim]]
+        </li>
+      </ul>
+    </div>
+  </script>
+
   <script type="text/x-template" id="qr-code">
     <div class="qr-code-container mb-3">
       <button
@@ -270,7 +287,6 @@ <h5 v-if="state.showScanned" class="fw-bolder mb-3">
 
   <script type="text/javascript">
     const { createApp, ref, reactive, computed, watch } = Vue;
-
     /**
      * @typedef  {"intro" |"verified" | "failed" | "pending"| "expired" |"abandoned"} AppStates
      */
@@ -307,9 +323,11 @@ <h5 v-if="state.showScanned" class="fw-bolder mb-3">
         const mobileDevice = ref(
           getBrowser() === "Android" || getBrowser() === "iOS" ? true : false
         );
+        const claims = ref(JSON.parse('{{claims|tojson}}')['en'] ?? []);
 
         return {
           mobileDevice,
+          claims,
           state,
           displayQr: mobileDevice.value ? false : true,
           bcIdClicks: 0,
@@ -504,7 +522,16 @@ <h5 v-if="state.showScanned" class="fw-bolder mb-3">
         },
       },
     });
-    app.component("qr-code", {
+    app.component("display-claims", {
+      template: `#display-claims`,
+      props: {
+        claims: {
+          required: true,
+        },
+      },
+      delimiters: ["[[", "]]"],
+    });
+   app.component("qr-code", {
       template: `#qr-code`,
       props: {
         state: {

oidc-controller/api/verificationConfigs/models.py

@@ -1,4 +1,5 @@
 import time
+from typing_extensions import TypedDict
 from pydantic import BaseModel, ConfigDict, Field
 
 from .examples import ex_ver_config
@@ -38,11 +39,17 @@ class VerificationProofRequest(BaseModel):
     requested_predicates: list[ReqPred]
 
 
+class MetaData(BaseModel):
+    title: str | None = Field(default=None)
+    claims: dict[str, list[str]] | None = Field(default=None)
+
+
 class VerificationConfigBase(BaseModel):
     subject_identifier: str = Field()
     proof_request: VerificationProofRequest = Field()
     generate_consistent_identifier: bool | None = Field(default=False)
     include_v1_attributes: bool | None = Field(default=False)
+    metadata: MetaData | None = Field(default=None)
 
     def get_now(self) -> int:
         return int(time.time())