Hoe: Wachtwoord Autofill Gebruiken in Je App

Als je website een accountsysteem heeft waar gebruikers kunnen inloggen, wil je het inlogproces zo gemakkelijk mogelijk maken. Natuurlijk geldt dit ook voor je app, aangezien deze dezelfde inlogpagina zal bevatten.

De belangrijkste kans om wrijving tijdens het inlogproces te verminderen, is ervoor te zorgen dat je gebruikers automatisch ingelogd houdt via cookies. Dit werkt op dezelfde manier in de app als op je website, dus je hoeft daar niets extra's voor te doen als het al op je website werkt. Dit vermindert aanzienlijk het aantal keren dat de gebruiker moet inloggen, maar de gebruiker moet nog steeds inloggen de eerste keer dat ze de app gebruiken of wanneer de cookies verlopen. Daarom moeten we die inlogmomenten nog steeds snel en gemakkelijk maken.

Een belangrijke manier om dat te bereiken is door mensen hun wachtwoordmanagers te laten gebruiken. Op die manier kunnen ze gemakkelijk hun opgeslagen gebruikersnaam en wachtwoord invoeren en hoeven ze deze niet te typen of kopiëren/plakken. Er zijn een paar dingen waar je op moet letten, en daar gaan we in dit artikel naar kijken.

Het instellen op je website

Voor de autofill-functies om in je app te werken, moeten ze eerst op je website werken. Als je een websitebouwer gebruikt, zou dit standaard moeten werken. Als je de HTML zelf schrijft, zorg er dan voor dat je de nodige attributen op je invoerelementen instelt. Dit is niet de focus van deze gids, ik vermeld het vooral zodat je eraan denkt je website-instelling te controleren als je problemen hebt met de wachtwoord-autofill in je app. De beste manier om te testen of het werkt op je website is om je website te openen in Chrome op een Android-apparaat en in Safari op een iOS-apparaat. Als het opslaan en automatisch invullen van inloggegevens daar goed werkt, zou je website correct geconfigureerd moeten zijn.

iOS-configuratie

Helaas beperkt Apple de functionaliteit van wachtwoordmanagers binnen apps die op websites zijn gebaseerd. Om specifiek te zijn, kan de WebView-component (de ingebouwde browser van de app die je website weergeeft) standaard geen nieuwe wachtwoorden en gebruikersnamen opslaan of eerder opgeslagen wachtwoorden en gebruikersnamen invoeren. Dit is natuurlijk vervelend voor gebruikers, zoals we eerder hebben besproken. Gelukkig kunnen we deze frustratie ten minste gedeeltelijk verminderen, aangezien met een beetje extra setup het invoeren van opgeslagen wachtwoorden zal werken.

Om deze functie in te schakelen, moet je app-links voor je app instellen. Zowel app-links als deze autofill-functie vereisen dat je verifieert dat je app en website bij elkaar horen. Omdat ze geen nadelen hebben, hebben we ze gebundeld zodat je ze beide tegelijk inschakelt, wat gemakkelijker is.

Houd er rekening mee dat gebruikers zelfs dan alleen eerder opgeslagen inloggegevens kunnen invoeren. Nieuwe opslaan werkt nog steeds alleen in Safari. Dit is een beperking van Apple en geldt zowel voor de iOS-sleutelhanger als andere wachtwoordmanagers.

Zodra het is ingesteld, kunnen gebruikers via het toetsenbord toegang krijgen tot hun opgeslagen wachtwoorden. Zo ziet dat eruit bij gebruik van de iOS Sleutelhanger-app:

En dit is een screenshot van wat je ziet bij gebruik van een wachtwoordmanager van derden, in dit geval LastPass:

Android Gebruiksnotities

Op Android hoef je geen extra configuraties te maken. Gebruikers worden standaard gevraagd om hun wachtwoorden op te slaan/in te vullen, bijvoorbeeld door de Google-wachtwoordmanager:

Wachtwoordmanagers van derden kunnen wel of niet ondersteunen dat wachtwoorden in apps op basis van websites worden ingevuld. LastPass werkt bijvoorbeeld wel:

Maar andere wachtwoordmanagers zoals Bitwarden werken niet, omdat de ontwikkelaars van Bitwarden handmatig autofill per app moeten inschakelen en dit standaard is uitgeschakeld.

Houd er rekening mee dat deze functie er ook anders uit kan zien, afhankelijk van de Android-variant die je gebruikt. Merken zoals Samsung en Xiaomi passen de Android-versie die ze gebruiken sterk aan, dus deze functie kan er op dergelijke apparaten ook iets anders uitzien.