Google One Tap Passwordless sign-in
FreeThis 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.
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]
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]
[b][color=rgb(51, 51, 51)][u]is Displayed[/u][/color][/b] [color=rgb(51, 51, 51)]Event that occurs when this notification is displayed moment, and the UI is displayed[/color]
[b][color=rgb(51, 51, 51)][u]has Valid Response[/u][/color][/b] [color=rgb(51, 51, 51)]User has logged in using Google One Tap and Google is returning the credentials.[/color]