How to implement Google One Tap Login in Reactjs?
•Download as PPTX, PDF•
1 like•1,005 views
In this presentation we explain steps to implement One Tap Login feature in Google using Reactjs.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to How to implement Google One Tap Login in Reactjs?
Similar to How to implement Google One Tap Login in Reactjs? (20)
Recently uploaded
Recently uploaded (20)
How to implement Google One Tap Login in Reactjs?
- 1. One Tap Google Login with ReactJs A guide by Sufalam Technologies Pvt Ltd Pradip Vadher Sr. Reactjs Developer www.sufalamtech.com
- 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. 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. 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. Why to choose One Tap Google Login? ● One Tap Google Login also works with “Sign-in with Google” Button www.sufalamtech.com
- 6. How to implements One Tap in ReactJs? www.sufalamtech.com
- 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. 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
- 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. 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. 3. Initialize One tap to display Sign in Popup www.sufalamtech.com
- 14. Browser and platform combinations www.sufalamtech.com
- 16. 1. Load the Javascript Client Library www.sufalamtech.com
- 18. 2. Add Callback method to google api initialize block www.sufalamtech.com
- 20. 3. Add Decode Method to find the user details from the callback response www.sufalamtech.com
- 24. Browser Output Without Existing Google Login www.sufalamtech.com
- 26. Security Concerns While Implementing One Tap www.sufalamtech.com
- 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. 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. Checkout complete example on Git Hub https://github.com/Sufalam- Technologies/one_tap_google_login www.sufalamtech.com
- 30. Thank You Follow Us On www.sufalamtech.com