본문 바로가기
카테고리 없음

SNS 페이스북 트위터 카카오 공유하기 , 로그인 정보 가지고오기

doridon 2016. 10. 31. 15:16

항상 다른분들이 만들어놓으신거 사용만하다가 이번에 새로 만들어보면서 정리... 미완성 허허 급한대로 임시방편 처리

해당 기능은 공유하기 후 어떤 사용자가 공유를 완료하거나 열었을경우 해당 계정의 정보를 가지고와서 DB에 저장후

누가 언제 공유했다라는 정보를 알려주는 간단한기능인데 sns 는 간단하지않다....


 


앱정보 확인

https://developers.facebook.com/apps/



기능 페이스북 공유하기 클릭시 팝업이 실행되며 팝업에서 공유하기 클릭시 DB에 해당정보 저장

$(function(){
FB.init({
      appId: '2798325790820xx',
      xfbml: true,
      status: true, // 로그인 상태체크
      cookie: true,
    });
})


FB.getLoginStatus(checkLoginStatus); // 공유하기 버튼 누를경우 메서드 호출  팝업이 열린후 팝업에서 공유하기를 클릭하면 사용자의 개인아이디 등등과 프로필이미지경로정보등을 db로 저장하기위해셋팅
// 누가 언제 공유했는지 공유이력을 남김 창을 닫을경우 재호출되며 무한루프가 발생해서 메서드 하나 추가했음 임시방편

function authUser() {
  FB.login(checkLoginStatus2, {scope:'email'}); // 버튼클릭시 동작 신뢰할수있는 사이트인지 인증여부를 받음
  return false;
}

function checkLoginStatus(response) {
	if(response && response.status == 'connected') { // 로그인 상태면 개인정보 가져와서 db에 셋팅하기위한 준비를함 
	  // alert('User is authorized');
		FB.api(
			response.authResponse.userID, // 페이스북 고유 키값으로 개인정보 조회
			function (response2) {
				if (response2 && !response2.error) {
				        /* handle the result */
				}
				$("#facebookName").val(response2.name);
				$("#facebookId").val(response2.id);
			     
				$.ajaxSetup({ cache: true });
				
		        $.getScript('//connect.facebook.net/ko_KR/sdk.js', function(){
		        FB.ui({
		            method: 'share',
		            title: "${param.bdTitle}",
		            
		     			description : "${param.description}",
		            
	     			
	     				picture : imgUrl,
				    
		            href: "${cacheUtil:getPrivateCdName('H100',devUtil:getProperty('common.siteCd'))}${param.pathname}?${param.linkParams}",
		          },
		          function(response) {// 페이스북에서 게시를 누를 경우에 실행 됨 
		            if (response && !response.error_code) {
		            	snsShare("${param.bdId}","02"); 

//////////////////////////// 여기는 공유하기 구현부분  메서드로 빼둔거지만 정리편의상 적음 아마도되겟지 ?
////////////////////////////공유하기의 경우 사파리 브라우저는 새창열기시 팝업차단이
//////////////////////////// 기본적으로 되어있어서 팝업 유무를 true / false 로 받던지 아님 현재창에서 열어버리던지 했음


			if(getBrowser()=='safari'){ //팝업 차단이 기본으로 설정되있는 사파리(아이폰)의 경우 현재 창에서 이동하도록 설정 
					//사실 생각해보면 이부분은 function 쓸필요없이 유알엘로 호출해도 되겠넹
				 var facebookUrl ='https://www.facebook.com/dialog/share?';
				 facebookUrl+='&app_id='+appId;
				 
				 facebookUrl+='&description='+description;
				 	
				 
					 facebookUrl+='&picture='+imgUrl;
				 	
				 facebookUrl+='&title='+kakaoTitle;
				 facebookUrl+='&href='+orgUrl;
				location.href=facebookUrl;
			}else{
				if(description.length>95){
					description = description.substring(0,95); // ie 하위버전에서 디스크립션이 길어져서 공유하기가 먹통이 되었음 고갱님의 요구조건에 맞춰서 분기처리 
				}
				FB.ui({
					method: 'share',
					title: kakaoTitle,
					
							description : description,
					
					
							description : '     ',
					
					
							 picture : imgUrl,
					
					href: orgUrl
				 });
			}
//////////////////////////// 공유하기 종료 맞나 

		            } else {
		            	
		            }
		        });
			  });
		        
			}
		);
	} else {
		 authUser(); // 로그인 상태가 아니라면 인증 상태로 이동 
	}
}

<%-- 무한 루프 방지로 추가  
checkLoginStatus 는  FB.getLoginStatus(checkLoginStatus) 실행시 로그인 여부에 따라서 팝업 실행  

checkLoginStatus2는  인증여부 팝업(authUser() 수행 후) 에서 창을 닫을 경우   다시 물어보지않고 종료 --%>
function checkLoginStatus2(response) {
	if(response && response.status == 'connected') {
	  // alert('User is authorized');
		FB.api(
			response.authResponse.userID, // 페이스북 고유 키값으로 개인정보 조회
			function (response2) {
				if (response2 && !response2.error) {
				        /* handle the result */
				}
				$("#facebookName").val(response2.name);
				$("#facebookId").val(response2.id);
			     
				$.ajaxSetup({ cache: true });
				
		        $.getScript('//connect.facebook.net/ko_KR/sdk.js', function(){
		        FB.ui({
		            method: 'share',
		            title: "${param.bdTitle}",
		            
		     			description : "${param.description}",
		            
	     			
	     				picture : imgUrl,
				    

		            href: "${cacheUtil:getPrivateCdName('H100',devUtil:getProperty('common.siteCd'))}${param.pathname}?${param.linkParams}",
		          },
		          function(response) {// 페이스북에서 게시를 누를 경우에 실행 됨 
		            if (response && !response.error_code) {
		            	snsShare("${param.bdId}","02");
		            } else {
		            	
		            }
		        });
			  });
		        
			}
		);
	}
}

 

트위터 사용자 인증하기

트위터는 봐도 봐도 잘모르겠다....

일반 jsonp 처럼 호출도 안되고....

java단에서 해결함 ... 근데 제대로 만든건지 모르겠네 허허허헣

 

트위터의 문제점은  https://twitter.com/"+memId+"/profile_image?size=normal 로 이미지 정보를 가지고와서 사용자 정보를 뿌리면

이미지가 모든브라우져에서 제대로 나오지않았던점 어차피 java에서 oauth 인증을 받아 객체정보를 가지고 있으니 객체에서 가지고오면 되는문제

괜히 jsonp 니 뭐니로 해서 가져올 필요가없었음...

 

트위터 a1 로그인 -> 자바에서 인증 - > 트위터 로그아웃후 다른계정 a2 로그인 -> 나는 a2로 로그인 되어있지만 인증은 a1 로 받아서 a1 정보를가지고옴

해당 방법에 대해서는 덧글 솔루션 라이브리나 이런것도 같은현상이 있긴한데 이건 어쩔수없는듯...

 

 

 

https://apps.twitter.com/app/13206???/setting

셋팅 메뉴가서 설정 url 이랑 도메인 셋팅

 

  <dependency>
   <groupId>org.twitter4j</groupId>
   <artifactId>twitter4j-core</artifactId>
   <version>4.0.4</version>
  </dependency>

메이븐에 필요 라이브러리 추가 

 


	/** 자바영역 
	 * 소셜펀딩 트위터 로그인 정보 가지고오기 
	 * 
	 * https://apps.twitter.com/app/???????/settings 트위터 앱의 이름 , 도메인 콜백 정보 설정 
	 * 
	 * Website * http://camp
	 * Callback URL http://camp???????????????/callbackTwitter.do
	 * 
	 * https://apps.twitter.com/app/???????/keys   Consumer Key (API Key) 값과  	Consumer Secret (API Secret) 값 설정 
	 * 

	 * @throws TwitterException
	 */
	@RequestMapping(value="/callbackTwitter.do", method = {RequestMethod.GET, RequestMethod.POST}) 
	public ModelAndView callbackTwitter(HttpServletRequest request,HttpServletResponse response, ModelMap modelMap) throws TwitterException {
		
		Twitter twitter = new TwitterFactory().getInstance();			
		twitter.setOAuthConsumer("RVKGWELigyF59RUQouvSWXXXX", "CktNW85HNzwvxxUXK7JJGue9rzYVJVocairMkRIZPLmdXXXX"); //저장된 consumerKey, consumerSecret

		AccessToken accessToken = null;		
		
		String oauth_verifier = request.getParameter("oauth_verifier");
		
		String viewPage = "/socialFunding/callbackTwitter";
		ModelAndView mav = new ModelAndView(viewPage);
		
		if(StringUtil.isBlank(oauth_verifier)){ //권한정보 유무 체크 
			RequestToken requestToken =  twitter.getOAuthRequestToken();
			String returnUrl =requestToken.getAuthorizationURL();
			request.getSession().setAttribute("requestToken", requestToken);
			mav.addObject("returnUrl" ,returnUrl); //트위터 인증페이지로 이동시켜서 인증을 받음 인증 한번받으면 else 문 탐 
			
		}else{
			RequestToken requestToken = (RequestToken )request.getSession().getAttribute("requestToken");	
			accessToken = twitter.getOAuthAccessToken(requestToken, oauth_verifier);
			twitter.setOAuthAccessToken(accessToken);
			
			User user = twitter.showUser(accessToken.getUserId());
			String url = user.getProfileImageURL(); //유저의 이미지 정보
			//https://twitter.com/"+memId+"/profile_image?size=normal는 사용하면 안됨
			
			//해당 트위터 사용자의 이름과 아이디를 가져온다.
			//System.out.println(accessToken.getUserId());    //트위터의 사용자 아이디
			//System.out.println(accessToken.getScreenName()); //트워터에 표시되는 사용자명 	
			
			request.getSession().setAttribute("twitterImgUrl", url);
			request.getSession().setAttribute("twitterName", accessToken.getScreenName());
		}
		
		return mav;
	}

//callback페이지로 사용한 jsp
	
		
	
	
	
	


//공유하기 화면
//인증유무 판별해서 인증 안되있으면 인증화면으로 보내고 아니면 트위터 공유하기 실행 


var length = $('#twitterName').length;
			if(length == 0){ <%-- 트위터 연동 컨트롤러 영역에 구현된 콜백 정보를 호출 하여 앱인증 화면으로 이동 - > 앱인증 완료시 부모창을 리로드하며 세션에 저장된값 셋팅  $('#twitterName') --%>
				window.open("/socialFunding/callbackTwitter.do");
				return false;
			}
			url = 'http://twitter.com/intent/tweet?status='+title+'%20-%20'+linkUrl;
카카오 https://developers.kakao.com 앱등록 
			Kakao.Auth.getStatus(function(res){ 
				if(res.status == "not_connected"){ 
					Kakao.Auth.login({});
					
				}else{
				   $('#kakaoName').val(res.user.properties.nickname); // getStatus 에서 정보를 가지고옴
				    $('#kakaoId').val(res.user.id); 
				    $('#kakaoImg').val(res.user.properties.thumbnail_image);


					if(imgUrl!=null&&imgUrl!=''){
						Kakao.Link.sendTalkLink({
						   label: kakaoTitle,
						   
						   image : {
								src:  imgUrl,
								width :400,
								height :300
						   },
							webButton: {
							   text: '단',
							   url: orgUrl // 앱 설정의 웹 플랫폼에 등록한 도메인의 URL이어야 합니다.
							}
						});
					}else{
						
						 Kakao.Link.sendTalkLink({
						   label: kakaoTitle,
							webButton: {
							   text: '단',
							   url: orgUrl // 앱 설정의 웹 플랫폼에 등록한 도메인의 URL이어야 합니다.
							}
						});
					}    
				     ////// 스토리

					if(getBrowser()=='safari'){
						location.href ='https://story.kakao.com/share?url='+linkUrl;
					}else{
						Kakao.Story.share({
							//text: kakaoTitle,
							url: orgUrl
						});
					}


				}

			})

티스토리툴바