I’m making a post because this took forever to figure out. Here’s how you setup oauth for Google using the Bubble API Connector:
Notes:
-You need to use the Bubble API Connector to create an API for Google using oauth2 User-Agent flow Authentication if you want Bubble to handle token refreshes automatically for you
-I couldn’t get any of the free plugins to work, so it was easier to start from scratch troubleshooting with the Bubble API connector, which I prefer anyway
-Evidently the setup I am about to describe (and presumably most of the plugin options) do not work if you need to maintain multiple concurrent oauth sessions for each user.
Steps:
-For the Analytics API you need to setup your Google Cloud account (must have a payment method setup). Cloud>API and services>API Library: search for and enable whatever APIs you’ll require (in this case, at least the Analytics data API). Make sure you have the correct cloud project selected at the top of the page.
-In Google Analytics >Admin Settings: you’ll need to choose either ‘account access management’ or ‘property access management’ (depending on what level of API access you want to grant) and add your Google account to give your Google user an admin role (or whatever role your use requires).
-Cloud>API and services>Credentials: create a webapp oauth credential:
+Branding: Don’t add an app Logo or it will need to be verified
+Audience: You’ll be in test mode and will need to add your Google account as a test user
+Clients: You’ll be creating a client and the “Authorized redirect URIs” need to include every URL your oauth initialization/sign in can occur from and have to be exact, including all parameters, with no option to include wildcards. One of these URIs will come from your bubble backend which is shown in the API connector next to the ‘generic redirect’ checkbox when you select oauth2 (https://yourdomain/api/1.1/oauth_redirect), and because you’ll need to initialize your oauth from the dev branch of your app, you’ll need to include the “version-test” URL of the page you will be initializing oauth with (make sure to include the “?debug_mode=true” parameter because you’ll need to use debug mode to read errors). You’ll get “blocked” errors on the sign in page if you try to initialize oauth from a URL that isn’t in the URI list.
-The Cloud oauth “Client ID” and “Client Secret” are the “App ID” and “App Secret” in the Bubble API Connector (and you can copy them to the dev ID and dev Secret).
+Data Access: You’ll need to add scopes (each separated by a space) for any api data you want PLUS the bubble API connector oauth setup requires you to add the /userinfo.email and /userinfo.profile scopes or it will not work. All of your scopes must be added on Google Cloud and in the Bubble API Connector, each separated by a single space, like this: https://www.googleapis.com/auth/analytics.readonly https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile
-auth goes in header checked
-Header Key: Authorization: Bearer
-token as querystring unchecked
-Basic Auth unchecked
-access type offline checked
-use generic redirect url (this is where that URI URL came from) checked
redirect: https://accounts.google.com/o/oauth2/v2/auth
token endpoint: https://accounts.google.com/o/oauth2/token
profile endpoint: https://openidconnect.googleapis.com/v1/userinfo
-change User ID keypath from default “id” to “sub” and leave User email keypath as “email”
Do NOT use a shared header for calls, or it will screw up the oauth initialization. Just add all call headers individually. Not sure if that is true for shared parameters too. You don’t need any calls setup to initialize oauth.
Analytics calls:
https://analyticsdata.googleapis.com/v1beta/properties/:runReport
-analytics calls require specifying an api billing account, so you’ll have to add a header to each call:
key: “x-goog-user-project” value: “<your cloud account project ID (probably a hyphenated version of your cloud account name)>”
-Create a button somewhere that starts a workflow that contains the “sign up/login with a social network” action and select your Bubble API Connector Google API
-initialize oauth by clicking that button from the version-test/dev branch of your site with debugging enabled. It will redirect you to a Google sign-in and you’ll get a popup telling you if there are errors or confirming that oauth was successfully initialized.
-After you succeed at initializing oauth, you can reload the plug-in page and you should be able to initialize calls in the API connector and deploy to live until the oauth token expires for the dev branch. If your oauth token expires before you initialize your calls and deploy, you’ll have to reinitialize oauth on the dev branch.