Google+ 로그인에서 이전

범위 변경이 사용자에게 미치는 영향을 최소화하는 단계

  1. 애플리케이션에 인증된 사용자의 이메일 주소가 필요하며 이전에 이 목적으로 profile.emails.read를 사용한 경우 email을 대신 사용하세요.
  2. 승인된 인증 요청으로 profile.emails.read 승인을 받습니다. 확인을 위해 어떻게 제출하나요?를 참고하세요.
  3. 삭제할 범위로 이전 사용자 토큰을 취소하거나 애플리케이션에 대한 액세스 권한을 완전히 삭제합니다. 예를 들어 profile.emails.read 액세스 권한이 있는 토큰은 취소해야 합니다. 사용자 동의를 즉시 받을 수 있도록 사용자가 애플리케이션에 있는 동안 취소를 적용하는 것이 좋습니다.
  4. 사용자에게 profile.emails.read 없이 새 범위(예: email)에 다시 동의하라는 메시지를 표시합니다.
  5. Google API OAuth 동의 화면 구성에서 지원 중단할 범위를 삭제합니다.

사이트를 Google+ 로그인에서 Google 로그인으로 이전하기 위해 변경해야 하는 사항은 사용하는 Google+ 로그인 흐름에 따라 다릅니다. 일반적으로 이전하려면 로그인 버튼, 요청된 범위, Google에서 프로필 정보를 가져오는 방법에 관한 안내를 업데이트해야 합니다.

로그인 버튼을 업데이트할 때는 G+를 언급하거나 빨간색을 사용하지 마세요. 업데이트된 브랜드 가이드라인을 준수합니다.

대부분의 G+ 로그인 애플리케이션에서는 plus.login, plus.me, plus.profile.emails.read과 같은 범위 조합을 요청했습니다. 다음과 같이 범위를 다시 매핑해야 합니다.

이전 범위 새 범위
plus.login profile
plus.me openid
plus.profile.emails.read email

Google+ 로그인을 구현하는 많은 개발자가 코드 흐름을 사용했습니다. 즉, Android, iOS 또는 JavaScript 앱이 Google에서 OAuth 코드를 가져오고 클라이언트는 크로스 사이트 요청 위조 방지와 함께 이 코드를 서버로 다시 전송합니다. 그런 다음 서버는 코드를 확인하고 갱신 토큰과 액세스 토큰을 가져와 people.get API에서 사용자 프로필 정보를 가져옵니다.

이제 ID 토큰을 요청하고 이 ID 토큰을 클라이언트에서 서버로 전송하는 것이 좋습니다. ID 토큰에는 교차 사이트 위조 방지 기능이 내장되어 있으며 서버에서 정적으로 확인할 수도 있으므로 Google 서버에서 사용자 프로필 정보를 가져오기 위한 추가 API 호출이 필요하지 않습니다. 안내에 따라 서버에서 ID 토큰의 유효성을 검사합니다.

그래도 코드 흐름을 사용하여 프로필 정보를 가져오려면 그렇게 할 수 있습니다. 서버에 액세스 토큰이 있으면 로그인 검색 문서에 지정된 userinfo 엔드포인트에서 사용자 프로필 정보를 가져와야 합니다. API 응답은 Google+ 프로필 응답과 형식이 다르므로 파싱을 새 형식으로 업데이트해야 합니다.

HTML 로그인 버튼 이전

요소에 g-signin 클래스를 할당하여 페이지에 Google+ 로그인 버튼을 포함한 경우 다음과 같이 변경합니다.

  • <meta> 태그, data- 속성 또는 매개변수 객체에서 클라이언트 ID를 지정할 때는 다음 예와 같이 문자열 clientid를 client_id로 변경합니다.

    <!-- Google+ Sign-in (old) -->
<meta name="google-signin-clientid" content="YOUR_CLIENT_ID">


    <!-- Google Sign-in (new) -->
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID">

  • 로그인 버튼 요소에 g-signin 대신 g-signin2 클래스를 할당합니다. 또한 다음 예와 같이 단일 콜백 대신 별도의 성공 및 실패 콜백을 지정합니다.

    <!-- Google+ Sign-in (old) -->
<div
  class="g-signin"
  data-callback="signinCallback">
</div>


    <!-- Google Sign-in (new) -->
<div
  class="g-signin2"
  data-onsuccess="onSignIn"
  data-onfailure="onSignInFailure">
</div>

  • 단일 콜백 핸들러 대신 다음 예와 같이 성공 핸들러와 실패 핸들러를 정의합니다.

    // Google+ Sign-in (old)
function signinCallback(authResult) {
  if (authResult['status']['signed_in']) {
    // Handle successful sign-in
  } else {
    // Handle sign-in errors
    console.log('Sign-in error: ' + authResult['error']);
  }
}


    // Google Sign-in (new)
function onSignIn(googleUser) {
  // Handle successful sign-in
}
function onSignInFailure() {
  // Handle sign-in errors
}

  • 이렇게 변경하면 기본 범위가 profile email openid로 업데이트됩니다. 다음과 같이 이름, 이메일, 사진 이미지 URL과 같은 사용자의 기본 프로필 정보를 가져올 수 있습니다.

    // Google Sign-in (new)
function onSignIn(googleUser) {
  let profile = googleUser.getBasicProfile();
  let fullName = profile.getName();
  let email = profile.getEmail();
  let imageUrl = profile.getImageUrl();
}

동적으로 렌더링된 로그인 버튼 이전

gapi.signin.render()를 호출하여 페이지에 Google+ 로그인 버튼을 포함한 경우 다음과 같이 변경합니다.

  • <meta> 태그, data- 속성 또는 매개변수 객체에서 클라이언트 ID를 지정할 때 다음 예와 같이 clientid 문자열을 client_id로 변경합니다.

    <!-- Google+ Sign-in (old) -->
<meta name="google-signin-clientid" content="YOUR_CLIENT_ID">


    <!-- Google Sign-in (new) -->
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID">

  • 다음 예와 같이 gapi.signin.render() 대신 gapi.signin2.render()로 로그인 버튼을 렌더링합니다.

    // Google+ Sign-in (old)
gapi.signin.render('myButton', additionalParams);


    // Google Sign-in (new)
gapi.signin2.render('myButton', additionalParams);

  • 단일 콜백 핸들러 대신 다음 예와 같이 성공 핸들러와 실패 핸들러를 정의합니다.

    // Google+ Sign-in (old)
function signinCallback(authResult) {
  if (authResult['status']['signed_in']) {
    // Handle successful sign-in
  } else {
    // Handle sign-in errors
    console.log('Sign-in error: ' + authResult['error']);
  }
}


    // Google Sign-in (new)
function onSignIn(googleUser) {
  // Handle successful sign-in
}
function onSignInFailure() {
  // Handle sign-in errors
}

이렇게 변경하면 기본 범위가 profile email openid로 업데이트됩니다. getBasicProfile() 메서드를 사용하여 사용자의 기본 프로필 정보를 가져올 수 있습니다.

JavaScript에서 시작된 로그인 흐름 이전

사용자가 로그인 버튼을 클릭할 때 gapi.auth.signIn() 호출을 사용하여 로그인 흐름을 시작한 경우 다음을 변경합니다.

  • <meta> 태그, data- 속성 또는 매개변수 객체에서 클라이언트 ID를 지정할 때는 다음 예와 같이 문자열 clientid를 client_id로 변경합니다.

    <!-- Google+ Sign-in (old) -->
<meta name="google-signin-clientid" content="YOUR_CLIENT_ID">


    <!-- Google Sign-in (new) -->
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID">

  • 다음 예와 같이 버튼을 누르면 gapi.auth2.attachClickHandler()를 사용하여 로그인 흐름을 시작합니다.

    // Google+ Sign-in (old)
var signinButton = document.getElementById('signinButton');
signinButton.addEventListener('click', function() {
  gapi.auth.signIn(additionalParams);
});


    // Google Sign-in (new)
auth2 = gapi.auth2.init();
auth2.attachClickHandler('signinButton', additionalParams, onSignIn, onSignInFailure);

  • 단일 콜백 핸들러 대신 다음 예와 같이 성공 및 실패 핸들러를 정의합니다.

    // Google+ Sign-in (old)
function signinCallback(authResult) {
  if (authResult['status']['signed_in']) {
    // Handle successful sign-in
  } else {
    // Handle sign-in errors
    console.log('Sign-in error: ' + authResult['error']);
  }
}


    // Google Sign-in (new)
function onSignIn(googleUser) {
  // Handle successful sign-in
}
function onSignInFailure() {
  // Handle sign-in errors
}

이렇게 변경하면 기본 범위가 profile email openid로 업데이트됩니다. getBasicProfile() 메서드를 호출하여 사용자의 기본 프로필 정보를 가져올 수 있습니다.

하이브리드 서버 측 흐름 마이그레이션

JavaScript API를 사용하여 서버에 전달할 일회성 승인 코드를 얻은 경우 다음과 같이 변경합니다.

  • 범위를 https://www.googleapis.com/auth/plus.login에서 profile로 변경합니다.

  • 다음 예와 같이 gapi.auth2.grantOfflineAccess() 메서드를 기존 콜백 함수와 함께 사용합니다.

    <!-- Google+ Sign-in (old) -->
<div class="g-signin"
  data-scope="https://www.googleapis.com/auth/plus.login"
  data-clientid="YOUR_CLIENT_ID"
  data-redirecturi="postmessage"
  data-accesstype="offline"
  data-callback="signInCallback">
</div>


    // Google Sign-in (new)
auth2 = gapi.auth2.init({
  client_id: 'YOUR_CLIENT_ID',
  scope: 'profile'
});

...

auth2.grantOfflineAccess().then(signInCallback);

사용자의 이메일에 액세스해야 하는 경우 범위 매개변수에 email를 추가합니다.