Learn how to build an application that can present an mDoc remotely

• Supported iOS device to run the built application on, setup with:
  • Biometric authentication (Face ID, Touch ID).
  • Available internet connection.

1. Open the Xcode project with the application built in the Claim a credential tutorial.

2. Register mdoc-openid4vp as a recognized URL scheme:

   • Open the project view and select your application target.
   • Select the Info tab.
   • Scroll down and expand the URL Types area.
   • Select the plus button.
   • Insert mdoc-openid4vp in both the Identifier and URL Schemes fields.

   

3. Run the app and then close it (this updates the app on your testing device) and perform the following instructions:

   • Use a desktop browser to navigate to the MATTR Labs remote presentation testing tool.
   • Select OID4VP (Redirect) from the Select Experience list.
   • Select Request credentials.
   • Open the camera on your testing mobile device and scan the QR code.
   • Confirm opening the QR code with your tutorial application.
   • The tutorial application should be launched on your testing mobile device.

1. In your project's ContentView file, add the following code under the // Online Presentation - Step 2.1: Create a variable to hold the online presentation session object comment to create a variable that will hold the online presentation session:

   var onlinePresentationSession: OnlinePresentationSession?

2. Add the following code under the // Proximity and Online Presentation: Create variables for credential presentations comment to create the following variables:

       var matchedCredentials: [MobileCredential] = []
       var matchedMetadata: [MobileCredentialMetadata] = []
       var credentialRequest: [MobileCredentialRequest] = []

   • matchedCredentials : Holds stored credentials that match the credential request.
   • matchedMetadata : Holds metadata of credentials that match the credential request.
   • credentialRequest: Holds the credentials that were requested for verification.

3. Replace the print statement under the // Online Presentation - Step 2.3: Create online presentation session comment with the following code to create a function that calls the SDK's createOnlinePresentationSession method with the authorizationRequestURI parameter (the request URI retrieved from the link/QR code):

       Task {
           do {
               onlinePresentationSession = try await mobileCredentialHolder.createOnlinePresentationSession(authorizationRequestUri: authorizationRequestURI, requireTrustedVerifier: false)
               let matched = onlinePresentationSession?.getMatchedCredentials() ?? []
               matchedMetadata = matched
                   .flatMap { $0.matchedMobileCredentials }
   
               credentialRequest = matched
                   .map { $0.request }
           } catch {
               print(error.localizedDescription)
           }
       }

   This function:

   • Creates an OnlinePresentationSession instance and assigns it to the onlinePresentationSession variable.
   • Stores matched MobileCredentialMetadata in the matchedMetadata variable and the MobileCredentialRequest in the credentialRequest variable in our ViewModel to enable displaying these values to the user.

4. Add the following code under the // Online Presentation - Step 2.4: Create session from request URI comment to add an onOpenURL modifier that will call the createOnlinePresentationSession function when the application is launched following selecting a link (same-device flow) or scanning a QR code (cross-device flow) that includes a registered URI:

       .onOpenURL { url in
           Task {
               await viewModel.createOnlinePresentationSession(authorizationRequestURI: url.absoluteString)
           }
           // Navigate to online presentation view
           viewModel.navigationPath.append(NavigationState.onlinePresentation)
       }

   Now, once a user opens an online presentation link on their device, an online presentation session will be created the user will be navigated to a new view, which you will implement in the next step.

1. Replace the print statement under the // Proximity and Online Presentation: Retrieve a credential from storage comment with the following code create a function that uses the SDK's getCredential method to retrieve a credential from the application storage:

       Task {
           do {
               let credential = try await mobileCredentialHolder.getCredential(credentialId: id)
               matchedCredentials.append(credential)
           } catch {
               print(error)
           }
       }

   The MobileCredentialMetadata object does not include the values of claims included in the credential. To display these values, the above function calls the SDK's getCredential method with the id property of the MobileCredentialMetadata.

2. Create a new file called PresentCredentialsView.swift and paste the following code to create a view to display credential requests and matching credentials stored in the application:

   import MobileCredentialHolderSDK
   import SwiftUI
   
   struct PresentCredentialsView: View {
       var viewModel: PresentCredentialsViewModel
       @State var selectedID: String?
   
       var body: some View {
           ScrollView {
               VStack(alignment: .leading, spacing: 20) {
                   Text("Requested Documents")
                       .font(.headline)
                       .padding(.leading)
   
                   ForEach(viewModel.requestedDocuments, id: \.docType) { requestedDocument in
                       DocumentView(viewModel: DocumentViewModel(from: requestedDocument))
                   }
   
                   Text("Matched Credentials")
                       .font(.headline)
                       .padding(.leading)
   
                   ForEach(viewModel.matchedMetadata, id: \.id) { matchedMetadata in
                       VStack(alignment: .leading, spacing: 10) {
                           if let matchedCredential = viewModel.matchedMobileCredential(id: matchedMetadata.id) {
                               DocumentView(viewModel: DocumentViewModel(from: matchedCredential))
                                   .padding(.vertical)
                                   .background(selectedID == matchedMetadata.id ? Color.blue.opacity(0.2) : Color.clear)
                                   .onTapGesture {
                                       guard selectedID != matchedMetadata.id else {
                                           selectedID = nil
                                           return
                                       }
                                       selectedID = matchedMetadata.id
                                   }
                               Button("Hide claim values") {
                                   viewModel.matchedCredentials.removeAll(where: { $0.id == matchedMetadata.id })
                               }
                               .frame(maxWidth: .infinity, alignment: .center)
                           } else {
                               DocumentView(viewModel: DocumentViewModel(from: matchedMetadata))
                                   .padding(.vertical)
                                   .background(selectedID == matchedMetadata.id ? Color.blue.opacity(0.2) : Color.clear)
                                   .onTapGesture {
                                       guard selectedID != matchedMetadata.id else {
                                           selectedID = nil
                                           return
                                       }
                                       selectedID = matchedMetadata.id
                                   }
                               Button("Show claim values") {
                                   viewModel.getCredentialAction(matchedMetadata.id)
                               }
                               .frame(maxWidth: .infinity, alignment: .center)
                           }
                       }
                   }
               }
           }
           if selectedID != nil {
               Button("Send Response") {
                   viewModel.sendCredentialAction(selectedID!)
               }
               .buttonStyle(.borderedProminent)
               .clipShape(Capsule())
               .frame(maxWidth: .infinity, alignment: .center)
           }
       }
   }
   
   // MARK: PresentCredentialsViewModel
   
   class PresentCredentialsViewModel {
       @Binding var requestedDocuments: [MobileCredentialRequest]
       @Binding var matchedCredentials: [MobileCredential]
       @Binding var matchedMetadata: [MobileCredentialMetadata]
   
       var getCredentialAction: (String) -> Void
       var sendCredentialAction: (String) -> Void
   
       init(
           requestedDocuments: Binding<[MobileCredentialRequest]>,
           matchedCredentials: Binding<[MobileCredential]>,
           matchedMetadata: Binding<[MobileCredentialMetadata]>,
           sendCredentialAction: @escaping (String) -> Void,
           getCredentialAction: @escaping (String) -> Void
       ) {
           self._requestedDocuments = requestedDocuments
           self._matchedCredentials = matchedCredentials
           self._matchedMetadata = matchedMetadata
           self.sendCredentialAction = sendCredentialAction
           self.getCredentialAction = getCredentialAction
       }
   
       func matchedMobileCredential(id: String) -> MobileCredential? {
           matchedCredentials.first(where: { $0.id == id })
       }
   }

   The PresentCredentialsView view is used to:

   • Display requested information.
   • Display stored credentials that include the requested information.
   • Enable the user to provide consent to sharing the requested information with the verifier.

   The PresentCredentialsViewModel object is used to reference values from a credential request. It takes two closures in its initializer:

   • getCredentialAction: (String) -> Void is used to display claim values.
   • sendCredentialAction: (String) -> Void is used to send a credential response to the verifier once the user selected a credential and provided consent by selecting the Send Response button.

3. Back in your ContentView file, Replace EmptyView under the // Online Presentation - Step 3.3: Display online presentation view comment with the new view that you created:

    PresentCredentialsView(
        viewModel: PresentCredentialsViewModel(
            requestedDocuments: $viewModel.credentialRequest,
            matchedCredentials: $viewModel.matchedCredentials,
            matchedMetadata: $viewModel.matchedMetadata,
            sendCredentialAction: viewModel.sendOnlinePresentationSessionResponse(id:),
            getCredentialAction: viewModel.getCredential(id:)
        )
    )

4. Replace the return false statement under the // Online Presentation - Step 3.4: View Online Presentation comment with the following code to enable the user to manually navigate to the presentation session view if required:

    onlinePresentationSession != nil

5. Run the app and then close it (this updates the app on your testing device) and perform the following instructions:
   • Use a desktop browser to navigate to the MATTR Labs remote presentation testing tool.
   • Select OID4VP (Redirect) from the Select Experience list.
   • Select Request credentials.
   • Open the camera on your testing mobile device and scan the QR code.
   • Confirm opening the QR code with your tutorial application.
   • The tutorial application should be launched on your testing mobile device, displaying the verification request and any matching credentials.
   • When a credential is selected, it will be highlighted and a Send Response button will appear (the logic associated with the button will be implemented in the next step).

The result will look something like this:

1. Replace the print statement under the // Online Presentation - Step 4.1: Send online presentation response comment with the following code to call the sendResponse method when the user selects the Send Response button:

        Task {
            do {
                _ = try await onlinePresentationSession?.sendResponse(credentialIds: [id])
                // set presentation session to nil after sending a response
                onlinePresentationSession = nil
                // Return to root view after the response is sent
                navigationPath = NavigationPath()
            } catch {
                print(error)
            }
        }