지난 포스팅에서 로그인 기능을 사용할 준비를 했다면
이제 직접 구현해보자!
< 지난 포스팅! >
[Google 로그인] #1 개발자 콘솔 가입!
1. 구글 개발자 콘솔에 로그인한다. console.developers.google.com/ Google Cloud Platform 하나의 계정으로 모든 Google 서비스를 Google Cloud Platform을 사용하려면 로그인하세요. accounts.google.com 2. 접..
genie-dev.tistory.com
1. 로그인할 페이지를 만들고 (HTML or jsp ... 등 자신이 사용중인 페이지) 상단에 위 태그를 넣어준다.
수정할 부분은 클라이언트 ID를 입력하는 부분인데 앞 포스팅을 확인하면 알 수 있다!
(** 중괄호 {} 는 지워야한다 ** )
<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content="{발급받은 클라이언트 ID}apps.googleusercontent.com"></meta>
2. 로그인/아웃 버튼을 생성!
로그인 버튼을 보면 data-onsuccess 엔 로그인에 성공하는 경우 호출할 함수명을 입력해준다.
<!-- 로그인 버튼 -->
<div class="g-signin2" data-onsuccess="onSignIn"></div>
<!-- 로그아웃 버튼 -->
<a href="#" onclick="signOut();">Sign out</a>
3. 스크립트 작성!
// 로그인에 성공하면 내 정보가 찍힌다.
// 이정보를 가지고 시큐리티등등 보안을 더한 로그인을 구현하면 된다!
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
}
// 로그아웃에 사용할 버튼
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
self.location="/logout";
});
}
※ 완성된코드~~!!
나의 포스팅 순서대로 따라왔다면 쉽게 구현가능할것이다! ㅎㅎ ~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content="{발급받은 클라이언트 ID}.apps.googleusercontent.com"></meta>
<title>로그인 페이지</title>
</head>
<body>
<h1>로그인</h1>
<hr>
<!-- 구글 로그인 추가 -->
<div class="g-signin2" data-onsuccess="onSignIn"></div>
<a href="#" onclick="signOut();">Sign out</a>
<script src="/resources/css/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/resources/css/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/resources/js/utils/easy_ui/jquery.easyui.min.js"></script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script>
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
}
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
self.location="로그아웃할 url";
});
}
</script>
</body>
</html>
<다음포스팅>
[Google 로그인] #3 백엔드 코드작성!
<이전포스팅> [Google 로그인] #1 개발자 콘솔 가입! 1. 구글 개발자 콘솔에 로그인한다. console.developers.google.com/ Googl" data-og-host="genie-dev.tistory.com" data-og-source-url="https://genie-dev.t..
genie-dev.tistory.com
참고 developers.google.com/identity/sign-in/web/sign-in#before_you_begin
'프로그래밍' 카테고리의 다른 글
| [SPRING 카카오톡 로그인] #1 개발자사이트 설정 (0) | 2021.02.23 |
|---|---|
| [Google 로그인] #3 백엔드 코드작성! (0) | 2021.02.23 |
| [Google 로그인] #1 개발자 콘솔 가입! (0) | 2021.02.16 |
| Spring 싱글톤을 이용한 금칙어 처리 (0) | 2021.01.21 |
| Oracle Tigger 생성! AFTER INSERT OR UPDATE !! (0) | 2020.11.30 |