웹용 Google 로그인 자바스크립트 플랫폼 라이브러리가 지원 중단됩니다. 지원 중단 날짜인 2023년 3월 31일 이후에는 이 라이브러리를 다운로드할 수 없습니다. 대신 새로운 용 Google ID 서비스를 사용하세요.
새로 생성된 클라이언트 ID는 기본적으로 이전 플랫폼 라이브러리를 사용하지 못하도록 차단되며, 기존 클라이언트 ID는 영향을 받지 않습니다. 2022년 7월 29일 이전에 생성된 새 클라이언트 ID는 Google 플랫폼 라이브러리를 사용하도록 `plugin_name`을 설정할 수 있습니다.

웹 앱에 Google 로그인 통합

Google 로그인은 OAuth 2.0 흐름 및 토큰 수명 주기를 관리하여 Google API와의 통합을 단순화합니다. 사용자는 언제든지 애플리케이션에 대한 액세스를 취소할 수 있는 옵션이 있습니다.

이 문서에서는 기본 Google 로그인 통합을 완료하는 방법을 설명합니다.

인증 자격 증명 만들기

OAuth 2.0을 사용하여 Google API에 액세스하는 모든 애플리케이션에는 Google의 OAuth 2.0 서버에 대한 애플리케이션을 식별하는 인증 자격 증명이 있어야 합니다. 다음 단계에서는 프로젝트에 대한 자격 증명을 만드는 방법을 설명합니다. 그러면 애플리케이션에서 자격 증명을 사용하여 해당 프로젝트에 대해 활성화한 API에 액세스할 수 있습니다.

  1. Go to the Credentials page.
  2. 자격 증명 만들기 > OAuth 클라이언트 ID 를 클릭합니다.
  3. 웹 응용 프로그램 유형을 선택합니다.
  4. OAuth 2.0 클라이언트의 이름을 지정하고 만들기 를 클릭합니다.

구성이 완료되면 생성된 클라이언트 ID를 기록해 둡니다. 다음 단계를 완료하려면 클라이언트 ID가 필요합니다. (클라이언트 암호도 생성되지만 서버 측 작업에만 필요합니다.)

Google 플랫폼 라이브러리 로드

Google 로그인을 통합하는 웹페이지에 Google 플랫폼 라이브러리를 포함해야 합니다.

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

앱의 클라이언트 ID 지정

google-signin-client_id 메타 요소를 사용하여 Google 개발자 콘솔에서 앱에 대해 만든 클라이언트 ID를 지정합니다.

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

Google 로그인 버튼 추가

사이트에 Google 로그인 버튼을 추가하는 가장 쉬운 방법은 자동으로 렌더링된 로그인 버튼을 사용하는 것입니다. 몇 줄의 코드만으로 사용자의 로그인 상태와 요청한 범위에 적합한 텍스트, 로고 및 색상을 갖도록 자동으로 구성되는 버튼을 추가할 수 있습니다.

기본 설정을 사용하는 Google 로그인 버튼을 만들려면 g-signin2 클래스가 있는 div 요소를 로그인 페이지에 추가하세요.

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

프로필 정보 가져오기

기본 범위를 사용하여 Google로 사용자를 로그인한 후 사용자의 Google ID, 이름, 프로필 URL 및 이메일 주소에 액세스할 수 있습니다.

사용자의 프로필 정보를 검색하려면 getBasicProfile() 메서드를 사용합니다.

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

사용자 로그아웃

로그아웃 버튼이나 사이트 링크를 추가하여 사용자가 Google에서 로그아웃하지 않고 앱에서 로그아웃하도록 할 수 있습니다. 로그아웃 링크를 만들려면 링크의 onclick 이벤트에 GoogleAuth.signOut() 메서드를 호출하는 함수를 연결하세요.

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