구글 로그인 API (OAuth 2.0)
클라이언트 입장에서 수많은 사이트의 모든 아이디 비밀번호를 기억하기는 쉽지 않습니다. 또한 서비스를 제공해주는 리소스 오너 또한 안전하게 보관하여야 하기 때문에 부담되고요. 이런 문제를 해결하기 위해, 구글이나, 페이스북, 카카오 같은 큰 기업들이 로그인 연동 기능을 제공하고 있습니다. 그중 구글 로그인을 구현해 보겠습니다.
구글 로그인 API 사용을 위한 애플리케이션 설정
우선
cloud.google.com/cloud-console/
해당 사이트에 접속을 한 후 로그인을 하고, 우측 상단의 계정 옆 "콘솔"을 클릭하고, 새 프로젝트를 통해 프로젝트를 만듭니다.
상단 검색창에서 사용자의 정보를 편리하게 가져와줄 people api를 검색하여 사용합니다.
그 후
1. 우측 메뉴의 API 및 서비스 -> 사용자 인증정보를 클릭합니다.
2. 왼쪽 상단의 "동의 화면 구성"을 클릭합니다. (
* 위 문구가 안보이시는 분들은 API 및 서비스 - Oauth 동의 화면에서 들어가셔도 됩니다.
3. UserType "외부" 선택 -> 만들기 -> 내용 입력 후 저장합니다.
4. 범위 추가 또는 삭제 -> People API를 체크 후 업데이트 -> 저장 후 계속을 눌러줍니다.
5. TEST를 위해 add users를 통해 테스트 사용자를 추가한 후 저장하고 "대시보드"로 돌아갑니다.
6. 우측 메뉴의 API 및 서비스 -> 사용자 인증정보를 다시 클릭하여 "사용자 인증 정보 만들기" -> "API 키"를 클릭합니다.(자동으로 만들어집니다.)
7. 다시 우측 메뉴의 API 및 서비스 -> 사용자 인증정보를 클릭하여 "사용자 인증 정보 만들기" -> "OAuth 클라이언트 ID"를 클릭합니다.(애플리케이션 유형은 "웹 애플리케이션"을 선택해줍니다.)
URI추가를 누릅니다. 저는 테스트를 위해 http://localhost:8181로 입력했습니다. 후에 "만들기"를 누릅니다.
API 키와 OAuth 2.0 클라이언트 ID키를 복사해 둡니다.
이제 모든 설정은 끝났습니다.
코드 - javascript & jsp
단순하게 해당 코드를 사용하고자 하는 HTML 페이지나 jsp페이지 <head></head> 안에 붙여놓습니다.
<!-- content에 자신의 OAuth2.0 클라이언트ID를 넣습니다. -->
<meta name ="google-signin-client_id" content="217755353555-3msma49ckq4fa47k0tg5tkshatcdh8c9.apps.googleusercontent.com">*주의 : 해당 소스 중간의 content = 본인의 OAuth 2.0 클라이언트 ID를 넣습니다.
<자바스크립트 코드>
<!DOCTYPE html>
<html>
<head>
<!-- content에 자신의 OAuth2.0 클라이언트ID를 넣습니다. -->
<meta name ="google-signin-client_id" content="217755353555-3msma49ckq4fa47k0tg5tkshatcdh8c9.apps.googleusercontent.com">
</head>
<body>
<ul>
<li id="GgCustomLogin">
<a href="javascript:void(0)">
<span>Login with Google</span>
</a>
</li>
</ul>
<script>
//처음 실행하는 함수
function init() {
gapi.load('auth2', function() {
gapi.auth2.init();
options = new gapi.auth2.SigninOptionsBuilder();
options.setPrompt('select_account');
// 추가는 Oauth 승인 권한 추가 후 띄어쓰기 기준으로 추가
options.setScope('email profile openid https://www.googleapis.com/auth/user.birthday.read');
// 인스턴스의 함수 호출 - element에 로그인 기능 추가
// GgCustomLogin은 li태그안에 있는 ID, 위에 설정한 options와 아래 성공,실패시 실행하는 함수들
gapi.auth2.getAuthInstance().attachClickHandler('GgCustomLogin', options, onSignIn, onSignInFailure);
})
}
function onSignIn(googleUser) {
var access_token = googleUser.getAuthResponse().access_token
$.ajax({
// people api를 이용하여 프로필 및 생년월일에 대한 선택동의후 가져온다.
url: 'https://people.googleapis.com/v1/people/me'
// key에 자신의 API 키를 넣습니다.
, data: {personFields:'birthdays', key:'AIzaSyBOdmeC4SOSzXmPGLEM2vZueqiBSWKg3wk', 'access_token': access_token}
, method:'GET'
})
.done(function(e){
//프로필을 가져온다.
var profile = googleUser.getBasicProfile();
console.log(profile)
})
.fail(function(e){
console.log(e);
})
}
function onSignInFailure(t){
console.log(t);
}
</script>
//구글 api 사용을 위한 스크립트
<script src="https://apis.google.com/js/platform.js?onload=init" async defer></script>
</body>
</html>*주의 : 해당 소스 중간의 key에 본인의 API 키를 넣습니다.
이 정도 예제만 잘 가공해서 사용하신다면 훌륭한 구글 로그인 기능을 만드실 수 있으실 겁니다.
*참고사항
구글 api는 테스트 상태로 사용할 경우 테스트 사용자로 등록한 id만 로그인이 가능합니다. 앱을 게시해야만 모든 구글 유저 대상으로 서비스가 가능해집니다.
궁금한 점이나 어려운 점, 잘못된 점은 댓글로 말씀해주시면 감사하겠습니다!
카카오 로그인 구현 방법
[자바스크립트] 카카오 로그인 API 쉽게 구현 방법 및 예제- Javascript,Jsp
카카오 로그인 API (OAuth 2.0) 클라이언트 입장에서 수많은 사이트의 모든 아이디 비밀번호를 기억하기는 쉽지 않습니다. 또한 서비스를 제공해주는 리소스 오너 또한 안전하게 보관하여야 하
tyrannocoding.tistory.com
페이스북 로그인 구현 방법
[자바스크립트] 페이스북 로그인 API 쉽게 구현 방법 및 예제- Javascript,Jsp
페이스북 로그인 API (OAuth 2.0) 클라이언트 입장에서 수많은 사이트의 모든 아이디 비밀번호를 기억하기는 쉽지 않습니다. 또한 서비스를 제공해주는 리소스 오너 또한 안전하게 보관하여야 하
tyrannocoding.tistory.com
네이버 로그인 구현 방법
https://tyrannocoding.tistory.com/60
[자바스크립트] 네이버 로그인 API 쉽게 구현 방법 및 예제- OAuth 2.0, Javascript, Jsp, 로그아웃
네이버 로그인 API (OAuth 2.0) 클라이언트 입장에서 수많은 사이트의 모든 아이디 비밀번호를 기억하기는 쉽지 않습니다. 또한 서비스를 제공해주는 리소스 오너 또한 안전하게 보관하여야 하기
tyrannocoding.tistory.com
'Web > Javascript & Jquery' 카테고리의 다른 글
| [자바스크립트] 네이버 로그인 API 쉽게 구현 방법 및 예제- OAuth 2.0, Javascript, Jsp, 로그아웃 (4) | 2021.07.15 |
|---|---|
| [자바스크립트] 페이스북 로그인 API 쉽게 구현 방법 및 예제- OAuth 2.0, Javascript, Jsp (4) | 2021.04.10 |
| [자바스크립트] 카카오 로그인 API 쉽게 구현 방법 및 예제- OAuth 2.0, Javascript, Jsp (7) | 2021.04.10 |
| [자바스크립트] 다음(카카오) 주소찾기 API 사용법 예제 - Javascript,Jsp (1) | 2021.04.10 |
댓글