웹 앱에 Google 로그인 통합

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

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

승인 사용자 인증 정보 만들기

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

  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 Developers Console에서 google-signin-client_id 메타 요소를 사용하여 앱에 대해 만든 클라이언트 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에서 로그아웃하지 않고도 앱에서 로그아웃할 수 있도록 할 수 있습니다. 로그아웃 링크를 만들려면 GoogleAuth.signOut() 메서드를 호출하는 함수를 링크의 onclick 이벤트에 연결합니다.

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