Wix(윅스)에서 카카오 로그인 구현하는 방법이 궁금합니다

윅스에서 visual studio code로 rest api를 활용해서 개발하고 있습니다. 초보자라서 구현 방법에 대해서 자세히 알려주시면 감사하겠습니다.


안녕하세요.

카카오 로그인을 구현하려면,

(1) 인가 코드 요청 → 카카오측에서 로그인 및 동의창 동의하고
(2) 운영하시는 사이트에 리다이렉트 URI로 돌아가 액세스 토큰 발급 API 호출하시고
(3) 사용자 정보 조회 API 호출하여 Backend Databse에 고객정보 저장까지 구현하셔야합니다.

윅스를 사용해보지 않아서 정확한 안내는 어려운데요.
윅스를 사용하며 DB 접근까지 가능한 구조인가요?

윅스를 사용하여 DB 접근까지 가능한 구조입니다.
html코드를 요소로 삽입해서 구현하고 있습니다. 그런데 자꾸 KOE006 에러가 발생합니다.
구현하고자 하는 사이트 주소는 https://www.chimacplanet.com/ 이고
redirect uri 코드가 문제인 것 같은데 어떻게 해결해야 할까요?

카카오 로그인 예제
<script>
    // 카카오 SDK 초기화
    

    // 카카오 로그인 버튼을 생성
    Kakao.Auth.createLoginButton({
        container: '#kakao-login-btn',
        success: function(authObj) {
            // 성공 시 리다이렉트 URL로 이동
            location.href = 'https://chimacplanet.com';
        },
        fail: function(err) {
            alert(JSON.stringify(err));
        }
    });
</script>

사용하신 createLoginButton 함수는 팝업방식 로그인으로 최신 버전 JS SDK에서는 지원하지 않는 함수 입니다.

authorize 함수에 redirectURI 설정하셔서 사용하시는 것을 권장드립니다.

JavaScript | Kakao Developers JavaScript

이와 별개로 오류 발생하는 이유는 팝업 방식 로그인을 사용하면서 JAVASCRIPT_KEY를 사용하지 않고 REST_API_KEY를 사용해서 오류 발생한 것으로 보입니다.

윅스에 카카오 로그인 구현 성공하셨나요? 저도 작업 중인데 초보라 너무 어렵네요 ㅠㅜ 윅스에 JS 파일 못 올린다는데 sdk 파일은 카카오쪽 url로 연결하시나요?

JavaScript | Kakao Developers JavaScript

</> 버튼 클릭하셔서 스크립트 참조 태그 적용하시면 좋을 것같습니다.

안내해주신대로 스크립트 태그 넣어 구현 중인데 계속 Bad Request가 떠요. URI문제인가요? URI 주소는 무엇으로 세팅해야 하나요? 로그인이 구현된 페이지 주소로 현재 세팅해 놓았어요.

Bad Request가 떠요. URI문제인가요?

어떤상황에서 발생하는지 에러인지 확인 위해 관련 캡쳐 첨부 부탁합니다.

URI 주소는 무엇으로 세팅해야 하나요?

이것 역시 어디에 사용되는 URI 주소 말씀인지 추가 설명 부탁드려요.

https://www.drconnect.kr/kakao-test 여기서 테스트 중이구요
Screenshot 2023-08-14 at 12.12.36 PM

카카오 로그인은 iframe 안에서는 작동하지 않습니다.

캡쳐해주신 화면 과 기재해주신 주소에서 로그인 시도했을때 화면이다르네요. 카카오 계정에 로그인하기 전 화면이군요. 프레임 안이 아닌 페이지에서 처리되도록 해주세요~