All Plugins
Google One Tap Passwordless sign-in
Free
This embedded UX allows an end user to sign-in directly when a Google iframe is embedded into your web pages. The Automatic sign-in option enables frictionless user sign-in which can lead to more users signin into your app.
About
[center][h1][b]Google One-Tap Passwordless Sign-In Plugin for Bubble.io[/b][/h1][/center] [b]Simplify and streamline user authentication with our Google One-Tap Passwordless Sign-In Plugin for Bubble.io![/b] This plugin allows users to quickly and securely sign in to your website using their Google account, enhancing the user experience and improving security. [b]Key Features:[/b] [ml][ul][li indent=0 align=left][b]Quick and Easy Authentication[/b]: Users can sign into your website effortlessly using their Google account, eliminating the need for passwords.[/li][li indent=0 align=left][b]Secure Profile Information Sharing[/b]: With user consent, securely share Google profile information with your platform, ensuring data privacy and security.[/li][li indent=0 align=left][b]Seamless Sign-Up Process[/b]: The sign-up process involves obtaining the user's consent to share their profile information. While typically used to create a new account on your site, this is not a mandatory step.[/li][li indent=0 align=left][b]One Tap Enablement:[/b] When One Tap is enabled, users are presented with a consent and sign-in dialog, making the authentication process swift and user-friendly.[/li][/ul][/ml] [b]Enhance your Bubble.io application with the Google One-Tap Passwordless Sign-In Plugin.[/b] Provide your users with a fast, secure, and convenient sign-in experience, reducing friction and improving user engagement on your platform. [ml][ul][li indent=0 align=left][b]Demo:[/b] [url=https://plugins.datamaticsoftware.com/google-one-tap]https://plugins.datamaticsoftware.com/google-one-tap[/url][/li][li indent=0 align=left][b]Documentation:[/b] https://plugins.datamaticsoftware.com/documentation/google-one-tap?plugin=google-one-tap[/li][li indent=0 align=left][b]Editor:[/b] [url=https://bubble.io/page?type=page&name=google-one-tap&id=datamatic-04&tab=tabs-1]https://bubble.io/page?type=page&name=google-one-tap&id=datamatic-04&tab=tabs-1[/url][/li][/ul][/ml]
Setup Instructions
This are step-by-step instructions on how to get the plugin working on any Bubble App.
[ml][ol][li indent=0 align=left]Add this plugin to your application.[/li][li indent=0 align=left]Add element 'Google One Tap' into the Bubble Editor (add this at the top and not inside groups or elements)[/li][li indent=0 align=left]Under plugin tab locate 'Google Identity'[/li][li indent=0 align=left]Go to [color=inherit][url=https://console.cloud.google.com/]https://console.cloud.google.com/[/url][/color] (create an account if you don't have one).[/li][li indent=0 align=left]Navigate to APIs & Services then click in the Credentials section in the left menu.[/li][li indent=0 align=left]Click create credential, Oauth Client ID[/li][ol data=1][li indent=1 align=left]Application Type: Web[/li][li indent=1 align=left]Authorized JavaScript origins: [YOUR DOMAIN WITHOUT / AT END] (for example [url=https://plugins.datamaticsoftware.com]https://plugins.datamaticsoftware.com[/url])[/li][li indent=1 align=left]Authorized redirect URIs: [YOUR REDIRECT URI] (can be the same as the page using the Google One Tap)[/li][li indent=1 align=left]Save the new Client ID[/li][/ol][li indent=0 align=left]Return tu Bubble Plugin Tab and place your Client ID and Login URI (it can be parent page)[/li][li indent=0 align=left]Setup the 'Google One Tap'[/li][li indent=0 align=left]On the Worflow section, use 'Google One Tap has Valid Response' to get the exposed states of the element.[/li][/ol][/ml]
Full Documentation
[color=rgb(51, 51, 51)]This plugin will give you a one Element: [/color][b][color=rgb(51, 51, 51)]Google One Tap[/color][/b][color=rgb(51, 51, 51)], and two Events: [/color][b][color=rgb(51, 51, 51)]A Google One Tap Is Displayed[/color][/b][color=rgb(51, 51, 51)] and [/color][b][color=rgb(51, 51, 51)]A Google One Tap Has a Valid Response[/color][/b][color=rgb(51, 51, 51)]. You need to add the Element to your Editor and set the Context, Margins and Position for the plugin to work. Also don't forget to include your [/color][i][color=rgb(51, 51, 51)]Client ID[/color][/i][color=rgb(51, 51, 51)] and [/color][i][color=rgb(51, 51, 51)]Login URI[/color][/i][color=rgb(51, 51, 51)] in the Plugin tab section.[/color]
[color=rgb(51, 51, 51)]And in the Workflow add the Event 'A Google One Tap Has A Valid Response' to make the actions based on the response of Google (for example create an account for a user)[/color]
[color=rgb(51, 51, 51)]Google One Tap contains the following properties to be used:[/color] [ml][ul][li indent=0 align=left][b]Context:[/b] This field changes the text of the title and messages in the One Tap prompt. Possible values: signin - "Sign in with Google", signup - "Sign up with Google", use - "Use with Google"[/li][li indent=0 align=left][b]Margin Top:[/b] Margin from top of the body element[/li][li indent=0 align=left][b]X Position:[/b] Define wether One Tap prompt will appear from the right or the left side. Co-related to X margin[/li][li indent=0 align=left][b]X Margin:[/b] Will set the margin of the side that was chosen in X Position (e.g if chosen 'Left' and set to 10, the One Tap prompt will appear on the left side with 10px margin from left).[/li][/ul][/ml] [color=rgb(51, 51, 51)]Google One Tap also contains the following exposed states:[/color] [ml][ul][li indent=0 align=left][b]Not Displayed Reason:[/b] The detailed reason why the UI isn't displayed. The following are possible values: browser_not_supported, invalid_client, missing_client_id, opt_out_or_no_session, secure_http_required, suppressed_by_user, unregistered_origin, auto_cancel, user_cancel, issuing_failed, credential_returned, cancel_called, flow_restarted, unknown_reason[/li][li indent=0 align=left][b]Host Domain:[/b] If present, the host domain of the user's GSuite email address[/li][li indent=0 align=left][b]Email:[/b] The user's email address[/li][li indent=0 align=left][b]Email Verified: [/b]true, if Google has verified the email address[/li][li indent=0 align=left][b]Name:[/b] First + Last Name of the user[/li][li indent=0 align=left][b]Picture:[/b] If present, a URL to user's profile picture[/li][/ul][/ml]