Add option for Get or Post JAR method on Init Transaction (#139)

* Initial implementation

* Renamed jar_method to request_uri_method

Author: gdimtsas

src/app/core/models/InitializedTransaction.ts

@@ -1,5 +1,6 @@
 export type InitializedTransaction = {
   client_id: string,
   request_uri: string,
+  request_uri_method: 'get' | 'post',
   transaction_id: string
 }

src/app/core/models/TransactionInitializationRequest.ts

@@ -8,6 +8,7 @@ export type TransactionInitializationRequest =
 export type BaseTransactionInitializationRequest = {
   type: 'id_token' | 'vp_token' | 'vp_token id_token';
   nonce: string;
+  request_uri_method: 'get' | 'post';
 };
 
 export type PresentationQuery =

src/app/core/services/dcql-service.ts

@@ -20,14 +20,15 @@ import {
 export class DCQLService {
   dcqlPresentationRequest(
     selectedAttestations: AttestationSelection[],
-    selectedAttributes: { [id: string]: string[] }
+    selectedAttributes: { [id: string]: string[] },
+    selectedRequestUriMethod: 'get' | 'post'
   ): DCQLTransactionRequest {
     let dcqlQueries: CredentialQuery[] = selectedAttestations.map(
       (attestation, index) =>
         this.dcqlQueryOf(
           `query_${index}`,
           attestation.type,
-          attestation.format!!,
+          attestation.format!,
           attestation.attributeSelectionMethod ===
             AttributeSelectionMethod.ALL_ATTRIBUTES
             ? []
@@ -38,9 +39,10 @@ export class DCQLService {
     return {
       type: 'vp_token',
       dcql_query: {
-        credentials: dcqlQueries!,
+        credentials: dcqlQueries,
       },
       nonce: uuidv4(),
+      request_uri_method: selectedRequestUriMethod,
     };
   }
 

src/app/core/services/presentation-definition-service.ts

@@ -28,7 +28,8 @@ export class PresentationDefinitionService {
   presentationDefinitionRequest(
     selectedAttestations: AttestationSelection[],
     selectedAttributes: { [id: string]: string[] },
-    vpFormatsPerType: { [key: string]: SdJwtVcVpFormat | MsoMdocVpFormat }
+    vpFormatsPerType: { [key: string]: SdJwtVcVpFormat | MsoMdocVpFormat },
+    selectedRequestURIMethod: 'get' | 'post'
   ): PresentationDefinitionTransactionRequest {
     let inputDescriptors: InputDescriptor[] = [];
 
@@ -56,9 +57,10 @@ export class PresentationDefinitionService {
       type: 'vp_token',
       presentation_definition: {
         id: uuidv4(),
-        input_descriptors: inputDescriptors!,
+        input_descriptors: inputDescriptors,
       },
       nonce: uuidv4(),
+      request_uri_method: selectedRequestURIMethod,
     };
   }
 

src/app/features/invoke-wallet/components/qr-code/qr-code.component.ts

@@ -80,7 +80,7 @@ export class QrCodeComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.transaction = JSON.parse(
-      this.localStorageService.get(ACTIVE_TRANSACTION)!!
+      this.localStorageService.get(ACTIVE_TRANSACTION)!
     );
     if (!this.transaction) {
       this.navigateService.goHome();
@@ -134,8 +134,8 @@ export class QrCodeComponent implements OnInit, OnDestroy {
     return concludedTransaction;
   }
 
-  private buildQrCode(data: { client_id: string, request_uri: string, transaction_id: string }): string {
-    return `${this.scheme}?client_id=${encodeURIComponent(data.client_id)}&request_uri=${encodeURIComponent(data.request_uri)}`;
+  private buildQrCode(data: { client_id: string, request_uri: string, request_uri_method: 'get' | 'post', transaction_id: string }): string {
+    return `${this.scheme}?client_id=${encodeURIComponent(data.client_id)}&request_uri=${encodeURIComponent(data.request_uri)}&request_uri_method=${encodeURIComponent(data.request_uri_method)}`;
   }
 
   openLogs() {

src/app/features/presentation-request-preparation/components/attribute-selection/attribute-selection.component.ts

@@ -67,7 +67,6 @@ export class AttributeSelectionComponent implements OnChanges {
   }
 
   private updateSelectionMap(dialogResult: DialogResult) {
-    console.log("Dialog result: ", dialogResult);
     if (dialogResult.selectedFields.length > 0) {
       this.selectedFieldsByType[dialogResult.attestationType as string] = dialogResult.selectedFields;
     } else {

src/app/features/presentation-request-preparation/components/selectable-attestation-attributes/selectable-attestation-attributes.component.ts

@@ -61,7 +61,6 @@ export class SelectableAttestationAttributesComponent implements OnInit {
 
   handle(data: FormSelectableField) {
     const value = data.value;
-    console.log('Selected field: ', value);
     if (!this.exists(value)) {
       this.selectedFields.push(value);
     } else if (this.exists(value)) {

src/app/features/presentation-request-preparation/home/home.component.html

@@ -34,16 +34,31 @@ <h4>Define your presentation request</h4>
 
         <mat-step>
           <div style="padding-top: 10px">
-            <ng-template matStepLabel>...select presentation query type and submit</ng-template>
+            <ng-template matStepLabel>...select request options and submit</ng-template>
 
-            <div class="query-type-container">
+            <div class="config-option-container">
+              <div class="config-option-label">
+                Presentation Query Type
+              </div>
               <mat-button-toggle-group [formControl]="queryTypeControl" 
                 (valueChange)="handleQueryTypeChangedEvent($event)"  
                 aria-label="Presentation query type" >
                 <mat-button-toggle value="prex">Presentation Exchange</mat-button-toggle>
                 <mat-button-toggle value="dcql">DCQL</mat-button-toggle>
               </mat-button-toggle-group>
             </div>
+            
+            <div class="config-option-container">
+              <div class="config-option-label">
+                Request URI Method
+              </div>
+              <mat-button-toggle-group [formControl]="requestUriMethodControl" 
+                (valueChange)="handleRequestUriMethodChangedEvent($event)"  
+                aria-label="Request URI Method" >
+                <mat-button-toggle value="get">Get</mat-button-toggle>
+                <mat-button-toggle value="post">Post</mat-button-toggle>
+              </mat-button-toggle-group>
+            </div>
 
             <mat-expansion-panel>
 

src/app/features/presentation-request-preparation/home/home.component.scss

@@ -15,8 +15,12 @@
     }
   }
 
-  .query-type-container {
-    margin-bottom: 10px
+  .config-option-container {
+    margin-bottom: 16px;
+
+    .config-option-label {
+      margin-bottom: 8px;
+    }
   }
 
   span#as-pre {

src/app/features/presentation-request-preparation/home/home.component.ts

@@ -68,19 +68,22 @@ export class HomeComponent implements OnInit, OnDestroy {
   actions: BodyAction[] = HOME_ACTIONS;
 
   queryTypeControl = new FormControl('prex');
+  requestUriMethodControl = new FormControl('get');
 
-  private _formBuilder = inject(FormBuilder);
+
+  private readonly _formBuilder = inject(FormBuilder);
   formGroup = this._formBuilder.group({
     selectAttestationCtrl: ['', Validators.required],
   });
 
   selectedAttestations: AttestationSelection[] | null = null;
   selectedAttributes: { [id: string]: string[] } | null = null;
   selectedPresentationType: 'dcql' | 'prex' = 'prex';
+  selectedRequestUriMethod: 'get' | 'post' = 'get';
 
   initializationRequest: TransactionInitializationRequest | null = null;
 
-  private destroy$ = new Subject<void>();
+  private readonly destroy$ = new Subject<void>();
   vpFormatsPerType: { [key: string]: SdJwtVcVpFormat | MsoMdocVpFormat } = {};
 
   ngOnInit(): void {
@@ -113,7 +116,8 @@ export class HomeComponent implements OnInit, OnDestroy {
       this.initializationRequest = this.prepareInitializationRequest(
         this.selectedPresentationType,
         this.selectedAttestations!,
-        this.selectedAttributes
+        this.selectedAttributes,
+        this.selectedRequestUriMethod
       );
     } else {
       this.selectedAttributes = null;
@@ -126,8 +130,24 @@ export class HomeComponent implements OnInit, OnDestroy {
     if (this.selectedAttestations && this.selectedAttributes) {
       this.initializationRequest = this.prepareInitializationRequest(
         this.selectedPresentationType,
-        this.selectedAttestations!,
-        this.selectedAttributes
+        this.selectedAttestations,
+        this.selectedAttributes,
+        this.selectedRequestUriMethod
+      );
+    } else {
+      this.initializationRequest = null;
+    }
+  }
+  
+  handleRequestUriMethodChangedEvent($event: string) {
+    this.selectedRequestUriMethod = $event as 'get' | 'post';
+    
+    if (this.selectedAttestations && this.selectedAttributes) {
+      this.initializationRequest = this.prepareInitializationRequest(
+        this.selectedPresentationType,
+        this.selectedAttestations,
+        this.selectedAttributes,
+        this.selectedRequestUriMethod
       );
     } else {
       this.initializationRequest = null;
@@ -137,12 +157,13 @@ export class HomeComponent implements OnInit, OnDestroy {
   private prepareInitializationRequest(
     presentationQueryType: 'dcql' | 'prex',
     selectedAttestations: AttestationSelection[],
-    selectedAttributes: { [id: string]: string[] }
+    selectedAttributes: { [id: string]: string[] },
+    selectedRequestUriMethod: 'get' | 'post'
   ): TransactionInitializationRequest {
     if (presentationQueryType === 'dcql') {
-      return this.dcqlService.dcqlPresentationRequest(selectedAttestations, selectedAttributes);
+      return this.dcqlService.dcqlPresentationRequest(selectedAttestations, selectedAttributes, selectedRequestUriMethod);
     } else {
-      return this.presentationDefinitionService.presentationDefinitionRequest(selectedAttestations, selectedAttributes, this.vpFormatsPerType);
+      return this.presentationDefinitionService.presentationDefinitionRequest(selectedAttestations, selectedAttributes, this.vpFormatsPerType, selectedRequestUriMethod);
     }
   }