Entwickler-Cookbook

10-Minuten-Cookbook für European Digital Identity Wallet Sign-in in Ihrer App.

Sechs Framework-Rezepte für die Client-Seite, drei Stacks für die serverseitige Verifikation. Jedes Snippet kompiliert bzw. parsed eigenständig. Das Widget nutzt dieselben öffentlichen Endpunkte (/oidc.ashx?action=vp-start / vp-status), die auf der Seite EU-Wallet-Integrationen dokumentiert sind. Referenz: docs.eudi.dev.

Umfang. Dokumentierte Rezepte, kein zertifiziertes Widget-SDK. Kein Marketplace-Eintrag. Ehrliche Doku dessen, was Browser und Server tun müssen, um eine Anmeldung mit der European Digital Identity Wallet gegen einen CodeB-Tenant zu akzeptieren.

Rezeptkarten

Vanilla-HTML

Ein <script>-Tag, ein Mount-Div. Läuft auf jeder statischen Seite.

Rezept Download

React

<EudiSignInButton> importieren, onSuccess-Handler übergeben.

Rezept Download

Vue 3

Composition-API-Komponente. Emits: success, error, cancelled.

Rezept Download

Angular

Standalone-Komponente <eudi-sign-in>. Angular 15+.

Rezept Download

WordPress

Shortcode [eudi_signin]. In functions.php einfügen.

Rezept Download

Statische Site / JAMstack

Script-Block einfügen. Kein Build-Schritt. Netlify, Cloudflare Pages, Hugo, Eleventy.

Rezept

Vanilla-HTML Drop-in

Ein Script-Tag auf Ihren CodeB-Tenant zeigen lassen.
Ein Mount-Div mit data-eudi-signin.
Handler onEudiSuccess(claims) definieren.

<div data-eudi-signin data-query="pid-minimal" data-on-success="onEudiSuccess"></div> <script src="https://phone.aloaha.com/signin-widget.js" defer></script> <script> function onEudiSuccess(claims) { // POST claims (oder die Session-ID) an Ihren /login-Handler. console.log('angemeldet mit European Digital Identity Wallet', claims); } </script>

Vollständige MVP-HTML: signin-widget-vanilla.html.

React JSX

import { EudiSignInButton } from './signin-widget-react.jsx'; function LoginPage() { return ( <EudiSignInButton query="pid-minimal" onSuccess={function (claims) { /* Ihr Handler */ }} > Mit European Digital Identity Wallet anmelden </EudiSignInButton> ); }

Download: signin-widget-react.jsx, Hook: verifier-react-hook.jsx.

Vue 3 Composition-API

import { EudiSignIn } from './signin-widget-vue.js'; export default { components: { EudiSignIn }, methods: { onOk(claims){ /* Ihr Handler */ } }, template: '<eudi-sign-in query="pid-minimal" @success="onOk" />' };

Download: signin-widget-vue.js.

Angular Standalone-Komponente

import { EudiSignInComponent } from './signin-widget-angular'; @Component({ standalone: true, imports: [EudiSignInComponent], template: '<eudi-sign-in query="pid-minimal" (success)="onOk($event)"></eudi-sign-in>' }) export class LoginPage { onOk(claims: any){ /* Ihr Handler */ } }

Download: signin-widget-angular.ts.

WordPress Shortcode

wordpress-shortcode-snippet.php in functions.php Ihres aktiven Themes kopieren (oder als mu-Plugin).
Shortcode einsetzen: [eudi_signin query="pid-minimal"].
Optional Settings-Page für Tenant-URL.

Kein Plugin-Binary. Copy-paste-PHP, nichts, was auf WordPress.org als Plugin verteilbar wäre. Lieferung as-is unter Aloaha Limited Copyright, permissive Nutzung.

Statische Site / JAMstack kein Build

Wie Vanilla-HTML, aber direkt in Hugo-Partial, Eleventy-Layout oder Astro-.astro-Datei einfügen.

Server-seitige Verifikation

Nach Widget-Resolution und vorhandener Session-ID SOLLTE Ihr Server vp-status erneut abfragen, bevor Zugriff gewährt wird. Verhindert gespoofte Browser-Callbacks.

Stack	Endpunkt	Download
Node.js 18+	POST /oidc.ashx?action=vp-status	server-verify-nodejs.js
Python (requests)	POST /oidc.ashx?action=vp-status	server-verify-python.py
PHP 7.4+ (curl)	POST /oidc.ashx?action=vp-status	server-verify-php.php

Alle drei prüfen status === "completed" und geben das claims-Objekt zurück. API-Key im Authorization: Bearer-Header senden. Keys ausstellen unter /oidc-clients.html.

Fehlerbehandlung

Status	Bedeutung	UX-Empfehlung
waiting	Session offen, Holder hat Wallet-Flow noch nicht abgeschlossen.	QR + Spinner zeigen.
completed	Wallet hat Vorlage signiert; Claims verfügbar.	Weiter zur geschützten Seite.
expired	Session-Timeout (Standard 180 s).	„Erneut versuchen“-Button, startet vp-start neu.
error	Wallet meldete OID4VP-Fehler (Abbruch, nicht unterstützter Credential-Typ, unbekannte Query).	Fehler anzeigen, Retry-Button.

Wallet nicht installiert: Deep-Link geht an den Standard-Handler des Browsers. Erkennen: Click wrappen und Fallback-QR nach ~800 ms ohne Visibility-Wechsel starten.

Test

Die Test-Harness verifier-test läuft die volle Spec-Konformitätssuite gegen Ihren Tenant: OID4VP-Request-Object-Form, HAIP-Wallet-Attestation, Presentation-Definition-Parse, optional x5c-Chain-Validation gegen LOTL. Vor jedem Release nutzen.

Referenz: docs.eudi.dev. Nichts auf dieser Seite ist von der Europäischen Kommission bestätigt.

Entwickler-Kochbuecher: OIDC-Anmeldung - JWT-Validierung - M2M-API-Keys - Webhooks