XE

Social XE 트위터 프로필사진 표시 문제 해결하기

Posted 2013. 02. 02 Updated 2017. 06. 02 Views 205481 Replies 3
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

크게 작게 위로 아래로 댓글로 가기 인쇄

twitter.jpeg


때는 2013년 1월 중순이었습니다.

BATTO에 Social XE 댓글위젯을 이용하여 메모장을 구축하고 각 SNS별로 정상 동작 테스트를 하고 있었습니다. 로그인도 다 잘 되고 글도 잘 올라가고, 댓글도 다 잘 달리는데, 유독 한가지 문제가 있었습니다.

바로 트위터 프로필 사진 문제였습니다.

Social XE 트위터 프로필사진 오류
▲ Social XE 트위터 로그인을 했지만, 프로필 사진이 나오지 않는다.

처음에는 트위터 계정에 프로필사진이 등록되어 있지 않아서 발생한 문제인 줄 알았는데, 조사해보니 그게 아니었습니다. 게다가 트위터 기본 프로필사진은 녹색 바탕에 알(?)이 그려져 있는 그림립니다.

요즘들어 XE개발에 불도 붙고 의욕도 충만해졌던 터라 직접 모듈을 뜯어 고치기로 마음먹었습니다. 댓글위젯은 단지 댓글을 달기 위한 Front End일 뿐이니, 문제가 있다면 socialxe 모듈이나 (그렇지 않길 바랐지만..) socialxeserver 모듈에 문제가 있는 것이라 예상할 수 있었습니다.


문제의 원인

1차 삽질은 문제를 발견한 당일부터 그 이튿날까지 밤을 새가며 계속되었는데, php파일을 모두 뒤져도 도무지 문제가 어디인지를 확인할 수가 없었습니다.

모듈 자체가 객체화 및 추상화가 너무나도 잘 되어 있어서 프로그램의 흐름이 이 파일, 저 파일을 넘나들었으므로 그걸 분석하는 동안 정신이 하나도 없었으며, 게다가 XE 모듈이나 코어에 대한 배경지식도 거의 전무한 상태였으므로 원인을 찾기 위한 감조차 잡을 수가 없었습니다.

결국 1차 삽질은 socialxeserver의 Twitter oAuth 클래스까지 열어보고, 트위터 개발자 페이지에서 oAuth Explorer까지 뒤져 보고나서야 끝이 났습니다. 하지만, 밤을 꼬박 샜으나 원인은 오리무중이었고..ㅠ

2차 삽질은 바로 오늘. 퇴근 후부터 약 3시간에 걸쳐 이뤄졌습니다. 본래 하던 elFinder모듈 개발 시작에 앞서 가볍게(?) 지난번에 하던 삽질을 마무리 해보고 싶은 욕구가 다시 생겼습니다. 밤을 샐 지도 모르는 삽질을 다시 시작하게 된 것이죠..

이번에는 무작정 파일을 뒤지기 보다는 내용을 확인해 보기로 하고, 중간중간 echo 및 die로 변수 값을 찍어보기 시작했습니다. (아직 XE 디버깅 하는 방법이 틀이 안잡혀서 이런 방법을 썼지만, 아무 가공 없이 변수 내용을 바로 볼 수 있으므로 편리하긴 합니다.)

그러다가 문제의 원인으로 추정되는 부분을 발견할 수 있었습니다. 프로필 이미지 주소를 가져오는 부분에서 객체 자체를 JSON으로 덤핑해 보았는데, 트위터 oAuth로부터 넘어온 오류 메시지를 볼 수 있었던 것입니다.

DIE json_encode($this) 실행 결과
▲ socialxe/provider.twitter.php의 프로필 이미지 주소 생성 부분에서 $this를 JSON 덤핑한 결과

메시지는 인증 정보가 올바르지 않다는 내용이었지만, 저 정보만으로 정확한 문제의 원인을 파악할 수는 없었습니다. 트위터 oAuth의 경우 인증을 위해 네 가지 정보(Consumer Key/Secret, Access Token/Secret)가 사용되는데, 그 정보가 잘못 되었을 것이라는 추측만을 할 수 있었을 뿐이죠.

그리고 이 메시지를 확인함으로써 오류가 발생하는 위치가 명확해졌습니다. socialxe 모듈이 아닌 socialxeserver모듈에 문제가 있는게 확실하다는 것이죠.

socialxeserver모듈로 넘어와서 트위터 인증 관련 코드를 뜯어보았습니다. 로그인 직후 oAuth 정보를 전달하는 부분 바로 앞에서 네 가지 인증정보를 덤핑해 보았습니다.

'I got it!'

 Consumer Key 와 Secret이 올바르게 설정되지 않았다.
▲ socialxeserver/provider.twitter.php의 oAuth 요청 부분에서 필요 변수를 덤핑한 결과

Access Token 및 Access Token Secret은 정상적으로 전달되고 있으나, Consumer Key와 Consumer Key Secret은 내용이 아예 없이 공란이었습니다. 바로 이게 문제였던 것입니다.

그렇다면 모듈 환경설정에서 이 두 변수를 읽어서 oAuth로 전달하는 과정 중간에 문제가 있는 것입니다. 환경설정을 읽어오는 부분에서 변수 전달 부분까지 이 파일, 저 파일을 넘나들며 변수 전달 과정을 살펴보았습니다.

그러던 중, 바로 마지막 oAuth로 변수를 전달하는 부분에서 [.....]


문제 해결하기

이 문제를 해결하기 위해 지금까지 한 삽질(?)에 비해서 문제를 해결하는 방법은 허무하다못해 허탈할 정도로 간단했습니다.

단 한줄만 수정해 주면 되기 때문입니다. 게다가, 심지어 키보드에서 사용할 키는 백스페이스키밖에 없습니다.

modules/socialxeserver/provider.twitter.phpcallback() 메소드 안에 있는 73번째 줄 부근을 다음과 수정해 줍니다.

// 콜백 처리
	function callback(){
		$oauth_token = Context::get('oauth_token');
		$oauth_verifier = Context::get('oauth_verifier');

		// 로그인 취소했으면 이전 페이지로 돌아간다.
		if (Context::get('denied')){
			$this->session->clearSession('twitter');
			return new Object();
		}

		// 세션
		$session = $this->session->getSession('twitter');

		// 이전 토큰과 일치하는지 확인
		if ($oauth_token != $session['oauth_token']){
			// 일치하지 않으면 세션 말소
			$this->session->clearSession('twitter');
			return $this->stop('msg_old_token');
		}

		// 트위터 oauth 객체 생성
/* [20130202|TUW] TWITTER 인증정보 읽어오기 버그 수정 */
/*-*/	//$connection = new TwitterOAuth($this->twitter_consumer_key, $this->twitter_consumer_key_secret, $session['oauth_token'], $session['oauth_token_secret']);
/*+*/	$connection = new TwitterOAuth($this->consumer_key, $this->consumer_key_secret, $session['oauth_token'], $session['oauth_token_secret']);

		// 액세스 토큰 요청
		$access_token = $connection->getAccessToken($oauth_verifier);

		// 요청 토큰은 이제 필요없다.
		$this->session->clearSession('twitter');

		// 요청 성공 체크
		if ($connection->http_code == 200){
			// 사용자 정보도 받아서 저장해 놓는다.
			$credentials = $connection->get('account/verify_credentials');

			// 액세스 토큰과 사용자 정보를 묶는다.
			$info['access'] = $access_token;
			$info['account'] = $credentials;

			$result = new Object();
			$result->add('info', $info);
			return $result;
		}else{
			return $this->stop('msg_error_twitter');
		}
	}

$this->consumer_~부분이 $this->twitter_consumer_~로 잘못 기입되어 있는 것이 문제였던 것입니다. 존재하지 않는 멤버 변수를 참조하니 문제가 발생할 수밖에 없겠죠.

이 두 부분을 수정하니 트위터 프로필 사진이 올바르게 표시되었습니다.

이제 프로필 사진이 잘 나오네요.. ^-^
▲ 패치를 적용하고 트위터 프로필 사진이 올바르게 표시된다.

삽질도 삽질 나름이었지만, 이번 패치를 하면서 SocialXE나 module의 동작 방식도 많이 알게 된 듯 합니다. 많은 시간이 걸렸지만 그만큼 얻은 것도 많았던 삽질이었던 것 같네요.. (후...)


참조: 수정된 파일 목록

이번에도 역시 코드 수정하기 귀찮아 하시는 분들을 위해 수정된 파일을 준비하였습니다. 아래 파일을 다운받아서 modules/socialxeserver/ 디렉토리에 덮어씌우세요.

(업로드 후 퍼미션을 꼭!! 644로 바꿔 주셔야 합니다.)