javascript | 구글 로그인 버튼 만들기, Google Login Api

Step

  1. Google Cloud Platform 프로젝트 생성
  2. Oauth 동의 화면 설정
  3. Ouath 클라이언트 ID 발급
  4. 라이브러리 로드, 로그인 버튼 생성, 프로필, 로그아웃 함수 구현

 

1. 구글 클라우드(https://console.cloud.google.com) 접속 → 프로젝트 선택 → 새 프로젝트

 

 

 

2. 프로젝트 이름 작성 → 만들기

 

 

 

3. 사용자 인증 정보 만들기 → Oauth 클라이언트 ID

 

 

 

4. 동의화면 구성 → 외부 선택 → 만들기

 

 

 

5. 앱 이름, 사용자 지원 이메일, 개발자 연락처 정보 작성 → 저장 후 계속

 

 

 

6. 범위 탭에서는 특별한 설정없이 저장 후 계속

 

 

 

7. 앱 게시 상태가 프로덕션이 되기전, 특정 사용자에게만 테스트 권한 부여 → 저장 후 계속

 

 

 

8. Oauth 동의 화면 설정에 대한 전체적인 요약 페이지

 

 

 

9. Oauth 클라이언트 ID → 이름, 자바스크립트 URL, 리디렉션 URL 입력 → 저장

URL은 로그인이 실행될 페이지의 URL
예) 로그인 화면 URL

 

---

▶ 생성된 Ouath 클라이언트 ID를 이용하여 구글 로그인 기능 구현

content에 Ouath 클라이언트 ID 입력

 

<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">

 

 

Google Platform 라이브러리 로드

 

<script src="https://apis.google.com/js/platform.js" async defer></script>

 

 

Google 로그인 버튼 추가

 

<div class="g-signin2" data-onsuccess="onSignIn"></div>

 

 

사용자 프로필 정보 (성공 Callback Function)

 

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.
}

 

 

사용자 로그아웃

 

<a href="#" onclick="signOut();">Sign out</a>
<script>
  function signOut() {
    var auth2 = gapi.auth2.getAuthInstance();
    auth2.signOut().then(function () {
      console.log('User signed out.');
    });
  }
</script>

 

Reference

• https://developers.google.com/identity/sign-in/web/build-button