Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

How to implement Google One Tap Login in Reactjs?

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Chargement dans…3
×

Consultez-les par la suite

1 sur 30 Publicité
Publicité

Plus De Contenu Connexe

Publicité

How to implement Google One Tap Login in Reactjs?

  1. 1. One Tap Google Login with ReactJs A guide by Sufalam Technologies Pvt Ltd Pradip Vadher Sr. Reactjs Developer www.sufalamtech.com
  2. 2. Why to choose One Tap Google Login? ● Sign-in with Google One Tap uses secure tokens, rather than login credentials, to sign users to the web application ● An easy sign-in process is meant to help users reduce the pressure of picking convenience over security when deciding on yet another password for a web app www.sufalamtech.com
  3. 3. Why to choose One Tap Google Login? ● Users can sign in using just one tap, without having to remember their credentials or create a password ● Easy flow increased the sign-in with existing user and sign-up for new users www.sufalamtech.com
  4. 4. Why to choose One Tap Google Login? ● Users can sign in or sign up anywhere in the web application, It also works after session expired ● Manual sign-up or switching accounts occur only after the user has first signed out of your site. www.sufalamtech.com
  5. 5. Why to choose One Tap Google Login? ● One Tap Google Login also works with “Sign-in with Google” Button www.sufalamtech.com
  6. 6. How to implements One Tap in ReactJs? www.sufalamtech.com
  7. 7. Implement One Tap Login Step 1 Get Google API Client Id Step 2 Load the One-tap Google library Step 3 Initialize One tap to display Sign in Popup www.sufalamtech.com
  8. 8. 1. Get Your Google API Client Id From Google Console To use Google’s one-tap sign-in flows, you need to set up your Google API client ID. If you don’t have Google Client Id then you need to create a new one. Use the below details to create a new client id. https://console.cloud.google.com/apis/credentials www.sufalamtech.com
  9. 9. www.sufalamtech.com
  10. 10. 2. Load Google Javascript Client Library The JavaScript client library for Sign In With Google and Google One Tap is designed to be compatible with most common browsers and platforms. <script src="https://accounts.google.com/gsi/client" async defer /> Due to security risks the JavaScript client library is only supported on the latest two versions of each browser www.sufalamtech.com
  11. 11. 3. Initialize One tap to display Sign in Popup We have to initialize the client id to the google account script that loaded in system that we checked in the last step. After that we have to use prompt method to display the popup of one tap google login www.sufalamtech.com
  12. 12. 3. Initialize One tap to display Sign in Popup www.sufalamtech.com
  13. 13. Browser Support www.sufalamtech.com
  14. 14. Browser and platform combinations www.sufalamtech.com
  15. 15. Example www.sufalamtech.com
  16. 16. 1. Load the Javascript Client Library www.sufalamtech.com
  17. 17. www.sufalamtech.com
  18. 18. 2. Add Callback method to google api initialize block www.sufalamtech.com
  19. 19. www.sufalamtech.com
  20. 20. 3. Add Decode Method to find the user details from the callback response www.sufalamtech.com
  21. 21. www.sufalamtech.com
  22. 22. Browser Output www.sufalamtech.com
  23. 23. www.sufalamtech.com
  24. 24. Browser Output Without Existing Google Login www.sufalamtech.com
  25. 25. www.sufalamtech.com
  26. 26. Security Concerns While Implementing One Tap www.sufalamtech.com
  27. 27. 1. Google One Tap can only be displayed in HTTPS domains. www.sufalamtech.com 2. Due to security risks the JavaScript client library is only supported on the latest two versions of each browser.
  28. 28. 3.Do not cover Google One Tap by any other content. www.sufalamtech.com 4. One Tap Google Login is NOT configured to work on Private Window.
  29. 29. Checkout complete example on Git Hub https://github.com/Sufalam- Technologies/one_tap_google_login www.sufalamtech.com
  30. 30. Thank You Follow Us On www.sufalamtech.com

×