Google+ 로그인에서 이전

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

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

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

Google+ 로그인에서 Google로 사이트를 이전하기 위해 필요한 변경사항 로그인은 사용 중인 Google+ 로그인 과정에 따라 다릅니다. 일반적으로 로그인 버튼, 요청된 범위, 안내를 업데이트해야 합니다. 을 참조하세요.

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

대부분의 Google+ 로그인 애플리케이션에서 몇 가지 범위 조합을 요청했습니다. 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에서 사용자 프로필 정보를 가져오는 액세스 토큰

이제 Google은 ID 토큰을 요청하고 해당 ID 토큰을 연결할 수 있습니다 ID 토큰에는 교차 사이트 위조 방지 기능이 있습니다. 서버에서 정적으로 확인할 수 있기 때문에 추가 API 호출을 사용하여 Google 서버에서 사용자 프로필 정보를 가져옵니다. 서버에서 ID 토큰의 유효성을 검사하는 방법을 참조하세요.

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

HTML 로그인 버튼 이전

수업 과제로 페이지에 Google+ 로그인 버튼을 포함한 경우 g-signin를 요소에 추가하려면 다음과 같이 변경합니다.

  • <meta> 태그에서 클라이언트 ID를 지정하면 data- 속성 또는 매개변수 객체를 설정하려면 문자열 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();
}

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

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

  • <meta> 태그에서 클라이언트 ID를 지정하면 data- 속성 또는 매개변수 객체를 설정하려면 문자열 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.signin2.render()를 사용하여 로그인 버튼을 렌더링합니다. gapi.signin.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> 태그에서 클라이언트 ID를 지정하면 data- 속성 또는 매개변수 객체를 설정하려면 문자열 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를 추가합니다.