[javascript] 구글 로그인 연동

 구글 로그인 연동 

웹페이지에 구글로그인 연동과 관련된 것을 찾다보니 구글 개발자 사이트에서 너무나도 쉽게 설명이 잘 되어 있었다. 일단 페이지 링크만 걸어둔다. 링크의 '/?hl=ko' 부분을 제외하면 영문사이트를 볼 수 있다. 해당 링크로 부터 구글 로그인 버튼 추가, Email 가져오기, 사용자 프로필 사진 가져오기 등을 구현해 보았다. 코드의 일부만 블로그에 추가해 놓겠다. 

* Email 정보를 얻기 위해 oauth2 라이브러리를 사용

/*

 * userinfo 끝점에 대한 요청을 실행하여 사용자의 이메일 주소를 가져옵니다. 이 함수에는 유효한 OAuth 액세스 토큰이 포함된

 * gapi.auth.setToken이 필요합니다.

 * 

 * 요청이 완료되면 getEmailCallback이 실행되고 요청의 결과가 전달됩니다.

 */

function getEmail() {

// userinfo 메소드를 사용할 수 있도록 oauth2 라이브러리를 로드합니다.

gapi.client.load('oauth2', 'v2', function() {

var request = gapi.client.oauth2.userinfo.get();

request.execute(getEmailCallback);

});

}

* 사용자 정보를 가져오기 위한 코드

// 사용자 정보를 가져오기 위한 코드

gapi.client.load('plus', 'v1', function() {

var request = gapi.client.plus.people.get({

'userId' : 'me'

});

request.execute(function(resp) {

    /* 참고 : https://developers.google.com/+/api/latest/people#resource */

localStorage.profile = resp.image.url; 

});

});

링크

* 로그인 연동

https://developers.google.com/+/web/signin/?hl=ko

* 로그인 후 사용자 정보 가져오기

https://developers.google.com/+/web/people/?hl=ko