Signatur
Beschreibung
Die Eigenschaft iconURL eines PasswordCredential-Objekts gibt einen String mit der URL eines Bildes zurück. Das Bild steht für das Konto, meist ist es ein Profilbild oder Avatar. Der Browser zeigt es in seiner Kontoauswahl an, etwa wenn navigator.credentials.get() mit mediation: "optional" oder "required" aufgerufen wird und mehrere gespeicherte Konten zur Wahl stehen.
Den Wert legst du fest, wenn du die Anmeldedaten erzeugst: entweder über das Feld iconURL im Datenobjekt von new PasswordCredential({...}) oder über ein Formularfeld mit autocomplete="photo", falls du den Konstruktor mit einem HTMLFormElement aufrufst. Nach dem Erzeugen lässt sich die Eigenschaft nicht mehr ändern. Willst du ein anderes Symbol, erstellst du ein neues Credential und speicherst es mit navigator.credentials.store().
Die Eigenschaft wird vom Interface CredentialUserData geerbt, das auch FederatedCredential implementiert. Ist beim Erzeugen kein Symbol angegeben, enthält sie einen leeren String.
Rückgabewert
""), wenn beim Erzeugen kein Symbol angegeben wurde.Beispiele
Credential mit Avatar erzeugen und speichern
// Nach erfolgreichem Login: Zugangsdaten samt Avatar im Browser speichern
const saveLogin = async (id, password, name, avatarUrl) => {
if (!('PasswordCredential' in window)) return;
const cred = new PasswordCredential({
id,
password,
name,
iconURL: avatarUrl // muss eine sichere (https-)URL sein
});
console.log(cred.iconURL);
await navigator.credentials.store(cred);
};
saveLogin('anna@example.com', 'geheim123', 'Anna Beispiel', 'https://example.com/avatars/anna.png');Symbol eines abgerufenen Kontos in der eigenen Oberfläche anzeigen
const showAccount = async () => {
const cred = await navigator.credentials.get({
password: true,
mediation: 'optional'
});
if (cred instanceof PasswordCredential) {
const img = document.querySelector('#account-avatar');
// Fallback, falls kein Symbol hinterlegt ist
img.src = cred.iconURL || '/img/default-avatar.svg';
img.alt = cred.name || cred.id;
console.log(`Angemeldet als ${cred.id}, Symbol: ${cred.iconURL || '(keins)'}`);
}
};
showAccount();iconURL aus einem Formular übernehmen
// HTML: <form id="login">
// <input name="user" autocomplete="username">
// <input name="pass" type="password" autocomplete="current-password">
// <input name="avatar" type="hidden" autocomplete="photo" value="https://example.com/a.png">
// </form>
const form = document.querySelector('#login');
const cred = new PasswordCredential(form);
console.log(cred.iconURL);// Wichtig · Fallstricke
- Browser-Unterstützung:
PasswordCredentialgibt es nur in Chromium-Browsern (Chrome, Edge, Opera). Firefox und Safari unterstützen es nicht. Prüfe deshalb vorher mit'PasswordCredential' in window, ob das Interface vorhanden ist. Die API gilt außerdem als experimentell. - Sicherer Kontext: Die API funktioniert nur über HTTPS (oder
localhost). AuchiconURLselbst muss eine potenziell vertrauenswürdige URL sein, in der Praxis alsohttps:. Sonst wirft der Konstruktor einenTypeError. - Schreibgeschützt: Eine Zuweisung wie
cred.iconURL = '...'hat keine Wirkung (im Strict Mode gibt es einenTypeError). Für ein neues Symbol musst du ein neues Credential erzeugen und speichern. - Leerer String statt
null: Fehlt das Symbol, ist der Wert\"\". Plane also einen Ersatz ein, etwa mitcred.iconURL || fallback. - Datenschutz: Der Browser lädt die Bild-URL eventuell selbst nach. Verwende keine URLs mit geheimen Tokens oder personenbezogenen Parametern.