Keyboard Fingerprint Login

Wappler General How To
#1

Hello!

I created two PHP websites using Wappler 5.8.2. Both sites utilize Wappler login scripts for user verification and accessing secure pages.

One site functions properly when using the fingerprint on a Mac keyboard during the initial attempt. However, subsequent attempts may or may not work. On the other hand, the second site doesn’t work at all when using the fingerprint method for logging in.

My question is, what steps should I take to address these issues? Ideally, I’d like both sites to support either the fingerprint method or traditional username and password login.

Thank you for your time and any assistance you can provide!

#2

What is this fingerprint login you’re talking about? Is this something specific to Safari? Safari then inputs the password upon successful fingerprint authentication?

#3

Been a Mac user for 15 years … never heard of this fingerprint login. If it’s a Safari thing and it magically remembers all my passwords I may switch.

#4

For some reason, of which I have not clue, the finger print keyboard for my Mac (mini, laptop) works on the Safari browser.

MK293
MK293850×365 92.6 KB

Screen Recording 2024-04-15 at 6.21.46 AM

#5

Ah, that’s just password auto-fill. Well, the login form must be properly made so Safari can recognize it as a login form. By properly made I mean following HTML best practices. The password field must have type password and stuff like that. I don’t know the specifics, but you’ll probably want to share the HTML code of the forms

#6

Thanks Apple. I’ll take deeper look and afterwords post my findings.

#7

Here’s what ChatGPT has to say… :grinning:

To set up your website to allow login using the fingerprint button on a Mac keyboard, you’ll need to integrate a feature called Touch ID authentication. Here’s a basic guide on how to implement it:

  1. Check Browser Compatibility : Ensure that the browser your visitors will be using supports Touch ID authentication. Safari on macOS is the primary browser supporting this feature.
  2. Use Web Authentication API : You can utilize the Web Authentication API, specifically the PublicKeyCredential interface, to enable Touch ID authentication. This API allows websites to create and use strong, attested, scoped, and public-key-based credentials for authentication.
  3. Implement the Login Process :
  • When a user tries to log in, provide an option for Touch ID authentication alongside the traditional username/password form.
  • If the user selects Touch ID authentication, use JavaScript to trigger the Touch ID prompt.
  • Handle the authentication response accordingly. If the authentication is successful, log the user in. If it fails, provide appropriate feedback.
  1. Secure Communication : Ensure that all communications between your website and the server are secure, especially when dealing with sensitive authentication data.
  2. Test Thoroughly : Test the Touch ID authentication feature extensively across different devices and browsers to ensure compatibility and usability.
  3. Provide Alternatives : Since not all users may have access to Touch ID or may prefer traditional login methods, always offer alternative authentication options like username/password.