Image of VC is not displayed and several other issues with the implementation of the "display" json object of the issuer metadata

[ThierryThevenet]

try TestCredential and TestCredential2 with OIDC4VCI test 4

the rule seems not to be clear

1. wallet must select the json object in the display array of the issuer metadata according the locale attribute and phone language. If no locale match take the one without local attribute.

example of a display array in the issuer metadata:

"display": [
                    {
                        "name": "DBC Guest (DIIP)",
                        "description": "The DBC Guest credential is a DIIP example.",
                        "background_color": "#3B6F6D",
                        "text_color": "#FFFFFF",
                        "logo": {
                            "uri": "https://dutchblockchaincoalition.org/assets/images/icons/Logo-DBC.png",
                            "alt_text": "An orange block shape, with the text Dutch Blockchain Coalition next to it, portraying the logo of the Dutch Blockchain Coalition.",
                        },
                        "background_image": {
                            "uri": "https://i.ibb.co/CHqjxrJ/dbc-card-hig-res.png",
                            "alt_text": "Connected open cubes in blue with one orange cube as a background of the card",
                        },
                    },
                    {
                        "locale": "en-US",
                        "name": "DBC Guest (DIIP)",
                        "description": "The DBC guest credential is a DIIP example.",
                        "background_color": "#3B6F6D",
                        "text_color": "#FFFFFF",
                        "logo": {
                            "uri": "https://dutchblockchaincoalition.org/assets/images/icons/Logo-DBC.png",
                            "alt_text": "An orange block shape, with the text Dutch Blockchain Coalition next to it, portraying the logo of the Dutch Blockchain Coalition.",
                        },
                        "background_image": {
                            "uri": "https://i.ibb.co/CHqjxrJ/dbc-card-hig-res.png",
                            "alt_text": "Connected open cubes in blue with one orange cube as a background of the card",
                        },
                    },
                    {
                        "locale": "nl-NL",
                        "name": "DBC gast (DIIP)",
                        "description": "De DBC gast credential is een DIIP voorbeeld.",
                        "background_color": "#3B6F6D",
                        "text_color": "#FFFFFF",
                        "logo": {
                            "uri": "https://dutchblockchaincoalition.org/assets/images/icons/Logo-DBC.png",
                            "alt_text": "Aaneengesloten open blokken in de kleur blauw, met een blok in de kleur oranje, die tesamen de achtergrond van de kaart vormen.",
                        },
                        "background_image": {
                            "uri": "https://i.ibb.co/CHqjxrJ/dbc-card-hig-res.png",
                            "alt_text": "Connected open cubes in blue with one orange cube as a background of the card",
                        },
                    },
                ],

2. within the json objects, wallet must display :

• background_image must be displayed, if not present take background_color, if not present take the default blue

• logo is optional, add logo if exists

• name is optional , add name if existe otherwise take the VC name. use text color. if not present use white color

• description is optional add if exists, use text color and same of not present

Currently the background image is not displayed and there are several issues as name and description are not displayed and there are some hard coded value as dummy3 and the Talao logo ????

the VC display must be the same when wallet request consent from user and after VC has been issued (except for issuance date and expiration date)

Specifications to read :

display: OPTIONAL. Array of objects, where each object contains the display properties of the supported Credential for a certain language. Below is a non-exhaustive list of parameters that MAY be included.
name: REQUIRED. String value of a display name for the Credential.
locale: OPTIONAL. String value that identifies the language of this object represented as a language tag taken from values defined in BCP47 [[RFC5646](https://openid.net/specs/openid-4-verifiable-credential-issuance-1_0-ID1.html#RFC5646)]. Multiple display objects MAY be included for separate languages. There MUST be only one object for each language identifier.

logo: OPTIONAL. Object with information about the logo of the Credential. The following non-exhaustive set of parameters MAY be included:
uri: REQUIRED. String value that contains a URI where the Wallet can obtain the logo of the Credential from the Credential Issuer. The Wallet needs to determine the scheme, since the URI value could use the https: scheme, the data: scheme, etc.
alt_text: OPTIONAL. String value of the alternative text for the logo image. description: OPTIONAL. String value of a description of the Credential. background_color: OPTIONAL. String value of a background color of the Credential represented as numerical color values defined in CSS Color Module Level 37 [[CSS-Color](https://openid.net/specs/openid-4-verifiable-credential-issuance-1_0-ID1.html#CSS-Color)].

background_image: OPTIONAL. Object with information about the background image of the Credential. At least the following parameter MUST be included:
uri: REQUIRED. String value that contains a URI where the Wallet can obtain the background image of the Credential from the Credential Issuer. The Wallet needs to determine the scheme, since the URI value could use the https: scheme, the data: scheme, etc.
text_color: OPTIONAL. String value of a text color of the Credential represented as numerical color values defined in CSS Color Module Level 37 [[CSS-Color](https://openid.net/specs/openid-4-verifiable-credential-issuance-1_0-ID1.html#CSS-Color)].

[ThierryThevenet]

Below TestCredential and TestCredential2 from OIDC4VCI test 4

several issues

• "dummy3" shoudl not be displayed in TestCredential during the flow
• Talao logo should not be diisplayed in TestCredential2
• Talao issuer shoudl not be displayed in TestCredential2
• name and description in TestCtredential2 are not displayed

below the metadata

"TestCredential": {
                "format": "jwt_vc_json",
                "scope": "TestCredential_scope",
                "credential_definition": {
                    "type": ["VerifiableCredential", "TestCredential"]
                },
                "cryptographic_binding_methods_supported": [
                    "did:jwk",
                    "did:key"
                ],
                "proof_types_supported": {
                    "jwt": {
                        "proof_signing_alg_values_supported": ["ES256"]
                    }
                },
                "credential_signing_alg_values_supported": [
                    "ES256K",
                    "ES256",
                    "EdDSA",
                ],
                "display": [
                    {
                        "text_color": "#FFFFFF",
                        "locale": "en-US",
                        "background_image": {
                            "uri": "https://vpid.talao.co/accounts/vpid-credential.png",
                            "alt_text": "Image of a VPID",
                        },
                    }
                ]
            },
            "TestCredential2": {
                "format": "jwt_vc_json",
                "scope": "TestCredential_scope",
                "credential_definition": {
                    "type": ["VerifiableCredential", "TestCredential2"]
                },
                "cryptographic_binding_methods_supported": [
                    "did:jwk",
                    "did:key"
                ],
                "proof_types_supported": {
                    "jwt": {
                        "proof_signing_alg_values_supported": ["ES256"]
                    }
                },
                "credential_signing_alg_values_supported": [
                    "ES256K",
                    "ES256",
                    "EdDSA",
                ],
                "display": [
                    {
                        "name": "Test Credential 2 ",
                        "description": "This is a test",
                        "background_color": "#3BVF6D",
                        "text_color": "#FFFFFF",
                    }
                ]

        },

[ThierryThevenet]

other examples of display attribute

Here

• background_color is only used of the background_image cannot be displayed. In that case the alt_text is displayed
• there are different objects for different locale attribute. The first one has no locale, it must be used when language does not fit with phone

 "display": [
                    {
                        "name": "DBC Guest (DIIP)",
                        "description": "The DBC Guest credential is a DIIP example.",
                        "background_color": "#3B6F6D",
                        "text_color": "#FFFFFF",
                        "logo": {
                            "uri": "https://dutchblockchaincoalition.org/assets/images/icons/Logo-DBC.png",
                            "alt_text": "An orange block shape, with the text Dutch Blockchain Coalition next to it, portraying the logo of the Dutch Blockchain Coalition.",
                        },
                        "background_image": {
                            "uri": "https://i.ibb.co/CHqjxrJ/dbc-card-hig-res.png",
                            "alt_text": "Connected open cubes in blue with one orange cube as a background of the card",
                        },
                    },
                    {
                        "locale": "en-US",
                        "name": "DBC Guest (DIIP)",
                        "description": "The DBC guest credential is a DIIP example.",
                        "background_color": "#3B6F6D",
                        "text_color": "#FFFFFF",
                        "logo": {
                            "uri": "https://dutchblockchaincoalition.org/assets/images/icons/Logo-DBC.png",
                            "alt_text": "An orange block shape, with the text Dutch Blockchain Coalition next to it, portraying the logo of the Dutch Blockchain Coalition.",
                        },
                        "background_image": {
                            "uri": "https://i.ibb.co/CHqjxrJ/dbc-card-hig-res.png",
                            "alt_text": "Connected open cubes in blue with one orange cube as a background of the card",
                        },
                    },
                    {
                        "locale": "nl-NL",
                        "name": "DBC gast (DIIP)",
                        "description": "De DBC gast credential is een DIIP voorbeeld.",
                        "background_color": "#3B6F6D",
                        "text_color": "#FFFFFF",
                        "logo": {
                            "uri": "https://dutchblockchaincoalition.org/assets/images/icons/Logo-DBC.png",
                            "alt_text": "Aaneengesloten open blokken in de kleur blauw, met een blok in de kleur oranje, die tesamen de achtergrond van de kaart vormen.",
                        },
                        "background_image": {
                            "uri": "https://i.ibb.co/CHqjxrJ/dbc-card-hig-res.png",
                            "alt_text": "Connected open cubes in blue with one orange cube as a background of the card",
                        },
                    },
                ],

[ThierryThevenet]

see problem on slack @bibash28