[Google] google+ API를 이용한 이메일 얻어오기

한글로 되어있는데도 뭐가 이렇게 이해하기가 힘든지..

https://developers.google.com/+/web/signin/

위 페이지로 이동해서 설명을 쭉 확인해본다..

1단계 1 > 프로젝트 생성

https://console.developers.google.com/project 주소로 이동 후 프로젝트 만들기 클릭 후 대충 이름 넣고 생성

1단계 2 > API설정

프로젝트 생성 뒤 왼쪽 메뉴에 보면 API가 보입니다. 

https://code.google.com/apis/console/?api=plus#:services

주소로 이동하면 사용으로 되어있는 API들이 있는데 쓸게 있다면 그대로 두고 중요한 google+ API 사용으로 상태 변경

1단계 3 > 클라이언트 생성

https://code.google.com/apis/console/#:access

페이지로 이동 후 상단에 OAuth 새 클라이언트 아이디 만들기 클릭 한 후 웹 애플리케이션으로 생성하는데 자바스크립트 원본만 입력하고

리디렉션 URI는 그냥 공란으로 해서 생성

생성할때 로컬호스트로 넣던 도메인주소를 넣던 https:// http://  필히 확인

여기까지 완료 되었다면 일단 구글쪽에서 설정해야하는건 끝

2단계 페이지에 구글플러스 스크립트 포함

body태그 닫기 전에 

 <!-- 이 비동기 자바스크립트를 </body> 태그 앞에 배치 -->
    <script type="text/javascript">
      (function() {
       var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
       po.src = 'https://apis.google.com/js/client:plusone.js';
       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
     })();
    </script>

고대로 삽입

3단계 로그인 버튼 추가

<span id="signinButton">
  <span
    class="g-signin"
    data-callback="signinCallback"
    data-clientid="CLIENT_ID"
    data-cookiepolicy="single_host_origin"
    data-requestvisibleactions="http://schemas.google.com/AddActivity"
    data-scope="https://www.googleapis.com/auth/plus.login">
  </span>
</span>

여기서 중요한점 2가지

data-clientid는 위에서 생성했던 웹어플리케이션 클라이언트 ID를 넣어주면 되는데

젤 하단에 data-scope에서 그냥 plus.login 정보만 가져오면 이메일주소가 없다. 내가 값을 못빼는건지 모르겠지만..

https://www.googleapis.com/auth/userinfo.email 를 추가해줘야한다

<span id="signinButton">
  <span
    class="g-signin"
    data-callback="signinCallback"
    data-clientid="CLIENT_ID"
    data-cookiepolicy="single_host_origin"
    data-requestvisibleactions="http://schemas.google.com/AddActivity"
    data-scope="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email">
  </span>
</span>

4단계 로그인 처리

function signinCallback(authResult) {
  if (authResult['access_token']) {
    // 승인 성공
    // 사용자가 승인되었으므로 로그인 버튼 숨김. 예:
    document.getElementById('signinButton').setAttribute('style', 'display: none');
  } else if (authResult['error']) {
    // 오류가 발생했습니다.
    // 가능한 오류 코드:
    //   "access_denied" - 사용자가 앱에 대한 액세스 거부
    //   "immediate_failed" - 사용자가 자동으로 로그인할 수 없음
    // console.log('오류 발생: ' + authResult['error']);
  }
}

3단계까지 제대로 적용되었다면 로그인 버튼에 data-callback 의 함수가 로그인 후 실행된다.

승인성공 하고나면 필요한 정보를 받아와야한다.

var googleAuthToken;
function signinCallback(authResult) {
  if (authResult['access_token']) {
		googleAuthToken = authResult['access_token'];
		//alert(authResult['access_token']);
		gapi.auth.setToken(authResult); // 반환된 토큰을 저장합니다.				alert(authResult);
		getEmail();

		//document.getElementById("aaaa").innerText = authResult['userid'];
		//document.print(authResult['access_token']);
    // 승인 성공
    // 사용자가 승인되었으므로 로그인 버튼 숨김. 예:
    document.getElementById('signinButton').setAttribute('style', 'display: none');
		document.getElementById('aaaa').setAttribute('style', 'display: block');
  } else if (authResult['error']) {
		//alert(authResult['error']);
    // 오류가 발생했습니다.
    // 가능한 오류 코드:
    //   "access_denied" - 사용자가 앱에 대한 액세스 거부
    //   "immediate_failed" - 사용자가 자동으로 로그인할 수 없음
    // console.log('오류 발생: ' + authResult['error']);
  }
}

var googleAuthToken; 값은 후에 로그아웃 처리를 위해서 넣은것인데(사실 로그인 처리 후 accesstoken값을 어떻게 가져오는지 몰라서;)

토큰값을 저장한 후 메일을 가져오는 함수를 실행 getEmail();

function getEmail(){
	// userinfo 메소드를 사용할 수 있도록 oauth2 라이브러리를 로드합니다.
	gapi.client.load('oauth2', 'v2', function() {
	var request = gapi.client.oauth2.userinfo.get();
	request.execute(getEmailCallback);
	});
}

function getEmailCallback(obj){
	var el = document.getElementById('email');
	var email = '';
	for (var field in obj) {
		alert(obj[field]);
	}//for문으로 값이 뭐가 나오는지 일일이 확인
email = 'Email: ' + obj['email'];
el.innerHTML = email;
toggleElement('email');
}

getEmailCallback함수까지 문제없이 실행되면 <div id="email" class="hide"></div> 이 박스에 이메일주소가 찍혀나와야 정상

안나오면 어디선가 문제가 있는것!

다음은 로그아웃

첫번째 방법 위에서 accessToken을 저장해놨음

페이지상에 로그아웃 버튼을 만든뒤 아이디를 revokeButton로 지정 위 박스 아이디에 aaaa로 되어있는데 로그아웃 버튼을 감싸는 div 박스 아이디가 aaaa

로그아웃버튼을 클릭하면 로그아웃 처리

function disconnectUser() {

  var revokeUrl = 'https://accounts.google.com/o/oauth2/revoke?token=' +
      googleAuthToken;

  // 비동기 GET 요청을 수행합니다.
  $.ajax({
    type: 'GET',
    url: revokeUrl,
    async: false,
    contentType: "application/json",
    dataType: 'jsonp',
    success: function(nullResponse) {
			document.getElementById('signinButton').setAttribute('style', 'display: block');
			document.getElementById('aaaa').setAttribute('style', 'display: none');
      // 사용자가 연결 해제되었으므로 작업을 수행합니다.
      // 응답은 항상 정의되지 않음입니다.
    },
    error: function(e) {
      // 오류 처리
      // console.log(e);
      // 실패한 경우 사용자가 수동으로 연결 해제하게 할 수 있습니다.
      // https://plus.google.com/apps
    }
  });
}
// 버튼 클릭으로 연결 해제를 실행할 수 있습니다.
$('#revokeButton').click(disconnectUser);

두번째 방법은 로그아웃버튼 링크를  https://accounts.google.com/logout 로 보내면 로그아웃됩니다.

그에 따른 페이지이동 처리는 해줘야겠지만

끝~