Updates to QR page

README.md

@@ -43,7 +43,7 @@ To start the demo run the following commands from within the `docker` folder:
 Once you have the service running, a presentation request configuration must be configured on the service. You can configure this through either browsing to the swagger interface [here](http://localhost:5000) or running the following curl command with a valid request body
 
 ```
-    curl -X POST "http://localhost:5000/api/vc-configs" -H "accept: application/json" -H "X-Api-Key: test" -H "Content-Type: application/json-patch+json" -d "{ \"id\": \"test-request-config\", \"subject_identifier\": \"email\", \"configuration\": { \"name\": \"Basic Proof\", \"version\": \"1.0\", \"requested_attributes\": [ { \"name\": \"email\", \"restrictions\": [] }, { \"name\": \"first_name\", \"restrictions\": [] }, { \"name\": \"last_name\", \"restrictions\": [] } ], \"requested_predicates\": [] }}"
+    curl -X POST "http://localhost:5000/api/vc-configs" -H "accept: application/json" -H "X-Api-Key: controller-api-key" -H "Content-Type: application/json-patch+json" -d "{ \"id\": \"test-request-config\", \"subject_identifier\": \"email\", \"configuration\": { \"name\": \"Basic Proof\", \"version\": \"1.0\", \"requested_attributes\": [ { \"name\": \"email\", \"restrictions\": [] }, { \"name\": \"first_name\", \"restrictions\": [] }, { \"name\": \"last_name\", \"restrictions\": [] } ], \"requested_predicates\": [] }}"
 ```
 
 > The API is protected with an APIKey which defaults to `Test` in the demo

oidc-controller/src/VCAuthn/IdentityServer/Endpoints/AuthorizationEndpoint/AuthorizationEndpointResult.cs

@@ -11,6 +11,7 @@
 using Microsoft.AspNetCore.Mvc.ViewFeatures;
 using Microsoft.AspNetCore.Routing;
 using Microsoft.Extensions.DependencyInjection;
+using VCAuthn.Models;
 
 namespace VCAuthn.IdentityServer.Endpoints
 {
@@ -21,11 +22,14 @@ public class AuthorizationViewModel
         public string ResolutionUrl { get; }
         public int Interval { get; }
 
-        public AuthorizationViewModel(string challenge, string pollUrl, string resolutionUrl)
+        public PresentationRequest PresentationRequest { get; }
+
+        public AuthorizationViewModel(string challenge, string pollUrl, string resolutionUrl, PresentationRequest presentationRequest = null)
         {
             Challenge = challenge;
             PollUrl = pollUrl;
             ResolutionUrl = resolutionUrl;
+            PresentationRequest = presentationRequest;
             Interval = 2000;
         }
     }

oidc-controller/src/VCAuthn/IdentityServer/Endpoints/AuthorizationEndpoint/AuthorizeEndpoint.cs

@@ -165,7 +165,7 @@ public async Task<IEndpointResult> ProcessAsync(HttpContext context)
                 {
                     PresentationRequestId = presentationRequestId,
                     PresentationRecordId = presentationRecordId,
-                    PresentationRequest = presentationRequest.Request.ExtractIndyPresentationPequest().ToJson(),
+                    PresentationRequest = presentationRequest.Request.ExtractIndyPresentationRequest().ToJson(),
                     RequestParameters = values.AllKeys.ToDictionary(t => t, t => values[t])
                 });
 
@@ -182,7 +182,9 @@ public async Task<IEndpointResult> ProcessAsync(HttpContext context)
                 new AuthorizationViewModel(
                     shortUrl,
                     $"{_options.PublicOrigin}/{IdentityConstants.ChallengePollUri}?{IdentityConstants.ChallengeIdQueryParameterName}={presentationRequestId}",
-                    $"{_options.PublicOrigin}/{IdentityConstants.AuthorizeCallbackUri}?{IdentityConstants.ChallengeIdQueryParameterName}={presentationRequestId}"));
+                    $"{_options.PublicOrigin}/{IdentityConstants.AuthorizeCallbackUri}?{IdentityConstants.ChallengeIdQueryParameterName}={presentationRequestId}",
+                    presentationRequest.Request.ExtractIndyPresentationRequest()
+                ));
         }
 
         private PresentationRequestMessage BuildPresentationRequest(CreatePresentationResponse response, WalletPublicDid acapyPublicDid)

oidc-controller/src/VCAuthn/Utils/PresentationRequestUtils.cs

@@ -56,15 +56,15 @@ public static List<PresentationAttachment> GeneratePresentationAttachments(this
         /// is identified by <c>"@id": "libindy-request-presentation-0"</c>, as specified in the Aries RFC 0037.
         /// <see cref="https://github.com/hyperledger/aries-rfcs/tree/master/features/0037-present-proof#request-presentation"/> 
         /// </summary>
-        public static PresentationRequest ExtractIndyPresentationPequest(this List<PresentationAttachment> presentationAttachments)
+        public static PresentationRequest ExtractIndyPresentationRequest(this List<PresentationAttachment> presentationAttachments)
         {
             PresentationRequest presentationRequest = null;
 
             presentationAttachments.ForEach(delegate(PresentationAttachment attachment)
             {
                 if (attachment.Id.Equals("libindy-request-presentation-0"))
                 {
-                    // found first indy presentation attachment, deserialize it so thatit can be returned
+                    // found first indy presentation attachment, deserialize it so that it can be returned
                     presentationRequest = attachment.Data["base64"].toPresentationRequestObject();
                 }
             });

oidc-controller/src/VCAuthn/VCAuthn.csproj

@@ -6,7 +6,7 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="IdentityServer4" Version="2.5.1" />
+    <PackageReference Include="IdentityServer4" Version="2.5.4" />
     <PackageReference Include="IdentityServer4.EntityFramework" Version="2.5.1" />
     <PackageReference Include="Microsoft.AspNetCore.App" />
     <PackageReference Include="Microsoft.AspNetCore.Razor.Design" Version="2.2.0" PrivateAssets="All" />
@@ -15,6 +15,7 @@
     <PackageReference Include="Swashbuckle.AspNetCore.Swagger" Version="4.0.1" />
     <PackageReference Include="Swashbuckle.AspNetCore.SwaggerGen" Version="4.0.1" />
     <PackageReference Include="Swashbuckle.AspNetCore.SwaggerUi" Version="4.0.1" />
+    <PackageReference Include="QRCoder" Version="1.3.6" />
   </ItemGroup>
 
   <ItemGroup>

oidc-controller/src/VCAuthn/Views/Authorize/Authorize.cshtml

@@ -4,54 +4,97 @@
     var txtUri = $"{Model.Challenge}"; 
     var qrUri = $"https://chart.googleapis.com/chart?cht=qr&chs=300x300&chld=L|0&chl={Uri.EscapeDataString(Model.Challenge)}";
 }
-<span>
-  <input id="pollInterval" value="@Model.Interval" style="display: none" />
-  <input id="pollUrl" value="@Model.PollUrl" style="display: none" />
-  <input id="resolutionUrl" value="@Model.ResolutionUrl" style="display: none" />
-
-  <div class="container">
-    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="704.094" height="441" viewBox="0 0 704.094 441">
-        <g id="Symbol_3_9" data-name="Symbol 3 – 9" transform="translate(-158.5 -31)">
-          <g id="Group_28" data-name="Group 28" transform="translate(-1 -8)">
-            <g id="Group_26" data-name="Group 26" transform="translate(112)">
-              <g id="iphone_6:7_black" data-name="iphone 6:7 black" transform="translate(2333.094 909) rotate(90)">
-                <rect id="Rectangle_1" data-name="Rectangle 1" width="325" height="703.094" rx="58" transform="translate(-808 1582)" fill="#fff" stroke="#707070" stroke-width="1"/>
-                <rect id="IMG_4428" width="301.671" height="536.572" rx="4" stroke-width="1" fill="#fff" stroke="#707070" transform="translate(-795.933 1663.25)"/>
-              </g>
-            </g>
-          </g>
-        </g>
-        <image id="frame" width="288" height="288" transform="translate(209.5 76)" xlink:href="@qrUri"/>
-      </svg>    
-      <a href="@txtUri">@txtUri</a>
+  <div>
+    <!-- These fields are used by the script at the bottom of the page -->
+    <input id="pollInterval" value="@Model.Interval" style="display: none" />
+    <input id="pollUrl" value="@Model.PollUrl" style="display: none" />
+    <input id="resolutionUrl" value="@Model.ResolutionUrl" style="display: none" />
   </div>
-</span>
 
-<button class="back" onclick="history.back(-1)">
-  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
-</button>
+
+  <div class="content">
+
+    <div class="introduction">
+      <h2>
+        Please scan the QR code to initiate the <strong>Verifiable Credential</strong> exchange
+      </h2>
+    </div>
+
+    <div class="qr-code-display">
+      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 700 400">
+        <image id="frame" width="300" height="300" transform="translate(209.5 76)" xlink:href="@qrUri"/>
+      </svg>
+      <span>
+        <a class="qr-url" href="@txtUri">@txtUri</a>
+      </span>
+    </div>
+
+    <div class="presentation-restrictions">
+      <p>
+        The credential must meet the following requirements:
+      </p>
+
+      <div class="requested-claims">
+        @{
+          foreach (var item in Model.PresentationRequest.RequestedAttributes)
+          {
+            <div class="claim-group">
+              <span class="claim-name">Claim Name:</span> <span class="claim-value">@item.Value.Name</span>
+              <br/>
+              <span class="claim-restrictions-title">Claim restrictions:</span>
+              <ul class="claim-restriction-list">
+                @{
+                  foreach (var restriction in item.Value.Restrictions) {
+                    if (!String.IsNullOrEmpty(@restriction.IssuerDid)) {
+                      @:<li class="restriction-item">Issuer DID: <span class="claim-value">@restriction.IssuerDid</span></li>
+                    }
+                    if (!String.IsNullOrEmpty(@restriction.SchemaId)) {
+                      @:<li class="restriction-item">Schema Id: <span class="claim-value">@restriction.SchemaId</span></li>
+                    }
+                    if (!String.IsNullOrEmpty(@restriction.SchemaIssuerDid)) {
+                      @:<li class="restriction-item">Schema Issuer DID: <span class="claim-value">@restriction.SchemaIssuerDid</span></li>
+                    }
+                    if (!String.IsNullOrEmpty(@restriction.SchemaName)) {
+                      @:<li class="restriction-item">Schema Name: <span class="claim-value">@restriction.SchemaName</span></li>
+                    }
+                    if (!String.IsNullOrEmpty(@restriction.SchemaVersion)) {
+                      @:<li class="restriction-item">Schema Version: <span class="claim-value">@restriction.SchemaVersion</span></li>
+                    }
+                    if (!String.IsNullOrEmpty(@restriction.CredentialDefinitionId)) {
+                      @:<li class="restriction-item">Credential Definition Id: <span class="claim-value">@restriction.CredentialDefinitionId</span></li>
+                    }
+                  }
+                }
+              </ul>
+            </div>
+          }
+        }
+      </div>
+    </div>
+
+  </div>
 
 <style>
   * {
     box-sizing: border-box;
   }
 
   body {
-    background: #333132;
-    padding: 0;
+    background: #fff;
+    padding: 5px;
     margin: 0;
     border:0;
-    height: 100vh;
   }
 
-  .container {
+  .content {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    padding-top: 12px;
-    height: 100vh;
-    width: 100vw;
+    padding: 12px;
+    background-color: slategrey;
+    border: 1px solid navy;
+    border-radius: 15px;
   }
 
   .back {
@@ -63,6 +106,44 @@
     width: 64px;
     height: 64px;
   }
+
+  .introduction {
+    text-align: center;
+  }
+
+  .claim-value {
+    font-style: italic;
+    font-weight: lighter;
+  }
+
+  .claim-restriction-list {
+    list-style: upper-roman;
+  }
+
+  .claim-group:nth-child(n+2) {
+    border-top: 1px black dotted;
+  }
+
+  .requested-claims {
+    background-color: ghostwhite;
+    padding: 5px;
+  }
+
+  .qr-code-display {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    word-break: break-all;
+    overflow-wrap: break-word;
+  }
+
+  .qr-url {
+    color: navy;
+  }
+
+  .presentation-restrictions {
+    margin-top: 50px;
+  }
 </style>
 
 <script type="text/javascript">