HIKO Social Login

현재 스토어가 레거시 고객 계정을 사용하고 있지 않아 이 앱과 호환되지 않습니다.

레거시가 아닌 고객 계정은 완전히 다른 인증 방식을 사용하며, 서드파티 앱이 로그인 경험을 커스터마이즈할 수 없습니다. 이러한 기술적 제약 때문에 소셜 로그인, 맞춤 가입 항목, 로그인 페이지 커스터마이즈 같은 기능은 레거시 고객 계정에서만 사용할 수 있습니다. Shopify 공식 문서에서 자세히 보기.

새로운 고객 계정은 이메일로 전송되는 일회용 코드로 로그인하며 서드파티 앱이 로그인을 완료할 수단을 제공하지 않으므로 소셜 로그인을 제공할 수 없습니다. Shopify 관리자 > 설정 > 고객 계정 에서 되돌리면 기존 로그인 양식이 복원되고 이 앱이 바로 작동합니다. 전환으로 고객과 주문이 영향을 받지는 않습니다.

새로운 고객 계정을 유지해야 한다면, 로그인 단계를 직접 작성한 코드로 제어하는 Headless 스토어에서는 이 앱을 계속 사용할 수 있습니다.

Shopify Starter 요금제에는 회원(고객 계정) 기능이 없어 이 앱을 사용할 수 없습니다.

자동 설치가 모든 테마에 맞는 것은 아닙니다. 그런 경우에는 테마 템플릿의 알맞은 위치에 태그를 직접 삽입하세요:

컨테이너에 지정할 수 있는 선택 속성:

• type: register 또는 login. 블록이 가입 버튼을 표시할지 로그인 버튼을 표시할지 결정합니다.
• ignore: 자동 레이아웃을 건너뛰고 직접 작성한 스타일과 마크업을 그대로 사용합니다.
• register_tag: 이 블록을 통해 가입한 모든 고객에게 이 값이 태그로 추가됩니다. 페이지별 가입을 구분하는 데 사용합니다.

앱 관리 > 로고 색상 > 순서 에서 위아래 화살표를 클릭하세요

일부 테마에서는 로그인 폼이 너무 넓어 블록 안의 로그인 버튼까지 함께 늘어납니다. 너비는 CSS로 조정할 수 있습니다. 예:

고객이 소셜 미디어 계정으로 로그인하면, Shopify의 Multipass 프로토콜이 켜져 있지 않은 한 앱이 고객 비밀번호를 무작위 문자열로 재설정합니다. 비밀번호를 다시 사용하려면 고객이 비밀번호 찾기 절차를 이용하면 됩니다. 앱은 이 문자열을 어떤 형태로도 저장, 기록, 표시하지 않습니다. Multipass 프로토콜을 사용하면 multipass 시크릿으로 암호화된 로그인 토큰으로 로그인할 수 있습니다. Multipass는 Shopify Plus 요금제에서만 제공됩니다.

Multipass 는 Premium > Multipass 에서 Shopify 관리자 > 설정 > 고객 계정 의 시크릿을 사용해 활성화합니다. 활성화하면 앱이 비밀번호 대신 서명된 로그인 토큰을 Shopify 에 전달하므로 고객 본인의 비밀번호는 전혀 건드리지 않습니다. Multipass 는 Shopify Plus 에서만 사용할 수 있습니다.

Premium > Google One Tap. One Tap 은 고객이 아무것도 클릭하지 않아도 스토어에 Google 계정 선택 화면을 표시하므로, 이미 Google 에 로그인한 방문자에게만 나타납니다.

자체 Google API 키를 사용하는 경우, 스토어 도메인을 Google Cloud 콘솔의 승인된 JavaScript 원본으로 등록해야 합니다. 등록하지 않으면 Google 이 origin_mismatch 로 요청을 거부하고, 페이지에 오류도 보이지 않은 채 아무것도 표시되지 않습니다.

네, 다음 경로에서 비활성화할 수 있습니다: 온라인 스토어 > 기본 설정 > 스팸 방지 > 로그인, 계정 생성, 비밀번호 복구 페이지에서 hCaptcha 사용 체크 해제

꺼야 할 필요는 없습니다. 앱은 로그인 양식을 제출하기 전에 Shopify 자체의 captcha 보호를 거치므로, hCaptcha 를 켜 둔 상태에서도 소셜 로그인이 작동합니다. 끄는 것은 로그인 단계의 번거로움에 관한 판단이며 이 앱의 요구 사항이 아닙니다.

이 앱은 고객의 이메일, 이름, 성, 전화번호, 마케팅 수신 동의에 대한 접근 권한을 요청합니다.

소셜 프로필 데이터는 당사 측 사본이 아니라 스토어 자신의 고객 metafield 에 들어갑니다. 당사 서버가 보관하는 것은 로그인 운영에 필요한 것뿐입니다. 스토어 설정, 소셜 계정과 Shopify 고객의 연결, 그리고 보관 의무가 있는 로그입니다. 삭제하면 그 전부가 제거됩니다.

Shopify 에서는 아무것도 삭제되지 않습니다. 이 앱이 기록하는 소셜 프로필 데이터는 각 고객의 hiko.socials metafield 에 있으며 이는 스토어에 속합니다. 고객, 주문, 해당 metafield 는 그대로 남습니다.

당사 측에서는 삭제 시 스토어 설정과 소셜 계정 연결이 서버에서 제거되며, 같은 시점에 Shopify 가 앱의 스토어 접근 권한을 회수합니다. 보관 의무가 있는 최소한의 로그만 남습니다.

소셜 로그인 동의 화면에 스토어 이름과 로고를 표시하려면 각 소셜 플랫폼에 직접 앱을 등록하고 승인을 받아야 합니다. 승인 후 API 키와 시크릿을 Professional > 사용자 지정 API 키에 입력하면 인증 흐름은 이 앱이 처리합니다. 자세한 내용은 업계 표준인 OAuth2를 참고하세요.

소셜 로그인을 사용하려면 스토어용 애플리케이션을 해당 소셜 플랫폼에 등록해야 합니다. 이 과정에서 이용 약관에 동의하고 필요한 권한을 신청하게 됩니다. 승인되면 플랫폼에서 API 키와 시크릿을 발급합니다. 고객이 소셜 계정으로 로그인하면 확인과 동의를 위해 플랫폼의 인증 서버로 이동하며, 그 화면에 스토어 이름, 약관, 요청 권한이 표시되어 고객이 승인하게 됩니다.



각 소셜 플랫폼의 참고 링크는 다음과 같습니다:

Apple로 로그인하는 고객은 이메일 주소를 숨길 수 있습니다. hide를 선택하면 개인 이메일을 보호하기 위해 Apple이 고유한 임의의 주소를 생성합니다. 생성된 주소의 도메인은 privaterelay.appleid.com입니다. Apple의 비공개 이메일 릴레이 서비스를 통해 이러한 고객과 메일을 주고받을 수 있습니다.

지원합니다. Amazon에는 북미(amazon.com), 유럽(amazon.co.uk), 극동(amazon.co.jp) 세 개의 리전이 있으며 고객 계정은 리전별로 따로 관리됩니다. 스토어에서 사용할 리전은 Professional > 사용자 지정 API 키 > Amazon > 에서 선택할 수 있습니다.

아니요. Shopify는 최초 설치 시의 청구 주기를 이어가며, 해당 주기가 끝날 때까지 판매자에게 청구하지 않습니다.

요금제는 앱을 열 때마다 Shopify 에 있는 스토어의 활성 구독에서 읽어옵니다. 즉 당사에 보관된 사본이 아니라 Shopify 결제를 따릅니다. 구독 에서 변경한 뒤에는 페이지를 새로 고치세요.

그래도 잘못된 것처럼 보이면 Shopify 가 기록한 활성 청구가 기준입니다. 구독 화면을 캡처해 보내 주시면 Shopify 기록과 대조해 드립니다.

Google은 2021년 9월 30일부터 임베디드 웹뷰와 알 수 없는 브라우저에서의 로그인을 지원하지 않습니다. 임베디드 웹뷰란 모바일 앱 안의 브라우저를 말합니다. 예를 들어 Facebook에서 스토어 링크를 열면 Chrome이나 Safari가 아니라 Facebook 자체 브라우저가 열립니다. Google은 서드파티 웹뷰를 보안 위험으로 간주합니다. 자세히 보기 .

이 제한은 Google 쪽 정책이며 모든 사이트에 적용되므로 설정으로 피할 수 없습니다. 고객은 들어온 앱에 내장된 브라우저가 아니라 일반 브라우저에서 스토어를 열어야 하며, 보통 해당 앱의 브라우저에서 열기 메뉴를 사용합니다.

사용자가 One Tap을 'X' 버튼으로 닫으면 같은 브라우저나 마지막으로 방문한 사이트에서 일정 기간 One-Tap이 표시되지 않습니다. 이를 exponential cool-down이라고 합니다. 이럴 때는 브라우저의 애플리케이션 데이터를 모두 지우면 복구됩니다. Chrome 예시: F12 > Chrome Developer Tools > Application tab > Clear storage in left tree > Select all data items > click Clear site data

One Tap 은 Premium > Google One Tap 에서 ITP 지원을 체크하지 않으면 iOS 와 Safari 에서도 표시되지 않습니다. 체크하더라도 이 브라우저들은 자동 로그인을 지원하지 않습니다.

같은 스토어의 다른 고객이 이미 사용하는 전화번호 또는 이메일을 가진 고객 레코드는 Shopify 가 거부하며, 고객에게 보이는 것은 그 거부입니다. 이는 고객 목록 안의 중복이지 소셜 계정의 문제가 아닙니다.

Shopify 관리자 > 고객 에서 해당 전화번호 또는 이메일을 가진 다른 고객을 찾아 두 건을 병합하거나 중복된 항목을 비우세요. 전화번호는 스토어 전체에서 고유해야 하며, 이것이 가장 흔한 원인입니다.

앱은 hiko.socials 를 json 으로 기록합니다. 스토어에서 이 metafield 를 다른 유형으로 정의해 두었다면 Shopify 가 기록을 거부하고 소셜 프로필 데이터는 건너뜁니다. 로그인은 계속 작동하고 계정 연결도 기록되며, metafield 사본만 그대로 남습니다.

데이터를 다시 기록하려면 Shopify 관리자 > 설정 > 사용자 지정 데이터 > 고객 에서 정의를 JSON 유형으로 변경하거나, 정의를 완전히 삭제하고 앱이 만들도록 두세요.

소셜 미디어 데이터는 고객 metafield에 JSON 형식으로 저장됩니다. JSON 스키마는 다음과 같습니다:

고객 metafield의 소셜 미디어 데이터에 접근하는 liquid 예시:

이 metafield 는 네임스페이스 hiko, 키 socials, 유형 json 입니다. 어떤 필드가 있는지는 소셜 플랫폼이 반환한 내용에 따라 달라지므로, 사용하기 전에 필드가 있는지 확인하세요.

설정 > Headless. 요청은 스토어의 Hydrogen 공개 액세스 토큰으로 서명합니다. React 와 Hydrogen 스토어에는 바로 쓸 수 있는 컴포넌트 패키지 hiko-social-login-react 가 있습니다.

요청 서명 방법을 포함한 전체 엔드포인트 문서는 지원팀에 문의해 주세요.