개발환경 : react next js
key : rest api key 사용
디벨로퍼스 앱 ID : 381416
안녕하세요
인스타그램 프로필의 링크에 자사몰 상품 상세페이지 주소를 넣어 자사몰로의 유입을 유도하고 있습니다.
아시다시피 인스타그램에서 링크 클릭할 경우, 인스타그램 인앱 브라우저를 통해 접속하게 됩니다.
인앱 브라우저로 진입하게 되면,
접속한 상품 상세페이지에서 자사몰 로그인 페이지로 이동 후,
로그인 페이지에서 카카오 싱크로 구현된 ‘카카오로 시작하기’ 를 통해 카카오 로그인 페이지로 이동합니다.
현재 아이폰으로 해당 위의 프로세스를 진행할 경우,
3)에서 이동한 카카오 로그인 페이지에서 ‘카카오톡으로 로그인하기’ 버튼이 표시되는 경우와 표시되지 않는 경우가 있습니다.
표시되지 않는 경우 : 1) > 2) > 3)의 절차 그대로 진행하는 경우
표시되는 경우 : 1) > 2) > 3) 의 절차를 그대로 진행한 뒤, 인앱브라우저를 닫고 다시 인스타그램 프로필의 링크를 열면 3)의 페이지가 열립니다. 그 다음 인앱브라우저에서 뒤로가기를 하면 2)의 페이지로 이동되며, 2)에서 다시 ‘카카오로 시작하기’ 를 눌러서 3)으로 이동하면 ‘카카오톡으로 로그인하기’ 버튼이 있는 페이지로 가게 됩니다.
어떠한 경우든 3)에서 카카오로 시작하기를 클릭할 경우, ‘카카오톡으로 로그인하기’ 버튼이 있는 페이지로 이동되길 희망합니다.
위의 케이스가 재현되는 환경 예시는
아이폰 11Pro (ios 17.1.2 & 인스타그램 버전 311.0.2.23.115)와
아이폰 12mini (ios 17.1.2 & 인스타그램 버전 311.0.2.23.115) 입니다.
비공개 릴레이 기능 꺼져있고, 모든 쿠키 차단 설정도 꺼져있는 상태입니다.
운영서버에서 JS 키로는 카카오톡 로그인 버튼이 나오질 않아서 이전에 rest api 키로 변경하고 운영중인 상태입니다.
안드로이드로 시도했을때는 카카오톡 로그인이 노출 되는것을 확인했습니다.
REST-API 방식에서 “카카오톡으로 로그인” 버튼은 UserAgent 값을 참고하여 표시 여부가 결정 됩니다. 인스타그램 웹뷰의 경우 그 동안 앱투앱 실행 여부가 인스타그램의 업데이트에 따라 허용되거나 제한을 받았기에 현재는 기본적으로 버튼을 표시하고 있지 않습니다.
"표시되는 경우 : 1) > 2) > 3) 의 절차를 그대로 진행한 뒤, 인앱브라우저를 닫고 다시 인스타그램 프로필의 링크를 열면 3)의 페이지가 열립니다. 그 다음 인앱브라우저에서 뒤로가기를 하면 2)의 페이지로 이동되며, 2)에서 다시 ‘카카오로 시작하기’ 를 눌러서 3)으로 이동하면 ‘카카오톡으로 로그인하기’ 버튼이 있는 페이지로 가게 됩니다. "
이럴때는 어떤 이유로 인해 카카오톡 로그인으로 나오는지 알수있을까요?
표시되는 경우가 있어서 , 해결방안이 있을거같은데 …
꼭 카카오톡으로 로그인하기를 띄우고싶습니다 ㅠㅠ
카카오 로그인과 별개로
iPhone 인스타그램 인앱브라우저에서 https://accounts.kakao.com/ 카카오 계정 페이지가 ‘카카오톡으로 로그인하기’ 를 제공하지 않는 것으로보이네요. 반대로 JS SDK authorize는 정상 작동 하네요.
배경을 다시 설명드리면,
(1) 카카오 로그인에서 사용하는 카카오톡 호출 스킴과 카카오 계정로그인 페이지의 스킴은 각각 다릅니다.
(2) 카카오 로그인에서 사용하는 카카오톡 호출 스킴은 HOST/URI-path 는 생략되어 있음
(인텐트 스킴 표준 스펙에서 HOST/URI-path 는 생략 가능하나 생략한 경우 페이스북 및 인스타그램 인앱브라우저에서 에러 처리 하는 것으로 확인)
(3) JS SDK authorize 방식 로그인 시, 최근 iPhone 카카오 로그인은 유니버설 링크를 도입했는데 정상 작동 인스타그램 인앱브라우저에서 정상작동 하는 것으로 확인
(4) 카카오톡을 호출하는데 사용하는 스킴은 카카오톡 업데이트가 필요하거 이전버전을 사용하면 변경된 스킴을 호출할 수 없으므로 변경하는 것이 어려움.
정리해보면
(1) android JS SDK authorize 방식 로그인 → 스킴 작동안함, 카카오 계정 로그인 페이지 이동 (‘카카오톡으로 로그인하기’ 없음)
(2) android REST-API 방식으로 로그인 → 카카오 계정 로그인 페이지 ‘카카오톡으로 로그인하기’ 표시
(3) iPhone JS SDK authorize 방식 로그인 → 유니버설 링크로 카카오톡 바로 실행 로그인 가능
(4) iPhone REST-API 방식으로 로그인 → 카카오 계정 로그인 페이지 이동 (‘카카오톡으로 로그인하기’ 작동안하여 버튼 제공안함)
위에 안내드린 것과 같이 인스타그램 인앱브라우저의 기능에 종속적으로 기능 제공할 수 밖에 없으므로
아래와 같이 처리하시면 좋을 것 같습니다.
(1) JS SDK authorize 방식 로그인을 기본으로 설정하여 카카오톡으로 간편 로그인 가능한 환경에 가장 간단하게 처리하시면 좋을 것 같습니다.
(2) android 인스타그램 인앱브라우저 일때, User-Agent에 Instagram 여부를 체크하셔서 REST-API 방식으로 로그인하시면 카카오 계정 로그인 페이지에서 ‘카카오톡으로 로그인하기’ 사용하실 수 있습니다.
(참고로 이러한 처리는 인스타그램 인앱브라우저에서 지원여부에 따라 변경될 수 있습니다.)
iPhone 인스타그램 인앱브라우저 User-Agent (* Instagram이라고 표기 안합니다. )
Mozilla/5.0 (iPhone; CPU iPhone OS 17_0_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148
그리고
"표시되는 경우 : 1) > 2) > 3) 의 절차를 그대로 진행한 뒤, 인앱브라우저를 닫고 다시 인스타그램 프로필의 링크를 열면 3)의 페이지가 열립니다. 그 다음 인앱브라우저에서 뒤로가기를 하면 2)의 페이지로 이동되며, 2)에서 다시 ‘카카오로 시작하기’ 를 눌러서 3)으로 이동하면 ‘카카오톡으로 로그인하기’ 버튼이 있는 페이지로 가게 됩니다. "
if (/Instagram/i.test(navigator.userAgent)) {
// REST-API 방식 로그인 : android 인스타그램 인앱브라우저에서만 동작
// 카카오 계정 로그인 페이지에서 ‘카카오톡으로 로그인하기’
}
else{
//JS SDK authorize 방식 로그인 : '아이폰으로 인스타그램 브라우져 또는 그외 기타 기본 브라우저'
// 카카오톡앱으로 로그인 : 카카오 계정 페이지에 진입하지 않고 카카오톡을 실행해 ID/PW 입력 없이 로그인
}
계정정보입력 (카카오톡으로 로그인하기 없이 id , password 입력) → 로그인 후에
로그아웃 하고 다시 로그인을할때 자동로그인이 되는데 ,
인스타그램 인앱브라우저에 카카오 계정 페이지는 로그인된 상황이고, 운영하시는 사이트만 로그아웃된 것으로
카카오 계정 페이지는 다시 ID/PW입력 할 필요 없어서 그런것입니다.
인스타그램에서 아래 URL로 로그인 해보시면 ‘카카오톡앱으로 로그인’ 확인하실 수 있습니다.
JS SDK authorize 방식으로
최초 iphone 인스타그램 인앱브라우져에 접근후 카카오 로그인을 실행하면 위와 같이 ID/PW 입력 없이 로그인 실행이 된다는거죠?
위와 같이 분기를 칠때
if (/Instagram/i.test(navigator.userAgent)) {
https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URL}&response_type=code
}
else{
https://kauth.kakao.com/oauth/authorize?client_id=${JAVASCRIPT_KEY}&redirect_uri=${REDIRECT_URL}&response_type=code
}
}
로 키만 변경해줘도 JS SDK authorize 방식으로 인지가 될까요
아니면 window.Kakao.Auth.authorize 해당 함수를 통해 호출이 필요할까요?
JS SDK authorize 방식으로
최초 iphone 인스타그램 인앱브라우져에 접근후 카카오 로그인을 실행하면 위와 같이 ID/PW 입력 없이 로그인 실행이 된다는거죠?
네, 계정 로그인 페이지로 이동하지 않고 바로 카카오톡 앱을 띄워 동의창 표시합니다.
동의 후, 또는 로그인 후 원래 앱으로 자동으로 돌아가지 않고 "닫기"나 뒤로 해야하는데 이는 아이폰 사용자들은 학습된 내용이라 큰 문제 없어 보이나 동선은 한번 확인해보시면 좋을 것같아요.
로 키만 변경해줘도 JS SDK authorize 방식으로 인지가 될까요
아니면 window.Kakao.Auth.authorize 해당 함수를 통해 호출이 필요할까요?
