Limited availability
Experimentell: Dies ist eine experimentelle Technologie
Ãberprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.
Die WebOTP-API bietet ein verbessertes Benutzererlebnis für Webanwendungen, um zu verifizieren, dass eine Telefonnummer einem Benutzer gehört, wenn diese als Anmeldefaktor verwendet wird. WebOTP ist eine Erweiterung der Credential Management API.
Die Verifikation erfolgt in einem zweistufigen Prozess:
Telefonnummern werden häufig verwendet, um den Benutzer einer App zu identifizieren. Eine SMS wird häufig eingesetzt, um zu überprüfen, dass die Nummer dem Benutzer gehört. Die SMS enthält typischerweise ein OTP, das der Benutzer in ein Formular der App kopieren und einfügen muss, um zu verifizieren, dass er der Inhaber der Nummer ist. Dies ist ein etwas umständliches Benutzererlebnis.
OTP-Anwendungsfälle umfassen:
Die WebOTP-API ermöglicht es Webanwendungen, diesen Validierungsprozess zu beschleunigen, indem das OTP automatisch von der SMS kopiert und an die App weitergeleitet wird, nachdem der Benutzer seine Zustimmung gegeben hat (die meisten nativen Plattformen haben eine entsprechende API).
Beachten Sie, dass ein OTP an die sendende Domain gebunden ist. Dies ist eine nützliche SicherheitsmaÃnahme, um zu verifizieren, dass das OTP von der richtigen Quelle stammt, was das Risiko von Phishing-Angriffen im täglichen Autentifizierungsprozess mindern kann.
Sicherheitsbedenken bei SMS-OTPsSMS-OTPs sind nützlich, um Telefonnummern zu verifizieren, und die Verwendung von SMS als zweiten Faktor ist sicherlich besser, als keinen zweiten Faktor zu haben. In einigen Regionen sind andere Kennungen wie E-Mail-Adressen und Authentifikatoren nicht weit verbreitet, sodass SMS-OTPs sehr häufig sind.
Allerdings sind SMS nicht so sicher. Angreifer können eine SMS fälschen und die Telefonnummer einer Person kapern. Netzbetreiber können Telefonnummern an neue Benutzer weitergeben, nachdem ein Konto geschlossen wurde.
Es wird daher empfohlen, eine stärkere Form der Authentifizierung zu verwenden, wenn möglich, wie eine auf der Web Authentication API basierende Lösung, die ein Passwort und einen Sicherheitsschlüssel oder einen Passkey beinhaltet.
Wie funktioniert die WebOTP-API?Der Prozess funktioniert wie folgt:
navigator.credentials.get() mit einer otp-Option auf, die einen transport-Typ von "sms" spezifiziert. Dies löst eine Anforderung für ein OTP vom zugrunde liegenden System aus, dessen Quelle eine speziell formatierte SMS-Nachricht (die das OTP und die Domain der App enthält) ist, die vom App-Server empfangen wurde. Der get()-Aufruf basiert auf einem Promise und wartet darauf, dass die SMS-Nachricht empfangen wird.get()-Aufruf mit einem OTPCredential-Objekt, das das OTP enthält, erfüllt.Eine typische SMS-Nachricht sieht folgendermaÃen aus:
Your verification code is 123456. @www.example.com #123456
@.#).Hinweis: Der bereitgestellte Domain-Wert darf kein URL-Schema, keinen Port oder andere URL-Funktionen enthalten, die oben nicht angezeigt werden.
Wenn die get()-Methode von einer eingebetteten Drittanbieterseite in einem <iframe> aufgerufen wird, sollte die SMS-Struktur folgendermaÃen aussehen:
Your verification code is 123456. @top-level.example.com #123456 @embedded.com
In diesem Fall muss die letzte Zeile bestehen aus:
@.#).@.Die Verfügbarkeit von WebOTP kann durch die Verwendung einer Permissions Policy gesteuert werden, die eine otp-credentials-Direktive spezifiziert. Diese Direktive hat einen Standard-Zulassungswert von "self", was bedeutet, dass diese Methoden standardmäÃig in obersten Dokumentenkontexten verwendet werden können.
Sie könnten eine Direktive spezifizieren, die den Gebrauch von WebOTP in einer bestimmten cross-origin Domain (z. B. innerhalb eines <iframe>) erlaubt, wie folgt:
Permissions-Policy: otp-credentials=(self "https://embedded.com")
Oder Sie könnten es direkt auf dem <iframe> spezifizieren, wie folgt:
<iframe src="https://embedded.com/..." allow="otp-credentials"> ... </iframe>
Hinweis: Wo eine Richtlinie die Verwendung von WebOTP get() verbietet, werden die von ihr zurückgegebenen Versprechungen mit einem SecurityError-DOMException abgelehnt.
OTPCredential
Wird zurückgegeben, wenn ein WebOTP get()-Aufruf erfüllt wird; enthält eine code-Eigenschaft, die das abgerufene OTP enthält.
CredentialsContainer.get(), die otp-Option
Der Aufruf von get() mit einer otp-Option weist den Benutzeragenten an, zu versuchen, ein OTP aus der SMS-App des zugrunde liegenden Systems abzurufen.
In diesem Beispiel wird, wenn eine SMS-Nachricht eintrifft und der Benutzer die Erlaubnis erteilt, ein OTPCredential-Objekt mit einem OTP zurückgegeben. Dieses Passwort wird dann in das Verifizierungsformularfeld vorausgefüllt, und das Formular wird abgeschickt.
Probieren Sie dieses Demo mit einem Telefon aus.
Das Formularfeld enthält ein autocomplete-Attribut mit dem Wert one-time-code. Dies ist nicht erforderlich, damit die WebOTP-API funktioniert, aber es ist sinnvoll, es einzuschlieÃen. Infolgedessen wird Safari den Benutzer auffordern, dieses Feld mit dem OTP automatisch auszufüllen, wenn eine korrekt formatierte SMS empfangen wird, auch wenn die WebOTP-API in Safari nicht vollständig unterstützt wird.
<input type="text" autocomplete="one-time-code" inputmode="numeric" />
Das JavaScript ist wie folgt:
// Detect feature support via OTPCredential availability
if ("OTPCredential" in window) {
window.addEventListener("DOMContentLoaded", (e) => {
const input = document.querySelector('input[autocomplete="one-time-code"]');
if (!input) return;
// Set up an AbortController to use with the OTP request
const ac = new AbortController();
const form = input.closest("form");
if (form) {
// Abort the OTP request if the user attempts to submit the form manually
form.addEventListener("submit", (e) => {
ac.abort();
});
}
// Request the OTP via get()
navigator.credentials
.get({
otp: { transport: ["sms"] },
signal: ac.signal,
})
.then((otp) => {
// When the OTP is received by the app client, enter it into the form
// input and submit the form automatically
input.value = otp.code;
if (form) form.submit();
})
.catch((err) => {
console.error(err);
});
});
}
Ein weiterer guter Anwendungsfall für den AbortController ist das Abbrechen der get()-Anforderung nach einer bestimmten Zeit:
setTimeout(() => {
// abort after 30 seconds
ac.abort();
}, 30 * 1000);
Wenn der Benutzer abgelenkt wird oder woanders navigiert, ist es gut, die Anforderung abzubrechen, damit er nicht mit einer Berechtigungsanfrage konfrontiert wird, die für ihn nicht mehr relevant ist.
Spezifikationen Browser-Kompatibilität Siehe auchRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4