웹 앱에 Google 로그인 통합

<ph type="x-smartling-placeholder">

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 Developers Console에서 앱에 만든 클라이언트 ID를 지정합니다. google-signin-client_id 메타 요소로 대체합니다.

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

Google 로그인 버튼 추가

사이트에 Google 로그인 버튼을 추가하는 가장 쉬운 방법은 자동 렌더링됩니다. 단 몇 줄의 코드로 적절한 텍스트를 갖도록 자동으로 구성하는 버튼을 추가하고, 로고, 사용자의 로그인 상태에 대한 색상, 요청한 범위를 설정할 수 있습니다.

기본 설정을 사용하는 Google 로그인 버튼을 생성하려면 div 요소를 g-signin2 클래스로 로그인 페이지에 추가합니다.

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