Platform
Sign Up With Google

10min
Sign In with Google Tutorial
Introduction
Sign In with Google enables users to sign in to Apps using their Google accounts.
Prerequisites
To complete this tutorial, you will need:
An app created at Back4App
See the Create New App tutorial to learn how to create an app at Back4App.
Set up a Subdomain for your Back4app app
See Activating your Web Hosting and Live Query to learn how to create an subdomain in Back4App.
An Google Developer account.
1 - Create a New Back4App App
First of all, it’s necessary to make sure that you have an existing app created at Back4App. However, if you are a new user, you can check this tutorial to learn how to create one.
2 - Create a new Client Identifier
Log into your Google Developer account and go to Google API Console. Click Credentials and choose OAuth 2.0 Client IDs﻿
﻿
If you do not have a Consent Screen, Google will ask you to create one. Click on Configure consent Screen, you will be redirected to the following page:
﻿
Complete the screen consent configuration and hit Save﻿
Pick the platform you will need. For this example, I am using Javascript (Web Application), but you should pick the one you will be using.
In Authorized JavaScript Origins, replace the URL with your subdomain.
In Authorized redirect URIs, insert your subdomain followed by /redirect. As shown in the image below:
Note: If you do not have your subdomain enabled yet, please check the following guide to know how can you do this: Create your Subdomain﻿
﻿
After that you should have your Client ID and Secret:
﻿
3 - Retrieve your Code
Visit the following URL, changing the values for REDIRECT_URI and CLIENT_ID for the ones you created:
https://accounts.google.com/o/oauth2/v2/auth?scope=https%3A//www.googleapis.com/auth/drive.metadata.readonly&access_type=offline&include_granted_scopes=true&response_type=code&state=state_parameter_passthrough_value&redirect_uri=REDIRECT-URL&client_id=CLIENT_ID
The scopes necessary to retrieve the auth_token and later on the user_id are:
https://www.googleapis.com/auth/userinfo.email
https://www.googleapis.com/auth/plus.me
https://www.googleapis.com/auth/userinfo.profile
Log in with your Google account and the redirected website will have your code in the URL:
﻿
Copy the Code part of the URL only and run the following CURL command replacing the values YOUR_CODE, CLIENT_ID, CLIENT_SECRET, and REDIRECT_URI for the values of your application
Curl
1   curl -X POST \
2     https://oauth2.googleapis.com/token \
3     -F 'grant_type=authorization_code' \
4     -F 'code=YOUR_CODE' \
5     -F 'client_id=CLIENT_ID' \
6     -F 'client_secret=CLIENT_SECRET' \
7     -F 'redirect_uri=REDIRECT_URI'
1   curl -X POST \
2     https://oauth2.googleapis.com/token \
3     -F 'grant_type=authorization_code' \
4     -F 'code=YOUR_CODE' \
5     -F 'client_id=CLIENT_ID' \
6     -F 'client_secret=CLIENT_SECRET' \
7     -F 'redirect_uri=REDIRECT_URI'
﻿
Run it and you should retrieve your access token:
﻿
REMEMBER: the code can be used only once. If you get an error or don’t use your token, you must re-generate your Code to be able to run it again.
Now it is time to retrieve your Google's User ID. It is a numeric string that you will pass along as the id in step 4.
To do so, run the following command replacing the YOUR TOKEN string for the token you received in the previous command.
Curl
1   curl -X GET https://www.googleapis.com/userinfo/v2/me?access_token=YOUR_TOKEN
1   curl -X GET https://www.googleapis.com/userinfo/v2/me?access_token=YOUR_TOKEN
﻿
4 - Start the development
Now that the sign-in with Google is configured, you can start the development process.
The format for AUTHDATA is:
JSON
1   {
2     "google": {
3       "id": "user's Google id (string)",
4       "id_token": "an authorized Google id_token for the user (use when not using access_token)",
5       "access_token": "an authorized Google access_token for the user (use when not using id_token)"
6     }
7   }
1   {
2     "google": {
3       "id": "user's Google id (string)",
4       "id_token": "an authorized Google id_token for the user (use when not using access_token)",
5       "access_token": "an authorized Google access_token for the user (use when not using id_token)"
6     }
7   }
﻿
Here is the method for the iOS SDK:
Swift
1   PFUser.logInWithAuthType(inBackground: "google", authData: ["access_token":tokenString, "id": user]).continueWith { task -> Any? in
2    
3   }
1   PFUser.logInWithAuthType(inBackground: "google", authData: ["access_token":tokenString, "id": user]).continueWith { task -> Any? in
2    
3   }
﻿
And here for the Android SDK:
Java
1   Map<string, string> authData = new HashMap<string, string>(); 
2   authData.put("access_token", tokenString);
3   authData.put("id", user);
4   ParseUser.logInWithInBackground("google", authData){
5
6   }
1   Map<string, string> authData = new HashMap<string, string>(); 
2   authData.put("access_token", tokenString);
3   authData.put("id", user);
4   ParseUser.logInWithInBackground("google", authData){
5
6   }
﻿
Remember, this must be done at every login for every user.
Updated 28 Mar 2024
Did this page help you?
Instagram Basic Display