Google oauth 인증을 해 보자.

요즘 웹 사이트를 보면 회원가입을 직접하는것 보단 Google, Facebook 등의 sns 계정을 이용해서 로그인을 한다.
그러다 보니 google, facebook 등 연동을 쉽게? 할 수 있는 javascript가 있다. ( hello.js )

여기서는 google oauth로 인증하는것을 알아본다. — 쉽다.

필요한 사항

  • 도메인
  • Google API 콘솔에 등록
  • javascrpt lib.

 

도메인 ( 도메인이 있는 사람은 pass. )

인증 후 전송받을 url 인 Redirect URL 이 필요하다.
Redirect URL은 com, co.kr 등의 유명한 1차 도메인만 가능하다. (ip 숫자 및  .tk라는 1차 도메인이 있는데 안 된다.)

갑자기 도메인이 필요하기에 도메인 없는 사람는 당황스럽다. 당장 개발을 해야 하는데.
이럴 때 FreeDNS를 이용하면 아주 쉽게 해결 할 수 있다.
FreeDNS 사이트 를 이용하면 특정 IP에 2차도메인으로 연결할 수 있다.

왼쪽의 Subdomains 클릭 후 ADD 버튼을 클릭한다. 위 이미지는 이미 등록된 sub 도메인을 보여준다

 

 

 

구글 API 콘솔 설정

구글 API 콘솔 화면 이동



자신의 도메인을 입력한다. ( 위에 freedns에서 만든 도메인을 입력한다.)

 

완료된 화면.. 클라이언트 ID가 필요하다.
API 사용설정이라는 파란버튼이 있으면 클릭해야 한다.

 

 

JavaScript 작성

javascript lib 다운받기 ( hello.js)

HTML 파일 설정

JS 파일 연동하기
<script type=”text/javascript” src=”js/hello.js”></script>
<script type=”text/javascript” src=”js/google_oauth.js”></script>  <– 내가 따로 google login 을 javascript로 뺐다.

테스트용 버튼 만들기
<!– 로그인 로그아웃 버튼 (google_oauth.js에 함수가 있다.) –>
<button onclick=”login()”>Google LogIn</button>
<button onclick=”logout()”>Google Logout</button>

google_oauth.js 파일 간단히 살펴본다.

로그인


function login(){
	hello('google').login({scope: 'email'}).then(function(auth) {
		hello(auth.network).api('/me').then(function(r) {
			console.log(JSON.stringify(auth));
			accessToken = auth.authResponse.access_token;
			console.log(accessToken);
			getGoogleMe(); // 로그인 하자마자 바로 사용자 정보 호출한다.
		});
	});
}

사용자 정보 얻기


function getGoogleMe(){
	hello('google').api('me').then(
			function(json) {
				console.log(JSON.stringify(json));
				name = json.name;
	    		email = json.email;
	    		domain = json.domain;
	    		thumbnail = json.thumbnail;
				console.log('name   : ' + name);
	    		console.log('email  : ' + email);
	    		console.log('domain : ' + domain);
	    		console.log('thumbnail : ' + thumbnail);
	    		loginComplete();// JSNI에 정의 되어있다.
			}, 
			function(e) {
	    		console.log('me error : ' + e.error.message);
	    	});
}

로그아웃


function logout(){
	hello('google').logout().then(
			function() {
				console.log('logout');
			},
			function(e) {
				console.log('Signed out error: ' + e.error.message);
	    	});
}

이정도 코드만 있으면 간단한 oauth 를 이용한 인증 및 로그인을 만들 수 있다.

소스는 GitHub에 있다.

(필요한 파일은 Googleoauth.html, google_oauth.js, hello.js  3개이다. )