Setup Kakao Login to Shopify Store | Shopify Kakao SSO

Pre-requisite:

Before starting setup, make sure you have installed the miniOrange Social Login application.

Social Login

Allows users to SSO into the Store using Kakao credentials

Add Application

Step-By-Step Guide to Enable Kakao Login on Shopify Store

1.   Configure Custom App for Kakao Login

• Go to the Kakao Developers Console. Either Sign up or Log in with your existing Kakao Developer account. If you want to see the page in English language you can translate the page.
• At Kakao developers console, click on Add Application(애플리케이션 추가하기)

• Click on Add Application (애플리케이션 추가하기). Customize your app by adding an Icon (앱 아이콘), entering the App Name (앱 이름) (e.g TestingApp), and Business Name (사업자명). Go through the policies and make sure to click on checkbox. Now click on Save

• Click on the Application Name you have assigned to your app . For example in this guide, the application is called TestingApp.

• Navigate to Platform (플랫폼) section on the sidebar. Click on Web Platform Registration (Web 플랫폼 등록) under Web Section.

• Enter the site domain (사이트 도메인) and then save the changes by clicking on Save (저장)

• Site Domain

  https://testshop.myshopify.com ( In case you have your own domain, enter your domain here )


• Once saved you can now see Go to register (등록하러 가기) option under Web. Click on Go to register.

• You will be redirected to Kakao Login (카카오 로그인) under Products Settings (제품 설정) section. Click on Register Redirect URI (Redirect URI 등록)

• Copy the Redirect URI from the table below, and paste it into to the redirect URI section. Click on Save (저장)

Redirect URL

https://shop.miniorange.com/social-login/openidcallback/kakao


• Enable the State(상태) for Kakao Login displayed in Activation Settings(활성화 설정).

• Navigate to Product Settings(제품 설정) >> Kakao Login(카카오 로그인) >> Agreement items(동의항목) on the sidebar. Under the Privacy (개인정보) section , click on Setting (사용 안함) of profile_nickname

• Select Required Consent (동의 단계)and enter Purpose of Consent (동의 목적) and then click on Save.

• To set setting for profile_image click on Setting (사용 안함) of profile_image

• Select Required Consent (동의 목적 [필수])and enter Purpose of Consent (동의 목적) and then click on Save.

• Click on App Key (앱 키) from the left menu. Copy the REST API KEY (REST API 키) from this page.Keep the copied key handy as we will use it in further configurations.

• Navigate to Security (보안) section on the left sidebar . Click on Code Generation.

• Copy the generated code (코드) and keep it handy as we will use it in further configurations

2.   Configure the miniOrange Social Login Application

• Go to your Shopify store and navigate to the App section. Click on the miniOrange Social Login application.

• You will be redirected to Social Login Dashboard, and click on Kakao.

• Paste the previously copied Rest API Key and Code into the respective section. Click on the Save.


App ID	Rest API Key
App Secret	Code
Scope	profile,account_email

You have now successfully configured the miniOrange Social Login application side as well.

3.   3. Test your Configuration

• Click on Test Configurations on the Social Login Dashboard.

• A window should pop up, which confirms that all configurations are correct.

• Go to Social Login Dashboard, And make sure the toggle for Kakao is on. This ensures that users will see the button on the login page.

• Go to your Shopify Store >> Online Store >> Themes Click on Customize As Shown in the Image.

• Go to the App Embeds Section, and turn the mO Social Login widget On

• Now you can see the Kakao Social Login button is showing on your login.

You have completed the Shopify side configuration.

If you have any error or query, click here to see others.