범위 변경이 사용자에게 미치는 영향을 최소화하기 위한 단계
- 애플리케이션에 인증된 사용자의 이메일 주소가 필요하고 이전에 이를 위해
profile.emails.read
를 사용한 적이 있다면 대신email
를 사용하세요. - 승인된 인증 요청을 통해
profile.emails.read
의 승인을 받습니다. 인증을 위해 제출하려면 어떻게 해야 하나요?를 참고하세요. - 삭제할 범위로 이전 사용자 토큰을 취소하거나 애플리케이션에 대한 액세스 권한을 완전히 삭제합니다. 예를 들어
profile.emails.read
액세스 권한이 있는 토큰은 취소해야 합니다. 사용자가 즉시 사용자 동의를 받을 수 있도록 사용자가 애플리케이션에 있는 동안 취소를 적용하는 것이 좋습니다. profile.emails.read
없이 새 범위(예:email
)에 다시 동의하라는 메시지를 사용자에게 표시합니다.- Google API OAuth 동의 화면 구성에서 단계적으로 중단될 범위를 삭제합니다.
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
를 추가합니다.