Om een geavanceerde gebruikerservaring te bieden, is het belangrijk dat u gebruikers helpt zichzelf op uw website te verifiëren. Geauthenticeerde gebruikers kunnen met elkaar communiceren via een speciaal profiel, gegevens tussen apparaten synchroniseren of gegevens verwerken terwijl ze offline zijn; de lijst gaat maar door. Maar het aanmaken, onthouden en typen van wachtwoorden is vaak omslachtig voor eindgebruikers, vooral op mobiele schermen, waardoor ze dezelfde wachtwoorden op verschillende sites opnieuw gebruiken. Dit is uiteraard een veiligheidsrisico.
De nieuwste versie van Chrome (51) ondersteunt de Credential Management API . Het is een standaardvoorstel van het W3C dat ontwikkelaars programmatische toegang geeft tot de inloggegevensbeheerder van een browser en waarmee gebruikers gemakkelijker kunnen inloggen.
Wat is de Credential Management-API?
Met de Credential Management API kunnen ontwikkelaars wachtwoordreferenties en federatieve inloggegevens opslaan en ophalen, en deze biedt 3 functies:
-
navigator.credentials.get() -
navigator.credentials.store() -
navigator.credentials.requireUserMediation()
Door deze eenvoudige API's te gebruiken kunnen ontwikkelaars krachtige dingen doen, zoals:
- Zorg ervoor dat gebruikers zich met slechts één tik kunnen aanmelden.
- Onthoud het federatieve account waarmee de gebruiker zich heeft aangemeld.
- Meld gebruikers opnieuw aan wanneer een sessie verloopt.
Bij de implementatie van Chrome worden de inloggegevens opgeslagen in de wachtwoordbeheerder van Chrome. Als gebruikers zijn ingelogd bij Chrome, kunnen ze de wachtwoorden van de gebruiker op verschillende apparaten synchroniseren. Deze gesynchroniseerde wachtwoorden kunnen ook worden gedeeld met Android-apps die de Smart Lock for Passwords API voor Android hebben geïntegreerd voor een naadloze platformonafhankelijke ervaring .
Integratie van de Credential Management API met uw site
De manier waarop u de Credential Management API met uw website gebruikt, kan variëren, afhankelijk van de architectuur. Is het een app met één pagina? Is het een oudere architectuur met pagina-overgangen? Bevindt het aanmeldingsformulier zich alleen op de bovenste pagina? Bevinden zich overal inlogknoppen? Kunnen gebruikers zinvol op uw website surfen zonder zich aan te melden? Werkt federatie binnen pop-upvensters? Of vereist het interactie over meerdere pagina's?
Het is bijna onmogelijk om al deze gevallen te behandelen, maar laten we eens kijken naar een typische app met één pagina.
- De bovenste pagina is een registratieformulier.
- Door op de knop "Aanmelden" te tikken, navigeren gebruikers naar een aanmeldingsformulier.
- Zowel het registratie- als het aanmeldingsformulier hebben de typische opties van id/wachtwoordgegevens en federatie, bijvoorbeeld met Google Sign-In en Facebook Sign-In.
Door de Credential Management API te gebruiken, kunt u bijvoorbeeld de volgende functies aan de site toevoegen:
- Een accountkiezer tonen bij inloggen: Toont een eigen gebruikersinterface voor accountkiezer wanneer een gebruiker op 'Aanmelden' tikt.
- Inloggegevens opslaan: Bied na een succesvolle aanmelding aan om de inloggegevens op te slaan in de wachtwoordbeheerder van de browser voor later gebruik.
- Laat de gebruiker zich automatisch opnieuw aanmelden: laat de gebruiker zich opnieuw aanmelden als een sessie is verlopen.
- Automatische aanmelding bemiddelen: Zodra een gebruiker zich afmeldt, schakelt u de automatische aanmelding uit voor het volgende bezoek van de gebruiker.
U kunt deze functies ervaren die zijn geïmplementeerd op een demosite met de voorbeeldcode .
Toon de accountkiezer wanneer u zich aanmeldt
Tussen het tikken van een gebruiker op de knop "Aanmelden" en het navigeren naar een aanmeldingsformulier, kunt u navigator.credentials.get() gebruiken om inloggegevens op te halen. Chrome toont een gebruikersinterface voor accountkiezer waaruit de gebruiker een account kan kiezen.
Een wachtwoordreferentieobject ophalen
Om wachtwoordreferenties als accountopties weer te geven, gebruikt u password: true .
navigator.credentials.get({
password: true, // `true` to obtain password credentials
}).then(function(cred) {
// continuation
...
Een wachtwoord gebruiken om in te loggen
Zodra de gebruiker een accountselectie heeft gemaakt, ontvangt de oplossingsfunctie een wachtwoordreferentie. Je kunt het naar de server sturen met behulp fetch() :
// continued from previous example
}).then(function(cred) {
if (cred) {
if (cred.type == 'password') {
// Construct FormData object
var form = new FormData();
// Append CSRF Token
var csrf_token = document.querySelector('csrf_token').value;
form.append('csrf_token', csrf_token);
// You can append additional credential data to `.additionalData`
cred.additionalData = form;
// `POST` the credential object as `credentials`.
// id, password and the additional data will be encoded and
// sent to the url as the HTTP body.
fetch(url, { // Make sure the URL is HTTPS
method: 'POST', // Use POST
credentials: cred // Add the password credential object
}).then(function() {
// continuation
});
} else if (cred.type == 'federated') {
// continuation
Een federatieve inloggegevens gebruiken om in te loggen
Om federatieve accounts aan een gebruiker te tonen, voegt u federated , waarvoor een reeks identiteitsproviders nodig is, toe aan de get() opties.
navigator.credentials.get({
password: true, // `true` to obtain password credentials
federated: {
providers: [ // Specify an array of IdP strings
'https://accounts.google.com',
'https://www.facebook.com'
]
}
}).then(function(cred) {
// continuation
...
U kunt de eigenschap type van het credential-object onderzoeken om te zien of het PasswordCredential ( type == 'password' ) of FederatedCredential ( type == 'federated' ) is. Als de referentie een FederatedCredential is, kunt u de juiste API aanroepen met behulp van de informatie die deze bevat.
});
} else if (cred.type == 'federated') {
// `provider` contains the identity provider string
switch (cred.provider) {
case 'https://accounts.google.com':
// Federated login using Google Sign-In
var auth2 = gapi.auth2.getAuthInstance();
// In Google Sign-In library, you can specify an account.
// Attempt to sign in with by using `login_hint`.
return auth2.signIn({
login_hint: cred.id || ''
}).then(function(profile) {
// continuation
});
break;
case 'https://www.facebook.com':
// Federated login using Facebook Login
// continuation
break;
default:
// show form
break;
}
}
// if the credential is `undefined`
} else {
// show form
Bewaar inloggegevens
Wanneer een gebruiker zich aanmeldt bij uw website via een formulier, kunt u navigator.credentials.store() gebruiken om de inloggegevens op te slaan. De gebruiker wordt gevraagd of hij deze wel of niet wil opslaan. Afhankelijk van het type referentie gebruikt u new PasswordCredential() of new FederatedCredential() om een referentieobject te maken dat u wilt opslaan.
Een wachtwoordreferentie maken en opslaan op basis van een formulierelement
De volgende code maakt gebruik van kenmerken voor autocomplete om de elementen van het formulier automatisch toe te wijzen aan objectparameters PasswordCredential .
html <form id="form" method="post"> <input type="text" name="id" autocomplete="username" /> <input type="password" name="password" autocomplete="current-password" /> <input type="hidden" name="csrf_token" value="******" /> </form>
JavaScript
var form = document.querySelector('\#form');
var cred = new PasswordCredential(form);
// Store it
navigator.credentials.store(cred)
.then(function() {
// continuation
});
Een federatieve referentie maken en opslaan
// After a federation, create a FederatedCredential object using
// information you have obtained
var cred = new FederatedCredential({
id: id, // The id for the user
name: name, // Optional user name
provider: 'https://accounts.google.com', // A string that represents the identity provider
iconURL: iconUrl // Optional user avatar image url
});
// Store it
navigator.credentials.store(cred)
.then(function() {
// continuation
});
Laat de gebruiker zich automatisch opnieuw aanmelden
Wanneer een gebruiker uw website verlaat en later terugkomt, is het mogelijk dat de sessie is verlopen. Val de gebruiker niet lastig om elke keer dat hij terugkomt zijn wachtwoord in te voeren. Laat de gebruiker zich automatisch opnieuw aanmelden.
Een referentieobject verkrijgen
navigator.credentials.get({
password: true, // Obtain password credentials or not
federated: { // Obtain federation credentials or not
providers: [ // Specify an array of IdP strings
'https://accounts.google.com',
'https://www.facebook.com'
]
},
unmediated: true // `unmediated: true` lets the user automatically sign in
}).then(function(cred) {
if (cred) {
// auto sign-in possible
...
} else {
// auto sign-in not possible
...
}
});
De code zou er ongeveer zo uit moeten zien als wat u heeft gezien in het gedeelte 'Accountkiezer weergeven bij inloggen'. Het enige verschil is dat u unmediated: true instelt.
Hierdoor wordt de functie onmiddellijk opgelost en krijgt u de inloggegevens om de gebruiker automatisch aan te melden. Er zijn een paar voorwaarden:
- De gebruiker heeft de automatische aanmeldingsfunctie hartelijk verwelkomd.
- De gebruiker heeft zich eerder aangemeld bij de website met behulp van de Credential Management API.
- De gebruiker heeft slechts één referentie opgeslagen voor uw herkomst.
- De gebruiker heeft zich tijdens de vorige sessie niet expliciet afgemeld.
Als aan één van deze voorwaarden niet wordt voldaan, wordt de functie afgewezen.
Bemiddel automatisch inloggen
Wanneer een gebruiker zich afmeldt bij uw website, is het uw verantwoordelijkheid ervoor te zorgen dat de gebruiker niet automatisch opnieuw wordt aangemeld . Om dit te garanderen, biedt de Credential Management API een mechanisme genaamd mediation . U kunt de bemiddelingsmodus inschakelen door navigator.credentials.requireUserMediation() aan te roepen. Zolang de bemiddelingsstatus van de gebruiker voor de oorsprong is ingeschakeld unmediated: true gebruikt met navigator.credentials.get() , wordt die functie opgelost met undefined .
Automatische aanmelding bemiddelen
navigator.credentials.requireUserMediation();
FAQ
Is het mogelijk dat JavaScript op de website een onbewerkt wachtwoord ophaalt? Nee. U kunt alleen wachtwoorden verkrijgen als onderdeel van PasswordCredential en deze kunnen op geen enkele manier openbaar worden gemaakt.
Is het mogelijk om drie sets cijfers voor een ID op te slaan met behulp van de Credential Management API? Niet nu. Uw feedback over de specificatie wordt zeer op prijs gesteld.
Kan ik de Credential Management API in een iframe gebruiken? De API is beperkt tot contexten op het hoogste niveau. Aanroepen naar .get() of .store() in een iframe worden onmiddellijk opgelost zonder effect.
Kan ik mijn Chrome-extensie voor wachtwoordbeheer integreren met de Credential Management API? U kunt navigator.credentials overschrijven en aan uw Chrome-extensie koppelen om inloggegevens get() of store() .
Bronnen
Voor meer informatie over de Credential Management API kunt u de Integratiehandleiding raadplegen.