카카오싱크 퍼머링크(일명 카카오싱크 qr) 발급 안내

jeremy.kim · 1월 29, 2020, 10:53오전

카카오싱크 간편가입을 위한 연동을 마쳤다면,
아래와 같은 사용자 시나리오를 지원할 수 있습니다.

회원가입유도

위 시나리오의 장점은

오프라인 환경에서 사용자의 QR스캔 & 동의 한 번으로 회원을 확보하실 수 있습니다.
이때 사용자 디바이스에 설치된 카카오톡 클라이언트의 계정 정보를 활용하기에, 사용자가 자신의 카카오계정 id/pw로 로그인하는 절차도 생략됩니다

위 시나리오를 사용자 입장에서 구분하면 아래 순서입니다.

사용자가 오프라인 매장에 부착된 QR코드를 카카오톡 또는 다른 앱으로 QR코드 스캔

사용자가 카카오톡 인웹뷰에서 서비스 가입을 위한 ‘카카오싱크 간편가입 화면’ 확인

사용자가 동의하면 가입 후 멤버십 화면을 보게 됨

위 시나리오의 지원을 위해서는 카카오싱크 퍼머링크라고 부르는 일종의 브릿지 URL이 필요합니다.
카카오싱크 퍼머링크는

어떤 앱으로 QR코드를 스캔하더라도,
카카오톡 클라이언트를 실행하고,
카카오톡 인웹뷰를 실행해, 여러분의 서비스 URL로 리다이렉트 해주는 역할을 합니다.

카카오싱크 퍼머링크 발급 방법

카카오싱크 퍼머링크와 QR 코드 발급을 지원하는 홍보도구가 오픈하기 전까지는,
번거로우시겠지만 DevTalk에 새 주제를 작성해 신청해주세요.
(@tiffany.dew @ruby.0722 멘션을 덧붙여 주시면 더 빨리 확인할 수 있습니다)

필요한 정보

카카오싱크 퍼머링크의 서비스 랜딩URL

디벨로퍼스 앱과 연결된 카카오톡 채널의 검색용 아이디
확인방법
ㄴ https://business.kakao.com/dashboard 로그인 후, 아래 네모 표시한 아이디를 알려주세요.

신청 시 참고할 점

카카오싱크 퍼머링크는 카카오톡 클라이언트 & 인웹뷰 실행을 지원하는 브릿지 URL로, 리다이렉트할 서비스 URL이 있어야만 의미가 있습니다. 따라서 이 자체로는 카카오싱크 연동을 생략하거나 우회할 수 있는 스펙이 아닙니다. 카카오싱크 연동을 마친 분들에 한 해 사용하실 수 있습니다.

리다이렉트할 서비스 URL이란 '카카오싱크 간편가입 화면을 호출하는 서비스의 URL을 의미합니다. 자세한 생성 방법은 아래 가이드를 참고하세요

카카오싱크 퍼머링크는 https://pf-link.kakao.com/.../… 과 같은 URL로, 현재는 카카오IP를 활용한 QR코드 이미지까지는 지원하지 않습니다. QR코드 생성 자체는 QR생성기를 활용해주세요.

카카오싱크 퍼머링크가 랜딩될 서비스 URL 확인 방법

카카오 로그인 API 또는 SDK 연동을 마쳤다면, 서비스 로그인 페이지의 ‘카카오 로그인’ 버튼의 랜딩 URL을 그대로 쓰실 수도 있습니다.

하지만 연동 방식에 따라서는, ‘카카오싱크 간편가입’ 화면을 호출하는 서비스 URL 자체가 없는 경우도 있습니다.

예1) 서비스 로그인 페이지에서 카카오 로그인을 위한 코드 받기를 바로 요청함
예2) 서비스 로그인 페이지에 JavaScript SDK를 import하고 사용자가 카카오 로그인 버튼을 클릭하면 카카오싱크 간편가입 화면을 호출하고 있음

위 경우 아래 방법으로 '카카오싱크 간편가입 화면을 호출하는 서비스 페이지(URL)'를 만들 수 있습니다.

카카오 로그인을 REST API 방식으로 연동한 경우
서비스 URL이 https://example.com/login/kakao 라고 가정하면, 사용자가 해당 페이지를 보면 항상(또는 userAgent 값이 KAKAOTALK일 때) 코드 받기 요청을 해주세요(kauth.kakao.com/oauth/authorize?client_id=…)

카카오 로그인을 JavaScript 방법으로 연동한 경우
서비스 URL이 https://example.com/login/kakao 라고 가정하면, 사용자가 해당 페이지를 볼 때 '카카오싱크 간편가입 화면(카카오 로그인)'을 호출해주세요.

위처럼 구현하시면 QR 코드를 스캔한 사용자는

1) 카카오싱크 퍼머링크 브릿지를 거쳐, 2) '서비스 URL’에 진입한 뒤, 3) 카카오싱크 간편가입 동의를 하고(이미 동의한 경우 생략), 4) '카카오싱크 간편가입’한 상태로 여러분 서비스 화면에 도달하는 것입니다

또 유입된 경로(예: 오프라인 지점)에 따라, 지점별 행사 페이지를 보여주거나 시즈널 이벤트 페이지로 리다이렉트하실 수도 있습니다(이때 가입처리한 회원이 볼 화면을 조정하시는 것은 여러분의 몫입니다).

사용자의 유입 경로 판별을 위해 카카오싱크 퍼머링크 뒤에 파라미터를 붙여 활용하실 수 있습니다.
아래 답글에서 확인해주세요.

jeremy.kim · 1월 30, 2020, 5:17오전

아래의 QR 생성과 URL인코딩은 검색으로 쉽게 찾을 수 있는 공개 사이트를 이용했습니다.
추후 카카오에서 정식으로 홍보도구(생성기)를 지원하기 전까지는 번거로우시겠지만 아래처럼 부탁 드리겠습니다.

카카오싱크 퍼머링크의 예시입니다.
https://pf-link.kakao.com/qr/_HxoZUj/pages/_S

테스트 편의를 위해, 랜딩될 서비스URL은 카카오 공식 홈페이지로 설정했습니다.
도달할 서비스 URL은 https://www.kakaocorp.com 입니다.

위 퍼머링크로 생성한 QR코드입니다.

위는 https://www.the-qrcode-generator.com/ 에서 생성했습니다.
어떤 앱으로 스캔해도, 최종적으로는 카카오톡 인앱뷰에서 https://www.kakaocorp.com 가 열립니다

만약 위의 QR코드를 모든 매장에 동일하게 비치한다면 , 모든 매장에서 가입된 사용자가 동일한 페이지를 보게 되어, 매장별 행사 안내를 다르게 하는 등의 대응할 수가 있습니다.

사용자의 유입 경로 확인 방법

사용자가 최종적으로 볼 서비스URL 뒤에 store=1, store=2 와 같은 파라미터를 붙일 수 있습니다.
https://www.kakaocorp.com 를 예로 들면,
스토어1에서 유입된 경우, https://www.kakaocorp.com/?store=1
스토어2에서 유입된 경우, https://www.kakaocorp.com/?store=2
와 같이 파라미터가 붙어, 파라미터를 기준으로 사용자의 유입 경로를 판별하실 수 있습니다.

카카오싱크 퍼머링크에 원하는 파라미터를 붙이는 방법

※주의: 복수 개의 파라미터를 지원하지만, 텍스트 길이나 유형에 따라 의도한 파라미터가 다 보존되지 않을 수 있습니다. 의도한 대로 작동하는지 반드시 테스트해주세요

https://pf-link.kakao.com/qr/_HxoZUj/pages/_S 를 기준으로 설명합니다.

https://pf-link.kakao.com/qr/_HxoZUj/pages/_S?query= 뒤에 원하는 파라미터를 붙여야 합니다.

원하는 파라미터를 그냥 붙이는 것이 아니라, URL인코딩된 값을 넣어야 합니다.
URL인코더는 검색으로 찾을 수 있는 사이트 중 어느 곳을 써도 무방합니다(참고 링크)
store=1을 URL인코딩 시 store%3d1이 되는데

URL인코딩한 값을 붙이면 아래와 같습니다.
https://pf-link.kakao.com/qr/_HxoZUj/pages/_S?query=store%3D1

사용자가 위 링크를 클릭하거나, 링크로 생성한 QR코드를 스캔하면
https://www.kakaocorp.com/?store=1 을 카카오톡 인웹뷰에서 보게 됩니다.

위 스펙을 활용하면 매장 별 유입을 구분할 수 있습니다.
스토어1: https://pf-link.kakao.com/qr/_HxoZUj/pages/_S?query=store%3D1
스토어2: https://pf-link.kakao.com/qr/_HxoZUj/pages/_S?query=store%3D2
스토어3: https://pf-link.kakao.com/qr/_HxoZUj/pages/_S?query=store%3D3

오프라인 매장별 가입자를 분석하거나 안내를 분기하려는 경우,

카카오싱크 퍼머링크 뒤에 원하는 파라미터를 URL인코딩하신 뒤, ?query= 에 넣어주세요.

{카카오싱크 퍼머링크}?query={파라미터} 로 QR코드를 생성하신 뒤, 해당 QR을 매장 별로 다르게 비치해주세요

파라미터 활용 시 주의할 점

의도한 파라미터가 서비스URL 뒤에 제대로 붙는지, 카카오톡 인웹뷰에서 반드시 확인해주세요.

파라미터에는 영문과 숫자만 넣어주시고(한글 안됨), 지나치게 긴 값은 피해주세요.