Last updated: 2024-03-22
Estimated reading time: 5 minutes
❤️ This feature is available in our FREE Starter Plan. Navigate to Service Plan and check if you have subscribed to the Starter Plan or above.
❤️ If you haven't installed Ako Marketing App, click here to install.
Introduction
When customers and visitors use log in to their account through Akohub's social login, they will see a consent screen displaying Akohub's default logo and name.
In this article, we will guide you on how to customize the consent screens by adding your own logo and name. This will help provide a more consistent login experience for your customers.
Step1: Create a new project at Google cloud platform
What to do:
Log in to your Google account and create a new project.
What's the purpose:
Creating a new project provides Google a place to manage all data associated with the custom login and consent screen that you'll be setting up in the following steps.
Log in to your Google account at Google Cloud Platform. From Cloud overview > Dashboard > Click "Create project".
Name your project and click "Create".
Navigate to APIs & Services in the left sidebar, choose "OAuth consent screen" and select "External" as the user type, then click "Create".
Step2: Customize login screen and submit App registration
What to do:
Customize the login and consent screen with your brand name and logo, and fill out some information about your website in the registration form.
What's the purpose:
This step makes sure your customers see your brand's logo and name when they log in.
On the OAuth consent screen page, fill out the fields with the instructions below:
In the App Information section:
Enter your brand name in the "App name" field. Your brand name will replace the default Ako Login app name and appear on the consent screen.
Enter an email in the "User support email" field for users to contact you with questions about their consent.
In the "App logo" section, upload your brand logo. This logo will appear on the consent screen for users when they log in.
In the "App domain" section, enter the URLs of your "homepage, privacy policy, and terms of service". Please make sure you follow Google's user data policy:
Display privacy policy & terms of service links on your homepage.
Done domain verification for your homepage.
🚨If you've never verified your domain, check out our guide: Verifying Your Google Domain for Shopify Stores
In the "Authorized domains" section, enter your website URL without http:// or https://.
In the "Developer contact information" section, provide an email address where Google can notify you. Then, click Save and continue to move forward to the next step.
Click "Add or remove scopes"
Select both scopes ".../auth/userinfo.email" and ".../auth/userinfo.profile" as shown in the screenshot below. Once selected, click "Update", then "Save and continue".
(Optional) Only test users can access your custom Google login before the login screen is officially published. Click "+Add users" if needed. If you don't need it, just ignore the step and click Save and continue.
Double-check if the data you provided is correct at this step. If everything is correct, navigate to "Credentials" in the sidebar menu.
Step3: Create credentials for OAuth client ID
What to do:
Create a special ID for your website to link it with Google.
What's the purpose:
The OAuth client ID allows your website to securely communicate with Google for the custom login feature provided by Ako Marketing App. (The OAuth client ID is used to represent the custom login screen customized in Step 2.)
From the credentials page, click "Create credentials" and select "OAuth client ID".
Select "Web application" from the application type menu.
Follow the steps below to complete the form:
➊ Name your OAuth 2.0 client. This name is only used to identify the client in the console and will not be shown to your customers.
➋ Copy the URL "https://app.akohub.com" and paste it into the "Authorized JavaScript origins" field.
➌ Copy the URL "https://app.akohub.com/social/google/oauth" and paste it into the "Authorized redirect URIs" field.
➍ Click the "Create" button.
Once you have created the OAuth client, you will receive a "Client ID" and "Client Secret". Please copy them for the next step.
From your Shopify admin, navigate to Ako Marketing > Settings > Social Login > Custom App > Google. Paste the Client ID and Client secret into the fields and click Save.
Step4: Submit for verification and wait for approval
What to do:
Send your customized login and consent screen to Google for approval.
What's the purpose:
Google needs to check everything looks good and works correctly before your customers can use the new login screen.
Go back to the OAuth consent screen, click "Publish App".
Click "Confirm".
Click "Prepare for verification" in the verification status section.
Check again if the information filled in every step is all correct.
Once confirmed, scroll down to check off "My usage of OAuth Scopes complies with the Google API Services: User Data Policy" and click "Submit for verification".
You will soon receive an email from Google, reply to this email to begin the verification process. The review process can take a few business days.
Once Google approves the verification, the verification status will turn into "Published". ✨ And your customers will have the Google login screen with your brand name and logo.
