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-signin2 클래스를 g-signin 대신 로그인 버튼 요소에 할당합니다. 또한 다음 예와 같이 단일 콜백 대신 성공 및 실패 콜백을 각각 지정합니다.

    <!-- 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를 추가합니다.