Give your customers an even easier login with their favorite Apps ⎯Google Login.
Learn how it works and how to configure it.
The first thing we have to do is go to the account that we have in Firebase.
Here in Firebase, you click on Build and then Add Project.
After clicking on add project, this screen will appear, where you must give your Project a name.
PS: Make sure to change the ID/name for your Login, so you can use your brand's name
You click on the button that says: Select parent resource.
This button will select the parent resource where you want that project to be.
And you click on continue.
In the next step, you must ensure that Google Analytics is Enabled for that project.
After clicking Continue, you will go to the menu (left side of your screen) and click on Project Overview, and the following screen will appear.
On this screen, you click where it says: Add App, and different options will appear; in this case, we will choose the Android option.
We will move on to our Builder since we need to extract some data.
In the Builder, we will select the project (app) that we want to have the Google Login.
And we are going to copy the Name and the Package.
We will add the Name and the Package we copied from our builder on the screen where we stay in Firebase to register the app we want to add.
It will also ask us for the SHA-1; this is obtained with a support agent; please contact support@ordering.co or submit a ticket to request it.
Note: the SHA-1 is only for the app
When you click "Register App," it will give you a file you must download.
🚨 Very Important: Save this file because if you lose it, you'll have to do all the steps again. 🚨
To the following steps, click Continue.
In the next step, we will click on Authentication in the menu, and the following screen will appear.
Here we will click on "Get Started."
We will select the option "Google."
Here, we will only add the user's email.
If that option ain't showing, enable the "Google" sign-in method
Now let's jump into your Ordering Builder
Go to your Builder > Select your app > Developers.
Select a JSON type file for Android, and add this path: android/app/google-services.json.
Then save the changes, and you will be able to build your Android app.
Add the following:
Type: JSON
(Path) Name: android/app/google-services.json
After the custom file is added, you'll have to change the file; this is where you upload the JSON file you downloaded a few steps back.
Click the 3 dots and change the file.
On this screen in Firebase, you will copy the code that comes in the part of WEB CLIENT ID.
We click the "Save" button, and the app we just uploaded will appear as Enabled.
We move to our Dashboard, and we are going to click on the following:
Settings > Advanced Settings > Integration: Google Login
In Google Settings, we will paste the code we copied in Firebase (Web Client ID) in the "Login Google ID" part, enabled Google Login, and save it.
To fully enable Google Login, you need to follow these extra steps, go to:
Settings > Basic Settings > Sites Login/Signup Settings
- Depending on the product, which can be a Website or App, follow these steps
Add again your Google Login ID, and enable the option
And the same thing with the Customer App
For the Web, we are going to do the following.
Click on: Project overview > Add App > And select Web
It will ask you for the name of your web page to register, and then a window with codes will appear.
Get in your project settings
From this window, you will copy API KEY and AUTHDOMAIN; these are data you'll use later on your Ordering Dashboard.
Now let's go back to the Authentication module.
Click on Authentication (menu), Settings, and Authorized Domains.
Next, click on the "Add domain" button, and this part will appear; here, we will add our domain name and click on Add.
Configure iOS
Create a new iOS app in the project dashboard.
Add the package of your app and a name ( the package must be the same as android)
The app store ID is optional.
Register the app and download the GoogleService.Info.plist
Then, to complete the configuration, press Next, Next, Next, and continue to console
For iOS, select a plist file, add this path: ios/GoogleService-Info.plist
Just like you did with the android JSON
Upload your GoogleServiceInfo.plist file and then save the changes.
Add Google ID in dashboard and iOS app-
Finally, only for iOS, go to your settings and add your reverse client ID.
You can find it in your GoogleServiceInfo.plist file under this name: REVERSE_CLIENT_ID after that, build your iOS app (This step is not required for Android)
For Android, go to your dashboard and the Google section, add your Google login ID and save the changes.
These Auth and Keys are found in your Web App (you can view them above also if required)
We will go back to our Dashboard in the Google Settings part; there, we will paste the codes that we just copied from Firebase, each one in its place, as shown in the image.
And finally, here in the Dashboard, go to Settings> Operation Settings > Login and Signup Settings.
Let's go to the part that says: Allows to use Google login in a site, select YES, and save the changes.
Now, go to your website, click on Login, and the popup will appear with Google Login enabled.
Note: once the Play Store approves the app, it's necessary to look for the new SHA1 key in the Play Console, to then add it to the Firebase settings.
Anything your customers might need, we have it.