Study/Spring
구글 로그인 api 웹 인증하기
오늘만 사는 여자
2020. 11. 2. 14:45
728x90
반응형
사용할 jsp를 생성한다.
내용은 구글 api에서 나온 소스를 모두 가져와서 사용했다.
(참고 : developers.google.com/identity/sign-in/web/)
<head>
<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js" async defer></script>
</head>
<body>
<div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div>
<script>
function onSignIn(googleUser) {
// Useful data for your client-side scripts:
var profile = googleUser.getBasicProfile();
console.log("ID: " + profile.getId()); // Don't send this directly to your server!
console.log('Full Name: ' + profile.getName());
console.log('Given Name: ' + profile.getGivenName());
console.log('Family Name: ' + profile.getFamilyName());
console.log("Image URL: " + profile.getImageUrl());
console.log("Email: " + profile.getEmail());
// The ID token you need to pass to your backend:
var id_token = googleUser.getAuthResponse().id_token;
console.log("ID Token: " + id_token);
}
</script>
</body>
해당 소스를 확인한 후
위에 있는 google-signin-client_id를 셋팅해주어야한다.
client_id를 받기 위해 구글 개발자 콘솔로 가자.
요 블로그를 참고하여 프로젝트를 생성한다.
1. https://console.developers.google.com구글 개발자 콘솔로 이동
2. 사용자 인증정보로 이동
3. 사용자 인증정보 만들기에서
승인된 자바스크립트 원본에 아이피와 포트를 기입한다.
4. 클라이언트 id가 생성됨을 확인할 수 있다.
5. 그 후 로그인을 하게되면 값들이 나온다.
728x90
반응형