우리는 웹에 대한 구글 로그인 자바 스크립트 플랫폼 라이브러리를 중단 . 인증 및 사용자 로그인의 경우, 모두 새로운 Google 아이덴티티 서비스 SDK를 사용하여 안드로이드 대신.

웹 앱에 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 Platform 라이브러리로드

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

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

앱의 클라이언트 ID 지정

google-signin-client_id 메타 요소를 사용하여 Google Developers Console에서 앱용으로 만든 클라이언트 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에 사용자로 로그인 한 후 사용자의 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>