Cookbook: how we built a web shop with EU wallet log-in, age check and signing

// Settings of the demo shop (CodeB EUDI Gateway on phone.codeb.io)
const CFG = {
  clientId:  'my-shop',                                   // your OpenID Connect client
  issuer:    'https://phone.codeb.io',
  authorize: 'https://phone.codeb.io/oauth2/v1/authorize',
  token:     'https://phone.codeb.io/oidc.ashx?action=token',
  userinfo:  'https://phone.codeb.io/oidc.ashx?action=userinfo',
  acr:       'urn:codeb:acr:eudi-wallet'                  // "signed in with an EU wallet"
};

function b64url(bytes) {
  return btoa(String.fromCharCode(...bytes)).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
}
const rnd = n => b64url(crypto.getRandomValues(new Uint8Array(n)));

async function loginWithWallet() {
  const verifier = rnd(32), state = rnd(16), nonce = rnd(16);
  const hash = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(verifier));
  sessionStorage.setItem('oidc', JSON.stringify({ verifier, state, nonce }));
  const q = new URLSearchParams({
    response_type: 'code', client_id: CFG.clientId,
    redirect_uri: location.origin + location.pathname,
    scope: 'openid profile', state, nonce,
    code_challenge: b64url(new Uint8Array(hash)), code_challenge_method: 'S256',
    acr_values: CFG.acr, ui_locales: 'en'
  });
  location.assign(CFG.authorize + '?' + q);   // QR code, app button or web wallet: the gateway asks
}

function claims(jwt) {   // payload of the id_token (UTF-8 safe)
  const b = atob(jwt.split('.')[1].replace(/-/g, '+').replace(/_/g, '/'));
  return JSON.parse(new TextDecoder().decode(Uint8Array.from(b, ch => ch.charCodeAt(0))));
}

async function finishLogin() {
  const qs = new URLSearchParams(location.search);
  const p = JSON.parse(sessionStorage.getItem('oidc') || 'null');
  sessionStorage.removeItem('oidc');
  if (qs.get('error')) throw new Error(qs.get('error') + ' ' + (qs.get('error_description') || ''));
  if (!p || qs.get('state') !== p.state) throw new Error('state does not match');

  // Form-encoded POST without other headers = a CORS "simple" request (no preflight).
  const r = await fetch(CFG.token, {
    method: 'POST', credentials: 'omit',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: new URLSearchParams({
      grant_type: 'authorization_code', code: qs.get('code'), client_id: CFG.clientId,
      redirect_uri: location.origin + location.pathname, code_verifier: p.verifier
    })
  });
  if (!r.ok) throw new Error('token: HTTP ' + r.status + ' ' + await r.text());
  const t = await r.json();
  const c = claims(t.id_token);
  const audOk = c.aud === CFG.clientId || (Array.isArray(c.aud) && c.aud.includes(CFG.clientId));
  if (c.iss !== CFG.issuer || !audOk || c.nonce !== p.nonce) throw new Error('id_token');
  if (c.acr !== CFG.acr) throw new Error('not signed in with an EU wallet');
  return t;   // access_token, id_token, expires_in
}

// No Authorization header: the token goes in the form body, so the browser sends no preflight.
const u = await fetch(CFG.userinfo, {
  method: 'POST', credentials: 'omit',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: 'access_token=' + encodeURIComponent(t.access_token)
}).then(r => r.json());
console.log(u.given_name, u.family_name);   // the shop asked for nothing else

const SIGN = 'https://phone.codeb.io/sign-request.ashx';

async function requestSignature(pdf, accessToken) {          // pdf: a Blob
  const fd = new FormData();                                 // multipart: also a "simple" request
  fd.append('access_token', accessToken);
  fd.append('client_id', CFG.clientId);
  fd.append('level', 'advanced');                            // 'qualified' = signature card only
  fd.append('label', 'Order confirmation 4711');
  fd.append('return_uri', location.href);                    // "Back to the website" in the app
  fd.append('file', pdf, 'order-4711.pdf');
  const r = await fetch(SIGN + '?action=create', { method: 'POST', credentials: 'omit', body: fd });
  if (!r.ok) throw new Error('sign-create: HTTP ' + r.status + ' ' + await r.text());
  return r.json();   // { id, link: 'eudi-rqes://…', status_token, expires_in }
}

async function waitForSignedPdf(j) {
  const q = 'id=' + encodeURIComponent(j.id) + '&t=' + encodeURIComponent(j.status_token);
  for (;;) {
    await new Promise(ok => setTimeout(ok, 3000));
    const s = await fetch(SIGN + '?action=status&' + q, { credentials: 'omit', cache: 'no-store' }).then(r => r.json());
    if (s.status === 'signed') return fetch(SIGN + '?action=signed&' + q, { credentials: 'omit' }).then(r => r.blob());
    if (['declined', 'expired', 'withdrawn'].includes(s.status)) throw new Error(s.status);
  }
}

<!-- computer: QR code for the QR scanner in CodeB Wallet; phone: the same link as a button -->
<div id="qr"></div>
<a class="btn" id="open-app">Open CodeB Wallet</a>
<script src="qrcode.js"></script>  <!-- any QR encoder; the demo uses a local copy of an MIT-licensed one -->
<script>
  const q = qrcode(0, 'M'); q.addData(j.link); q.make();
  document.getElementById('qr').innerHTML = q.createSvgTag({ cellSize: 4, margin: 4, scalable: true });
  document.getElementById('open-app').href = j.link;   // eudi-rqes://?client_id=…&request_uri=…
</script>

% An empty signature field (ISO 32000-1, 12.7.4.5): a /Sig widget with a box, no value yet
6 0 obj
<< /Type /Annot /Subtype /Widget /FT /Sig /T (Customer_Signature)
   /Rect [60 180 300 260] /P 3 0 R /F 4 >>
endobj
% the catalog lists the field ...
1 0 obj << /Type /Catalog /Pages 2 0 R /AcroForm << /Fields [6 0 R] >> >> endobj
% ... and the page lists the widget
3 0 obj << /Type /Page /Parent 2 0 R /MediaBox [0 0 595 842]
           /Contents 4 0 R /Resources << ... >> /Annots [6 0 R] >> endobj

Content-Security-Policy: default-src 'none'; script-src 'self'; style-src 'self';
  img-src 'self'; connect-src 'self' https://phone.codeb.io;
  base-uri 'self'; form-action 'none'; frame-ancestors 'none'