OTPCredential.code — Eigenschaft · JavaScript-Referenz

Signatur

OTPCredential.code

Beschreibung

Die Eigenschaft code gehört zur WebOTP API. Ruft eine Seite navigator.credentials.get({ otp: { transport: ['sms'] } }) auf, wartet der Browser auf eine passend formatierte SMS. Sobald der Nutzer zustimmt, wird das Promise mit einem OTPCredential-Objekt erfüllt, dessen code das extrahierte Einmal-Passwort enthält.

Damit lassen sich Anmelde- oder Bestätigungsformulare (Zwei-Faktor-Authentifizierung, Telefonnummer-Verifizierung, Zahlungsfreigaben) automatisch ausfüllen, ohne dass der Nutzer die App wechseln und den Code abtippen muss.

Die SMS muss ein bestimmtes Format einhalten: Die letzte Zeile lautet @example.com #123456 – Host der aufrufenden Seite, gefolgt von # und dem Code. Nur dieser Teil nach # landet in code. Optional kann für eingebettete iframes eine zweite Domain angehängt werden (@top.example #123456 @iframe.example).

Rückgabewert

Typ

string

Beschreibung

Das Einmal-Passwort aus der SMS, z. B. "123456". Immer eine Zeichenkette – auch bei rein numerischen Codes (führende Nullen bleiben erhalten).

Beispiele

OTP automatisch in ein Eingabefeld übernehmen

// HTML: <input id="otp" autocomplete="one-time-code" inputmode="numeric">
if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', async () => {
    const input = document.querySelector('#otp');
    const ac = new AbortController();

    // Abbrechen, falls der Nutzer das Formular manuell absendet
    input.form?.addEventListener('submit', () => ac.abort());

    try {
      const otp = await navigator.credentials.get({
        otp: { transport: ['sms'] },
        signal: ac.signal
      });
      input.value = otp.code;
      console.log('Empfangener Code:', otp.code);
      input.form?.requestSubmit();
    } catch (err) {
      console.warn('WebOTP fehlgeschlagen:', err.name);
    }
  });
}

Empfangener Code: 123456

Passendes SMS-Format (serverseitig versendet)

// Node.js: Nachrichtentext für den SMS-Versand erzeugen
const buildOtpSms = (host, code) =>
  `Ihr Bestätigungscode lautet ${code}.\n\n@${host} #${code}`;

console.log(buildOtpSms('shop.example.com', '048213'));

Ihr Bestätigungscode lautet 048213. @shop.example.com #048213

Mit Zeitlimit und Feature-Erkennung

const holeOtp = async (timeoutMs = 60_000) => {
  if (!('OTPCredential' in window)) return null; // Fallback: manuelle Eingabe
  try {
    const cred = await navigator.credentials.get({
      otp: { transport: ['sms'] },
      signal: AbortSignal.timeout(timeoutMs)
    });
    return cred?.code ?? null;
  } catch (err) {
    if (err.name === 'TimeoutError' || err.name === 'AbortError') return null;
    throw err;
  }
};

const code = await holeOtp();
console.log(code ?? 'Bitte Code manuell eingeben');

123456

// Wichtig · Fallstricke

Browser-Unterstützung: Nur Chromium-basierte Browser (Chrome, Edge, Samsung Internet) auf Android sowie teils Desktop-Chrome mit verknüpftem Android-Gerät. Firefox und Safari unterstützen WebOTP nicht – Safari bietet stattdessen Autofill über autocomplete="one-time-code". Immer per 'OTPCredential' in window prüfen und manuelle Eingabe als Fallback anbieten.
Nur in sicherem Kontext (HTTPS) und im Top-Level-Dokument bzw. in iframes mit allow="otp-credentials" verfügbar.
Der Host in der SMS (@host) muss exakt zur Herkunft der Seite passen, sonst wird die Nachricht ignoriert und das Promise bleibt offen.
code ist schreibgeschützt; Zuweisungen werden stillschweigend ignoriert (im Strict Mode: TypeError).
Sicherheit: SMS-OTPs sind anfällig für SIM-Swapping und Phishing. Den Code immer serverseitig prüfen, kurz gültig halten und nicht als alleinigen Faktor für kritische Aktionen verwenden – WebAuthn/Passkeys sind sicherer.
Das Promise sollte per AbortController abgebrochen werden, wenn der Nutzer den Code selbst eingibt, um hängende Anfragen zu vermeiden.

Siehe auch

Credential ContactAddress.phone PasswordCredential.iconURL Credential.id Credential.type