Google Oauth - easy to follow tutorial?

Backendless Version (3.x / 6.x, Online / Managed / Pro )

Hi all

After successfully connecting the Bubble API through to Backendless to register a user (through the brilliant backendless tutorial) I’m now having a lot of difficulty setting up the Google Social OAuth. I’ve been on it for a good two days now trying a lot of different variations but can never seem to connect without some issue.

Unfortunately, the instructions are not as good (or maybe they’re more complicated) as the one previously referred to, which had nice and easy screenshots to follow.

Does anyone out there have an easy to follow guide? Particularly for Google Social OAuth (and this would probably be the one used most by the general consumer)? Screenshots for setting up the Bubble API for this social OAuth would be a major bonus :slight_smile:

Thanks in advance

Stephen

Hello @Stephen_Essex,

We are sorry the Login Providers instructions didn’t help.
Could you please provide more information which configuration steps caused difficulties?

Bubble.io also has the Google Sign In integration. Maybe this youtube tutorial could be useful.

Regards,
Olha

Hi Olha

Yes, I’m aware that Bubble has quite an easy system (as does Backendless if you use the Frontend builder), but I need to use Bubble for frontend and Backendless for backend in this instance, so I don’t want the Bubble Google OAuth login info going to the Bubble database. :slight_smile:

To be honest I’m just generally confused on the tutorial, as it’s a much higher level that the one previously mentioned.

For instance I have these questions/notes regarding the tutorial/info:

Thanks for your help as I’m keen to heavily embed Backendless into our work as I love the backend and all that you offer (and the way you constantly add more features). When Google Page Speed Insights starts to record some acceptable scores, at least comparable to Bubble, I’ll happy move over to the frontend aswell (we place a heavy emphasis on SEO and performance). :slight_smile:

I’m also interested to know if Google Oauth can only be used to ‘Login’ in a user, or can it also be used to ‘Sign up/Register’ a new user?

Hi @Stephen_Essex ,

  • In what instances would you use (1) ‘Login With Provider’s SDK’ and (2) ‘Login Without Provider’s SDK’ when creating a Web App? Is there a benefit to one over the other?

Login with provider SDK usually used when you have other logic on the client with operates with provider access tokens and/or when access token can be obtained in some other, more convenient, way.
Login without provider SDK is easier to implement for “no code”/“low code” approaches since the only thing that you will need (not counting initial configuration of Backendless app and provider app) is to obtain authorization link from Backendless API, open it in iframe or separate tab and read user info at the end.

  • Just as a note I think your ‘Configuring "Login with Google’ section of that page is slightly outdated.

I will ask my colleagues to check it. It is possible that Google changed something on their end after documentation was released.

Considering ’ Get Authorization URL API’ section, ‘Endpoint URL’ is https://xxxx.backendless.app/api/users/oauth/[providerCode]/request_url - (1) is this meant to be my https://[backendless-sub-domain].backendless.app/api/users/oauth/googleplus/request_url?

Yes, you are correct. Also you can make request using “general” domain (eu-api.backendless.com) but we highly recommend you to use generated or custom domains for interaction with app API and for external callbacks.

How does Backendless know the call is for me, is it purely based on the subdomain part of the url?

Yes, your app is identified by subdomain.

See image below, what Callback URL should be used for the Authorized redirect URIs when setting up Google Cloud?

You should use link with generated domain

See image of Bubble api setup? Do I need to add the headers? Are they correct? Should I be adding Parameters?

I assume that you following “Login without provider SDK” flow. In this case you should not call /api/users/oauth/googleplus/login endpoint. Instead you should call https://xxxx.backendless.app/api/users/oauth/[providerCode]/request_url, take generated URL from the response body and open it in controlled environment (iframe, separate browser tab).
That URL will lead user to the Google authentication form. There he authenticates on the Google side. After authentication Google will redirect user to the link which you have specified in “Callback URLs” section. Using that link Backendless will receive authentication code from Google, login (or register and login) user in its side and return user info with user auth token. Your logic should monitor that window and extract required user information at the end of the authentication process.

I’m also interested to know if Google Oauth can only be used to ‘Login’ in a user, or can it also be used to ‘Sign up/Register’ a new user?

It will create user if it is not present in application. Also it can “link” Google user profile to the existing Backendless user if their identities match.

Regards, Andriy

Thanks Andriy. Much appreciated. Just so I know the API is correctly configured, please see screenshot. Should I be adding a ‘Request Header’? Should also be passing any Parameters?


@Stephen_Essex ,

Sorry, I forgot to mention that this route performs redirect by default. To force force it to return URL you should pass next body in request:

{
  "redirect": false

In this case you will receive URL as plain text. To receive response as JSON you should add “contentType” field to the body with “application/json” as a value.
In this case response will look in the next way:

{
   "url": "authorization URL"
}

Regards, Andriy

Sorry Andriy but I’m still getting lost on this. Is there anyway to provide a screenshot of setup in Postman for instance (if Bubble is not available)?

You should put the following object in the Body area:

{
   "redirect": false
}

Thanks Stanislaw, but I always appear to get the following, as if it hasn’t worked (see below).

And this is from using the below

Try to rename the header from the contentType to the content-type

Unfortunately still the same issue.


Could you please tell which options are available in the Data Type dropdown?

Thanks Stanislaw. See screenshots.


Try to choose the Text option

I think we’re getting somewhere now as it’s a returned a url :slight_smile: See attached.

1 Like

Hi, @Stephen_Essex

Great, I think that is the right result you were looking for.

Regards,
Marina

Great. Many many thanks.

1 Like