Merge pull request #678 from bcgov/human-readable

Human readable QR

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

@@ -1,6 +1,10 @@
 from datetime import datetime, timedelta
 
-from api.verificationConfigs.models import VerificationConfig, VerificationProofRequest
+from api.verificationConfigs.models import (
+    VerificationConfig,
+    VerificationProofRequest,
+    MetaData,
+)
 from api.authSessions.models import AuthSession
 
 # Presentation returned from the debug webhook
@@ -1341,6 +1345,15 @@
 ver_config = VerificationConfig(
     ver_config_id="verified-email",
     subject_identifier="email",
+    metadata={
+        "en": MetaData(
+            title="Get Name",
+            claims=[
+                "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

@@ -35,6 +35,7 @@
 
 from ..verificationConfigs.crud import VerificationConfigCRUD
 from ..verificationConfigs.helpers import VariableSubstitutionError
+from ..verificationConfigs.models import MetaData
 
 
 ChallengePollUri = "/poll"
@@ -202,6 +203,11 @@ async def get_authorize(request: Request, db: Database = Depends(get_db)):
     # BC Wallet deep link
     wallet_deep_link = gen_deep_link(auth_session)
 
+    metadata = (
+        ver_config.metadata["en"]
+        if ver_config.metadata and "en" in ver_config.metadata
+        else MetaData(title="Scan with a Digital Wallet", claims=[])
+    )
     # This is the payload to send to the template
     data = {
         "image_contents": image_contents,
@@ -212,6 +218,8 @@ 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": metadata.title,
+        "claims": metadata.claims,
     }
 
     # 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}}') ?? []);
 
         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

@@ -38,11 +38,17 @@ class VerificationProofRequest(BaseModel):
     requested_predicates: list[ReqPred]
 
 
+class MetaData(BaseModel):
+    title: str | None = Field(default=None)
+    claims: 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: dict[str, MetaData] | None = Field(default=None)
 
     def get_now(self) -> int:
         return int(time.time())