카카오 간편로그인시 이미지 변경

JavaScript
1 
					<li class="sns_login kakao">
						<a id="kakao-login-btn" class="btn-snsKKO"></a>
						<a href="http://alpha-developers.kakao.com/logout"></a>
					</li>






	Kakao.Auth.createLoginButton({
		container: '#kakao-login-btn',
		success: function(authObj) {
			// 로그인 성공시, API를 호출합니다.
			Kakao.API.request({
				url: '/v2/user/me',
				success: function(res) {
					$('#nameKakao').val(res.properties.nickname);
					$('#idKakao').val(res.id);
						// ID와 이름 확인
					if($("#nameKakao").val().length== 0 || $("#idKakao").val().length== 0){
						alert("카카오 연동시 오류가 발생했습니다. 시스템담당자에게 문의주시기 바랍니다.(1)");
					}
					
					$("#faceBookForm").submit();
				},
				fail: function(error) {
					alert(JSON.stringify(error));						 
				}
			});
		},
		fail: function(err) {
			alert("카카오톡 연동에 실패하였습니다(아이디/패스워드 확인)");
		}
	});

현재 소스에서 이렇게 간편회원 로그인 버튼을 사용하고있는데
다른페이지에서 로직그대로 사용하고싶은데

해당이미지가 자꾸 박혀있는데 이게 어디서 박혀있는지 어디서 오는건지 모르겠어요 ,

2

안녕하세요.

Kakao.Auth.createLoginButton 기능 사용 시, 전달된 container element에 이미지 버튼을 추가하게 됩니다.

이미 이미지 버튼이 있으신경우 해당 버튼의 onclick이벤트에서 Kakao.Auth.login() 또는 Kakao.Auth. authorize()를 사용부탁드립니다.

1개의 좋아요
3

해당 소스에서
Kakao.Auth.createLoginButton을 → Kakao.Auth.login 으로 바꾼후
위의 링크에서 onclik 으로 Kakao.Auth.login()을 쓰라는 말씀이실까요?

그러면 container 값도 변경해줘야하나요?

4

createLoginButton은 container 로 전달된 element를 버튼으로 변환(버튼 이미지도 추가) 및 클릭이벤트를 바인딩 하여 Kakao.Auth.login()를 호출해 주는 기능입니다.

버튼 자체를 직접 구현하고 싶으시다면 해당 버튼 이벤트에서 Kakao.Auth.login()를 호출하시면 됩니다. 버튼 구성 및 이벤트 바인딩을 사용자가 직접 하시기에 이 기능에는 container 파라미터가 필요하지 않습니다.

아래 문서를 참고 부탁드립니다.

Kakao Developers

5

추가로 하나더 여쭐게요 , 지금 모바일버젼이 개발망이나 운영망에서는 카카오톡 로그인이 가능한데
로컬에서는 불가능합니다 소스는 동일해서 이유를 모르겠는데
F12에서 콘솔에 해당 오류를 찍어내는데 원인 알수있을까요?

Failed to launch ‘intent:#Intent;action=com.kakao.talk.intent.action.CAPRI_LOGGED_IN_ACTIVITY;launchFlags=0x08880000;S.com.kakao.sdk.talk.appKey=a50806794a281c7134079bf97a6a9434;S.com.kakao.sdk.talk.redirectUri=https://kapi.kakao.com/cors/afterlogin.html;S.com.kakao.sdk.talk.state=cm40ip47kiuwj1gflekd;S.com.kakao.sdk.talk.kaHeader=sdk/1.43.1%20os/javascript%20sdk_type/javascript%20lang/ko%20device/Win32%20origin/https%3A%2F%2Fdev-mall.ourhome.co.kr;S.com.kakao.sdk.talk.extraparams=%7B%22client_id%22%3A%22a50806794a281c7134079bf97a6a9434%22%7D;S.browser_fallback_url=https%3A%2F%2Fkauth.kakao.com%2Foauth%2Fauthorize%3Fclient_id%3Da50806794a281c7134079bf97a6a9434%26redirect_uri%3Dhttps%253A%252F%252Fkapi.kakao.com%252Fcors%252Fafterlogin.html%26response_type%3Dcode%26state%3Dcm40ip47kiuwj1gflekd%26proxy%3DeasyXDM_Kakao_fkv53765aup_provider%26ka%3Dsdk%252F1.43.1%2520os%252Fjavascript%2520sdk_type%252Fjavascript%2520lang%252Fko%2520device%252FWin32%2520origin%252Fhttps%25253A%25252F%25252Fdev-mall.ourhome.co.kr%26origin%3Dhttps%253A%252F%252Fdev-mall.ourhome.co.kr;end;’ because the scheme does not have a registered handler.

6

안녕하세요

모바일 웹 브라우저에서만 동작 가능한 기능을 PC에서 실행 하셨기 때문입니다.
모바일 웹 브라우저에서 테스트 부탁드립니다.

모바일 웹 브라우저에서 간편로그인 기능 사용 시, 안드로이드의 경우 카카오톡 앱에 해당하는 커스텀 스킴이 실행됩니다. (실행 불가하면 웹 로그인으로 자동 전환)

PC브라우저에서 개발자 모드를 통해 모바일 웹브라우저로 변환하더라도 PC에서는 이 커스텀 스킴이 실행될수 없기에 나타나는 오류로 정상적인 내용입니다.