/gradeup-googleOneTap

Has the code for how to not have a popup on mobile for google one tap and have a card there too. Plus other components are also helpful like customising width of google one tap according etc.

Primary LanguageHandlebars

baidwan007 addition

Steps to run on localhost

  1. create a .env file in the root folder of project and add environment variables. Right now there are two. GOOGLE_API_KEY. api key would be different for local and prod and also api key should not be put on github thats why first env variable. Secondly at several places we need to create urls and also whitelist urls. For that too the urls would be different on different environments hence these two env variables are present. They are dynamically supplied to html pages.
  2. Instal dependencies using this command npm install. Not pushing the dependencies folder to github either because i ll be using the same folder to deploy on server. so can have that folder.
  3. run with this command node -r dotenv/config server.js . This helps to load environment variables from the .env file on local. dotenv is included as a dev dependency on project so this command is only needed on localhost. on the deployment server run using node server.js because there the platform i use to deploy like vercel takes care of supplying the necessary env variables itself.

Google One-Tap 2.0

Google One-Tap is a feature that enables a user to signup or signin to your website with just a single click. It creates a smooth experience for the user to jump into the website without going through a series of authentication steps. This is the implementation of Google One-Tap 2.0 with improved UX.

To run the demo :

  • clone the repo
  • change the client id to your provided google client id in google-yolo.html file.
  • start a server using
    python -m SimpleHTTPServer 8080

Usage

"Google One-Tap" Google One-Tap 2.0

index.html shows how to use the iframe. The iframe if present at multiple places on the same page can be used having class name google-iframe-mul and if used once every page then it can be used having id google-iframe.

event.js shows that how the events from the Google One-Tap login are handled. Use this once every page whether you have multiple iframes or single.

google-yolo.html shows how the Google One-Tap 2.0 is implemented using JavaScript API. This has multiple functions handling different tasks in the script added internally into the html.

Important Points to Remember

  • onGoogleYoloLoad function is changed to onGoogleLibraryLoad
  • Rather than having yolo as a callback param now google has added its generic functions to it global object google i.e. -- passing configuration params to yolo object now it is passed using google.accounts.id.initialize -- yolo promisified function is changed to google.accounts.id.prompt
  • openyolo.setRenderMode is changed to ui_mode key in the initialize object having value bottom_sheet and card for mobile and desktop view respectively. by default it handles itself. But you can force it by passing it. (optional) (NOT MENTIONED IN THE OFFICIAL DOCS)
  • context key can be passed in initialize object with value use, signup or signin to change the ui text prompting for the message for its usage. (optional)

And many more... You can visit Google One-Tap Reference

Examples

"Home Page" Google One-Tap 2.0 embedded inside an iframe in a form.

"Desktop Page" Google One-Tap 2.0 in a page without background blur.

"Mobile Page" Google One-Tap 2.0 on a page on mobile using a card view UX (overriding default bottom_sheet on mobile)