💛 This feature is available in our FREE Starter Plan, navigate to More > Service Plans and check if you have subscribed to the Starter Plan or above.
Introduction
When members and visitors use Akohub's social login feature to log in, they will see a screen to log in with their social accounts. By default, it shows Akohub's logo and name. In this article, we will guide you on how to customize the login screens by adding your own logo and name, providing a more consistent login experience for your members.
Custom Google Login
STEPS:
Create your Google Cloud Platform project at this link: https://console.cloud.google.com
Navigate to OAuth consent screen on the sidebar, select External as the user type and click the Create button.
Customize your login screen in the OAuth consent screen: https://console.cloud.google.com/apis/credentials/consent, you will need to provide the following information:
In the App name field, enter your brand name and provide a user support email.
Upload your brand logo.
In the App domain section, enter the URLs for your homepage, privacy policy, and terms of service.
In the Authorized domains field, enter your website URL without specifying the scheme (http:// or https://)
Provide an email address where Google can notify you in the Developer contact information section.
Click Save and continue button to submit this form and wait for the app verification.
Go to the Credentials page: https://console.cloud.google.com/apis/credentials and click Create credentials > select OAuth client ID.
Select Web application from the application type menu.
Follow these steps to add the necessary information:
Provide a name for 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 on 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 Ako Marketing dashboard, navigate to Settings > Social Login > open the Custom App section for Google. Paste the Client ID and Client Secret into the fields here.
Custom Facebook Login
STEPS:
Create a Facebook app at this link: https://developers.facebook.com/apps
Follow the steps to complete the settings: https://developers.facebook.com/docs/development/create-an-app
Type your brand name in the Display name. It will be shown in the Facebook login popup window to your customers.
Type "
app.akohub.com" and your shop's domain in the App domains.Type the privacy policy URL of your shop in the Privacy Policy URL and the User data deletion.
Type the terms of service URL of your shop in the Terms of Service URL.
Upload your brand's logo in the App Icon.
Type your shop's URL in the Website > Site URL.
In the Facebook Login > Settings, please enter the callback URL: "
https://app.akohub.com/social/facebook/oauth" in the field called Valid OAuth Redirect URIs.
After you have obtained the App ID and App Secret, go to the Custom App section under Settings in Ako Marketing. Copy the App ID and App Secret, then paste them into the correct fields.
Custom LINE Login
STEPS:
Create a Line developer account: https://developers.line.biz/console
Create a new Provider and a new Channel.
Choose the Line Login.
Fill in the Channel name, Channel description, Email address, Privacy policy URL, and Terms of use URL. Choose the Web app as the App types.
At the LINE Login tab, please enable Use LINE login in your web app and type
https://app.akohub.com/social/line/oauthin the Callback URL field.
Please apply for the Email address permission in the OpenID Connect. You can follow the tutorial provided at this link: https://developers.line.biz/en/docs/line-login/integrate-line-login/#applying-for-email-permission and complete the submission process. When asked to upload a screenshot, you can simply upload your brand logo for submission.
Once you have obtained the Channel ID and Channel Secret, go to the Custom App section under Settings in Ako Marketing. Copy the Channel ID and Channel Secret, then paste them into the correct fields.
