이 페이지는 Cloud Translation API를 통해 번역되었습니다.

클라이언트 측 웹 애플리케이션용 OAuth 2.0

이 문서에서는 OAuth 2.0 인증을 구현하여 액세스하는 방법을 설명합니다. Google API를 가져오는 방법입니다. OAuth 2.0을 사용하면 사용자 이름, 비밀번호 및 기타 사용자 이름과 비밀번호를 그대로 유지하면서 정보를 비공개로 유지합니다. 예를 들어 애플리케이션은 OAuth 2.0을 사용하여 Google Drive에 파일을 저장할 수 있습니다.

이 OAuth 2.0 흐름을 암시적 권한 부여 흐름이라고 합니다. Kubernetes는 사용자가 애플리케이션에 있는 동안에만 API에 액세스하는 애플리케이션 이러한 애플리케이션은 기밀 정보를 저장할 수 없습니다.

이 흐름에서 앱은 쿼리 매개변수를 사용하여 앱을 식별하는 Google URL을 엽니다. 앱에 필요한 API 액세스 유형 현재 브라우저에서 URL을 열 수 있습니다. 팝업 창 또는 팝업이 표시됩니다. 사용자는 Google에 인증하고 요청된 권한을 부여할 수 있습니다. 그러면 Google이 사용자를 앱으로 다시 리디렉션합니다. 리디렉션에는 액세스 토큰이 포함되며 확인 및 사용하여 API 요청에 사용할 수 있습니다.

Google API 클라이언트 라이브러리 및 Google ID 서비스

JavaScript용 Google API 클라이언트 라이브러리를 사용하는 경우 Google에 승인된 호출을 보내려면 Google ID 서비스 JavaScript 라이브러리를 사용하여 OAuth 2.0 흐름을 처리합니다. 자세한 내용은 ID 서비스' 토큰 모델: 암시적 권한 부여 흐름을 기반으로 합니다.

기본 요건

프로젝트에 API 사용 설정

Google API를 호출하는 모든 애플리케이션은 API Console

프로젝트에 API를 사용 설정하는 방법은 다음과 같습니다.

Open the API Library Google API Console입니다.
If prompted, select a project, or create a new one.
API Library 에는 사용 가능한 모든 API가 제품별로 그룹화되어 나열됩니다. 인기도에 초점을 맞춥니다. 사용 설정하려는 API가 목록에 표시되지 않으면 검색을 사용하여 제품을 찾거나 제품이 속한 제품군에서 모두 보기를 클릭합니다.
사용 설정하려는 API를 선택한 다음 사용 설정 버튼을 클릭합니다.
If prompted, enable billing.
If prompted, read and accept the API's Terms of Service.

승인 사용자 인증 정보 만들기

OAuth 2.0을 사용하여 Google API에 액세스하는 모든 애플리케이션에는 승인 사용자 인증 정보가 있어야 합니다. 애플리케이션 식별 정보를 Google의 OAuth 2.0 서버로 전송합니다. 다음 단계에서는 사용자 인증 정보를 만듭니다 그러면 애플리케이션에서 사용자 인증 정보를 사용하여 API에 액세스할 수 있습니다. 사용 설정해야 합니다

Go to the Credentials page.
사용자 인증 정보 만들기 > OAuth 클라이언트 ID를 클릭합니다.
웹 애플리케이션 애플리케이션 유형을 선택합니다.
신고 양식을 작성합니다. JavaScript를 사용하여 승인된 Google API 요청을 만드는 애플리케이션 승인된 JavaScript 출처를 지정해야 합니다. 출처는 애플리케이션이 OAuth 2.0 서버에 요청을 보낼 수 있습니다. 이러한 출처는 Google의 유효성 검사 규칙에 따라 변경사항을 적용합니다.

액세스 범위 식별

범위를 사용 설정하면 애플리케이션이 필요한 리소스에 대한 액세스만 요청할 수 있으며 사용자가 애플리케이션에 부여하는 액세스 수준을 제어할 수 있게 해줍니다. 따라서 요청된 범위 수와 사용자 동의 획득

OAuth 2.0 승인을 구현하기 전에 해당 범위를 식별하는 것이 좋습니다. 앱에 액세스 권한이 있어야 합니다

OAuth 2.0 API 범위 문서에는 전체 내용이 포함되어 있습니다. Google API에 액세스하는 데 사용할 수 있는 범위 목록입니다.

OAuth 2.0 액세스 토큰 받기

다음 단계는 애플리케이션이 Google의 OAuth 2.0 서버와 상호작용하여 사용자를 대신하여 API 요청을 수행하는 사용자 동의. 애플리케이션에는 있어야 사용자 승인이 필요한 Google API 요청을 실행할 수 있습니다.

1단계: Google의 OAuth 2.0 서버로 리디렉션

사용자 데이터에 액세스할 수 있는 권한을 요청하려면 사용자를 Google의 OAuth 2.0으로 리디렉션하세요. 있습니다.

OAuth 2.0 엔드포인트

Google의 OAuth 2.0 엔드포인트에서 액세스를 요청할 URL을 생성합니다. https://accounts.google.com/o/oauth2/v2/auth 이 엔드포인트는 HTTPS를 통해 액세스할 수 있습니다. 일반 HTTP 연결이 거부됩니다.

Google 승인 서버는 웹에 대해 다음과 같은 쿼리 문자열 매개변수를 지원합니다. 서버 애플리케이션:

매개변수

client_id

필수

애플리케이션의 클라이언트 ID입니다. 이 값은 API Console Credentials page입니다.

redirect_uri

필수

사용자가 사용할 수 있습니다. 값은 설정했던 OAuth 2.0 클라이언트를 API Console Credentials page입니다. 이 값이 제공된 client_id에 대해 승인된 리디렉션 URI를 반환합니다. redirect_uri_mismatch 오류가 발생했습니다.

http 또는 https 스키마, 케이스, 후행 슬래시 ('/')가 모두 일치해야 합니다.

response_type

필수

JavaScript 애플리케이션은 매개변수의 값을 token로 설정해야 합니다. 이 값은 Google 승인 서버가 액세스 토큰을 다음 URI (#)의 프래그먼트 식별자에 있는 name=value 쌍입니다. 승인 프로세스가 완료된 후 사용자가 리디렉션됩니다.

scope

필수

가 공백으로 구분 애플리케이션이 액세스할 수 있는 리소스를 식별하는 범위 할 수 있습니다. 이 값은 Google에서 있습니다.

범위를 사용하면 애플리케이션이 필요한 리소스에 대한 액세스만 요청할 수 있습니다. 사용자가 내 사이트에 부여하는 액세스 권한의 양을 애플리케이션입니다. 따라서 요청된 범위 수 간에는 반비례 관계가 있습니다. 사용자 동의 획득 가능성을 고려합니다.

애플리케이션에서 컨텍스트 내에서 승인 범위에 대한 액세스를 요청하는 것이 좋습니다. 할 수 있습니다. 다음을 통해 컨텍스트 내에서 사용자 데이터에 대한 액세스를 요청함 단계별 승인을 통해 사용자가 손쉽게 애플리케이션에 요청하는 액세스가 필요한 이유를 이해할 수 있습니다.

state

권장

애플리케이션이 승인 요청 및 승인 서버의 응답을 나타냅니다. 서버는 name=value 쌍으로 전송하는 정확한 값을 URL 부분 식별자 (#) 의 redirect_uri 사용자가 애플리케이션의 액세스할 수 있습니다.

이 매개변수는 사용자를 nonce 전송, 교차 사이트 요청 완화 등 애플리케이션의 올바른 리소스 사용 있습니다. state를 사용하여 redirect_uri을 추측할 수 있으므로 값은 수신 연결이 18개월 또는 30일 동안의 인증 요청에 사용할 수 있습니다. 임의의 문자열을 생성하거나 쿠키 또는 쿠키의 해시를 인코딩하는 경우 클라이언트 상태를 캡처하는 다른 값이 있는 경우 요청과 응답이 동일한 브라우저에서 시작되었는지 확인해야 합니다. 일회성, 직간접적 공격, 지속적 공격, 크로스 사이트 요청 위조 자세한 내용은 OpenID Connect state 토큰을 만들고 확인하는 방법에 관한 예시를 참조하세요.

</ph> 중요: OAuth 클라이언트는 OAuth2 사양 에 대해 자세히 알아보세요. 이를 달성하는 한 가지 방법은 state 매개변수를 사용하여 상태입니다.

include_granted_scopes

선택사항

애플리케이션이 점진적 승인을 사용하여 추가 범위를 맞춤설정할 수 있습니다 이 매개변수의 값을 true로 설정하고 승인 요청이 승인되면 새 액세스 토큰에 이전에 애플리케이션 액세스 권한을 부여한 것입니다. 자세한 내용은 증분 승인 섹션을 참조하세요.

enable_granular_consent

선택사항

기본값은 true입니다. false로 설정된 경우 더보기 세분화된 Google 계정 권한 2019년 이전에 생성된 OAuth 클라이언트 ID에는 사용이 중지됩니다. 최신 버전에 효과 없음 OAuth 클라이언트 ID. 보다 세분화된 권한이 항상 사용 설정되기 때문입니다.

Google이 애플리케이션에 대한 세분화된 권한을 사용 설정하는 경우 이 매개변수는 영향을 미치지 않습니다.

login_hint

선택사항

애플리케이션이 인증을 시도하는 사용자를 알고 있는 경우 이 매개변수를 사용할 수 있습니다. Google 인증 서버에 힌트를 제공합니다. 서버는 힌트를 사용하여 로그인 양식의 이메일 입력란을 미리 채우거나 적절한 멀티 로그인 세션을 선택합니다.

매개변수 값을 이메일 주소 또는 sub 식별자로 설정합니다. 사용자의 Google ID와 같습니다.

prompt

선택사항

공백으로 구분되며 대소문자를 구분하는 사용자에게 표시할 메시지 목록입니다. 그렇지 않은 경우 이 매개변수를 지정하면 프로젝트를 처음 사용할 때만 사용자에게 메시지가 표시됩니다. 액세스 권한을 요청합니다. 를 참조하세요. 재동의 메시지 표시

가능한 값은 다음과 같습니다.

`none`	인증 또는 동의 화면을 표시하지 않습니다. 다음으로 지정해서는 안 됩니다. 다른 값을 사용할 수 있습니다.
`consent`	사용자에게 동의를 요청하는 메시지를 표시합니다.
`select_account`	사용자에게 계정을 선택하라는 메시지를 표시합니다.

Google 인증 서버로의 샘플 리디렉션

가독성을 위해 줄바꿈과 공백이 포함된 예시 URL이 아래에 나와 있습니다.

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A//www.googleapis.com/auth/drive.metadata.readonly&
 include_granted_scopes=true&
 response_type=token&
 state=state_parameter_passthrough_value&
 redirect_uri=https%3A//oauth2.example.com/code&
 client_id=client_id

요청 URL을 만든 후 사용자를 이 URL로 리디렉션합니다.

JavaScript 샘플 코드

다음 자바스크립트 스니펫은 JavaScript용 Google API 클라이언트 라이브러리를 사용하지 않고 JavaScript를 사용할 수 있습니다. 이 OAuth 교차 출처 리소스 공유 (CORS)를 지원하지 않는 경우 스니펫은 양식을 작성한다는 것입니다.

/*
 * Create form to request access token from Google's OAuth 2.0 server.
 */
function oauthSignIn() {
  // Google's OAuth 2.0 endpoint for requesting an access token
  var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';

  // Create <form> element to submit parameters to OAuth 2.0 endpoint.
  var form = document.createElement('form');
  form.setAttribute('method', 'GET'); // Send as a GET request.
  form.setAttribute('action', oauth2Endpoint);

  // Parameters to pass to OAuth 2.0 endpoint.
  var params = {'client_id': 'YOUR_CLIENT_ID',
                'redirect_uri': 'YOUR_REDIRECT_URI',
                'response_type': 'token',
                'scope': 'https://www.googleapis.com/auth/drive.metadata.readonly',
                'include_granted_scopes': 'true',
                'state': 'pass-through value'};

  // Add form parameters as hidden input values.
  for (var p in params) {
    var input = document.createElement('input');
    input.setAttribute('type', 'hidden');
    input.setAttribute('name', p);
    input.setAttribute('value', params[p]);
    form.appendChild(input);
  }

  // Add form to page and submit it to open the OAuth 2.0 endpoint.
  document.body.appendChild(form);
  form.submit();
}

2단계: Google에서 사용자에게 동의 요청 메시지 표시

이 단계에서 사용자는 애플리케이션에 요청된 액세스 권한을 부여할지 여부를 결정합니다. 이 시간 단계에서 Google에 애플리케이션의 이름과 Google API의 이름을 명시한 동의 창이 표시됩니다. 사용자 인증 정보를 사용하여 액세스할 수 있는 권한을 요청하는 서비스가 부여할 수 있습니다. 이 그러면 사용자는 애플리케이션 또는 앱에서 요청하는 하나 이상의 범위에 대한 액세스 권한을 부여하는 데 동의할 수 있습니다. 요청을 거부합니다.

애플리케이션은 이 단계에서 액세스 권한이 부여되었는지 여부를 나타내는 Google의 OAuth 2.0 서버입니다. 이 응답은 다음 단계를 따르세요.

오류

Google의 OAuth 2.0 승인 엔드포인트에 대한 요청에서 사용자에게 표시되는 오류 메시지를 표시할 수 있습니다. 를 사용합니다. 일반적인 오류 코드 및 추천 해결 방법은 아래에 나와 있습니다.

`admin_policy_enforced`

Google 계정에서 다음 정책으로 인해 요청된 하나 이상의 범위를 승인할 수 없습니다. Google Workspace 관리자에게 문의하세요 Google Workspace 관리자 도움말 보기 <ph type="x-smartling-placeholder"></ph> 어떤 서드 파티 및 Google Workspace 데이터에 액세스하는 내부 앱 를 참조하세요. OAuth 클라이언트 ID에 액세스 권한이 명시적으로 부여될 때까지 범위를 제한합니다.

`disallowed_useragent`

승인 엔드포인트는 Google에서 허용하지 않는 삽입된 user-agent 내부에 표시되며 OAuth 2.0 정책

Android

Android 개발자가 android.webkit.WebView 개발자는 대신 다음과 같은 Android 라이브러리를 사용해야 합니다. Android용 Google 로그인 또는 OpenID Foundation Android용 AppAuth.

Android 앱이 추가된 사용자 에이전트 및 사용자가 Google OAuth 2.0 승인 엔드포인트로 이동한 다음 확인할 수 있습니다. 개발자는 일반 링크가 운영체제의 일부로 Android App Links 핸들러 또는 기본 브라우저 앱을 사용할 수 있습니다. 이 Android 맞춤 탭 라이브러리도 지원되는 옵션입니다.

iOS

iOS 및 macOS 개발자가 WKWebView 개발자는 대신 다음과 같은 iOS 라이브러리를 사용해야 합니다. iOS용 Google 로그인 또는 OpenID Foundation iOS용 AppAuth.

iOS 또는 macOS 앱에서 삽입된 사용자 에이전트 및 사용자가 Google의 OAuth 2.0 승인 엔드포인트로 이동하여 확인할 수 있습니다. 개발자는 일반 링크가 운영체제의 일부로 범용 링크 핸들러 또는 기본 브라우저 앱을 사용할 수 있습니다. 이 SFSafariViewController 라이브러리도 지원되는 옵션입니다.

`org_internal`

요청에 포함된 OAuth 클라이언트 ID가 구체적인 <ph type="x-smartling-placeholder"></ph> Google Cloud 조직. 이 구성 옵션에 대한 자세한 내용은 사용자 유형 섹션을 참조하세요.

`invalid_client`

요청이 생성된 출처가 이 클라이언트에 대해 승인되지 않았습니다. 자세한 내용은 origin_mismatch

`invalid_grant`

증분 승인을 사용할 때 토큰이 만료되었을 수 있습니다. 무효화되었습니다. 사용자를 다시 인증하고 새 토큰을 받기 위해 사용자 동의를 요청합니다. 계속 진행하는 경우 이 오류를 보려면 애플리케이션이 올바르게 구성되었는지 그리고 요청에 올바른 토큰과 매개변수를 사용할 수 있습니다. 그렇지 않으면 사용자 계정에 사용 중지할 수 있습니다.

`origin_mismatch`

승인 요청을 보낸 JavaScript의 스키마, 도메인 및/또는 포트는 OAuth 클라이언트 ID에 대해 등록된 승인된 JavaScript 원본 URI와 일치해야 합니다. 검토 승인됨 Google API Console의 JavaScript 출처 Credentials page입니다.

`redirect_uri_mismatch`

승인 요청에서 전달된 redirect_uri이(가) 승인된 OAuth 클라이언트 ID의 리디렉션 URI입니다. 승인된 리디렉션 URI는 Google API Console Credentials page

승인 요청을 보낸 JavaScript의 스키마, 도메인 및/또는 포트는 OAuth 클라이언트 ID에 대해 등록된 승인된 JavaScript 원본 URI와 일치해야 합니다. 검토 승인된 JavaScript 출처에서 Google API Console Credentials page

redirect_uri 매개변수는 더 이상 지원되지 않습니다 자세한 내용은 이전 가이드를 참고하여 통합할 수 있습니다

`invalid_request`

요청한 내용에 문제가 있습니다. 다음과 같은 여러 가지 이유가 있을 수 있습니다.

요청의 형식이 올바르지 않습니다.
요청에 필수 매개변수가 누락되었습니다.
요청이 Google에서 지원하지 않는 승인 방법을 사용합니다. OAuth 확인 통합은 권장되는 통합 방법을 사용합니다.

3단계: OAuth 2.0 서버 응답 처리

OAuth 2.0 엔드포인트

중요: OAuth 2.0 응답을 처리하기 전에 Google로부터 수신된 state state 승인 요청을 제출할 수 있습니다. 이 확인은 사용자가 악의적인 활동이 아닌 실제 사용자임을 스크립트에서 요청을 처리하고 CSRF 공격.

OAuth 2.0 서버는 지정된 redirect_uri 액세스할 수 있습니다.

사용자가 요청을 승인하면 응답에 액세스 토큰이 포함됩니다. 사용자가 가 요청을 승인하지 않으면 응답에 오류 메시지가 포함됩니다. 액세스 토큰 또는 오류 메시지가 아래와 같이 리디렉션 URI의 해시 프래그먼트에서 반환됩니다.

액세스 토큰 응답은 다음과 같습니다.
```
https://oauth2.example.com/callback#access_token=4/P7q7W91&token_type=Bearer&expires_in=3600
```
access_token 매개변수 외에 프래그먼트 문자열도 에는 항상 다음과 같이 설정되는 token_type 매개변수가 포함됩니다. Bearer 및 expires_in 매개변수로 토큰의 수명(초)입니다. state 매개변수가 지정된 경우 포함되어 있으면 그 값도 응답에 포함됩니다.

오류 응답:

https://oauth2.example.com/callback#error=access_denied

를 통해 개인정보처리방침을 정의할 수 있습니다.

OAuth 2.0 서버 응답 샘플

다음 샘플 URL을 클릭하여 이 흐름을 테스트할 수 있습니다. Google Drive에 있는 파일의 메타데이터를 볼 수 있는 읽기 전용 액세스:

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A//www.googleapis.com/auth/drive.metadata.readonly&
 include_granted_scopes=true&
 response_type=token&
 state=state_parameter_passthrough_value&
 redirect_uri=https%3A//oauth2.example.com/code&
 client_id=client_id

OAuth 2.0 흐름을 완료하면 다음으로 리디렉션됩니다. http://localhost/oauth2callback 해당 URL은 404 NOT FOUND 오류가 발생합니다. 확인할 수 있습니다 다음 단계에서는 사용자가 애플리케이션으로 다시 리디렉션될 때의 URI

Google API 호출

OAuth 2.0 엔드포인트

애플리케이션이 액세스 토큰을 획득한 후에는 이 토큰을 사용하여 Google Cloud 콘솔 API를 호출함으로써 API에서 요구하는 액세스 범위가 부여된 경우 사용자 계정이 생성됩니다. 이렇게 하려면 access_token 쿼리 중 하나를 포함하여 API에 대한 요청에 액세스 토큰 생성 매개변수 또는 Authorization HTTP 헤더 Bearer 값을 사용해야 합니다. 가능하면 쿼리 문자열은 서버 로그에 표시되는 경향이 있으므로 HTTP 헤더를 사용하는 것이 좋습니다. 최대 클라이언트 라이브러리를 사용하여 Google API에 대한 호출을 설정할 수 있는 경우 (예: Drive Files API 호출).

모든 Google API를 사용해 보고 OAuth 2.0 플레이그라운드.

HTTP GET 예시

호출 <ph type="x-smartling-placeholder"></ph> drive.files 엔드포인트 (Drive Files API)는 Authorization: Bearer HTTP를 사용하는 헤더는 다음과 같을 수 있습니다. 자체 액세스 토큰을 지정해야 합니다.

GET /drive/v2/files HTTP/1.1
Host: www.googleapis.com
Authorization: Bearer access_token

다음은 access_token를 사용하여 인증된 사용자의 동일한 API를 호출합니다. 쿼리 문자열 매개변수:

GET https://www.googleapis.com/drive/v2/files?access_token=access_token

`curl` 예

curl 명령줄 애플리케이션을 사용하여 이러한 명령어를 테스트할 수 있습니다. 다음은 예를 들면 다음과 같습니다 (권장).

curl -H "Authorization: Bearer access_token" https://www.googleapis.com/drive/v2/files

또는 쿼리 문자열 매개변수 옵션을 사용합니다.

curl https://www.googleapis.com/drive/v2/files?access_token=access_token

JavaScript 샘플 코드

아래의 코드 스니펫은 CORS (교차 출처 리소스 공유)를 사용하여 Google API에 요청을 보낼 수 있습니다 이 예에서는 JavaScript용 Google API 클라이언트 라이브러리를 사용하지 않습니다. 그러나 클라이언트 라이브러리를 사용하지 않더라도 라이브러리 문서의 CORS 지원 가이드가 을 읽고 이러한 요청을 더 잘 이해할 수 있습니다.

이 코드 스니펫에서 access_token 변수는 얻은 권한을 사용하여 승인된 사용자를 대신하여 API 요청을 할 수 있습니다. 전체 예는 이 토큰을 브라우저의 로컬 저장소에 저장하고 검색하는 방법을 보여줍니다. API 요청을 할 때

var xhr = new XMLHttpRequest();
xhr.open('GET',
    'https://www.googleapis.com/drive/v3/about?fields=user&' +
    'access_token=' + params['access_token']);
xhr.onreadystatechange = function (e) {
  console.log(xhr.response);
};
xhr.send(null);

전체 예시

OAuth 2.0 엔드포인트

이 코드 샘플은 다음을 사용하지 않고 자바스크립트에서 OAuth 2.0 흐름을 완료하는 방법을 보여줍니다. JavaScript용 Google API 클라이언트 라이브러리입니다. 이 코드는 API 요청을 시도해 보세요 버튼을 클릭하면 코드는 페이지에서 브라우저의 로컬 저장소에 있는 API 액세스 토큰입니다. 이 경우에는 API 요청을 실행합니다. 그렇지 않으면 OAuth 2.0 흐름이 시작됩니다.

OAuth 2.0 흐름의 경우 페이지는 다음 단계를 따릅니다.

사용자를 Google의 OAuth 2.0 서버로 안내하며 이 서버는 https://www.googleapis.com/auth/drive.metadata.readonly 범위.
하나 이상의 요청된 범위에 대한 액세스 권한을 부여 (또는 거부)하면 사용자는 부분 식별자 문자열에서 액세스 토큰을 파싱합니다.
이 페이지는 액세스 토큰을 사용하여 샘플 API 요청을 만듭니다.

API 요청은 Drive API의 about.get 메서드를 호출하여 승인된 사용자의 Google Drive 계정에 대한 정보
요청이 실행되면 API 응답이 브라우저의 디버깅에 기록됩니다. 살펴보겠습니다

다음 링크를 통해 앱에 대한 액세스 권한을 취소할 수 있습니다. 권한 페이지 Google 계정을 탭합니다. 그러면 앱이 Google API Docs용 OAuth 2.0 데모로 표시됩니다.

이 코드를 로컬에서 실행하려면 YOUR_CLIENT_ID 및 다음에 해당하는 YOUR_REDIRECT_URI 변수입니다. 승인 사용자 인증 정보가 있어야 합니다. YOUR_REDIRECT_URI 변수 는 페이지가 게재되는 동일한 URL로 설정되어야 합니다. 값이 OAuth 2.0 클라이언트에 대해 승인된 리디렉션 URI이며 API Console Credentials page만약 이 값이 승인된 URI와 일치하지 않으면 redirect_uri_mismatch이 표시됩니다. 오류가 발생했습니다. 또한 프로젝트에는 적절한 API를 사용 설정했습니다.

<html><head></head><body>
<script>
  var YOUR_CLIENT_ID = 'REPLACE_THIS_VALUE';
  var YOUR_REDIRECT_URI = 'REPLACE_THIS_VALUE';

  // Parse query string to see if page request is coming from OAuth 2.0 server.
  var fragmentString = location.hash.substring(1);
  var params = {};
  var regex = /([^&=]+)=([^&]*)/g, m;
  while (m = regex.exec(fragmentString)) {
    params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
  }
  if (Object.keys(params).length > 0 && params['state']) {
    if (params['state'] == localStorage.getItem('state')) {
      localStorage.setItem('oauth2-test-params', JSON.stringify(params) );

      trySampleRequest();
    } else {
      console.log('State mismatch. Possible CSRF attack');
    }
  }

  // Function to generate a random state value
  function generateCryptoRandomState() {
    const randomValues = new Uint32Array(2);
    window.crypto.getRandomValues(randomValues);

    // Encode as UTF-8
    const utf8Encoder = new TextEncoder();
    const utf8Array = utf8Encoder.encode(
      String.fromCharCode.apply(null, randomValues)
    );

    // Base64 encode the UTF-8 data
    return btoa(String.fromCharCode.apply(null, utf8Array))
      .replace(/\+/g, '-')
      .replace(/\//g, '_')
      .replace(/=+$/, '');
  }

  // If there's an access token, try an API request.
  // Otherwise, start OAuth 2.0 flow.
  function trySampleRequest() {
    var params = JSON.parse(localStorage.getItem('oauth2-test-params'));
    if (params && params['access_token']) {
      var xhr = new XMLHttpRequest();
      xhr.open('GET',
          'https://www.googleapis.com/drive/v3/about?fields=user&' +
          'access_token=' + params['access_token']);
      xhr.onreadystatechange = function (e) {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(xhr.response);
        } else if (xhr.readyState === 4 && xhr.status === 401) {
          // Token invalid, so prompt for user permission.
          oauth2SignIn();
        }
      };
      xhr.send(null);
    } else {
      oauth2SignIn();
    }
  }

  /*
   * Create form to request access token from Google's OAuth 2.0 server.
   */
  function oauth2SignIn() {
    // create random state value and store in local storage
    var state = generateCryptoRandomState();
    localStorage.setItem('state', state);

    // Google's OAuth 2.0 endpoint for requesting an access token
    var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';

    // Create element to open OAuth 2.0 endpoint in new window.
    var form = document.createElement('form');
    form.setAttribute('method', 'GET'); // Send as a GET request.
    form.setAttribute('action', oauth2Endpoint);

    // Parameters to pass to OAuth 2.0 endpoint.
    var params = {'client_id': YOUR_CLIENT_ID,
                  'redirect_uri': YOUR_REDIRECT_URI,
                  'scope': 'https://www.googleapis.com/auth/drive.metadata.readonly',
                  'state': state,
                  'include_granted_scopes': 'true',
                  'response_type': 'token'};

    // Add form parameters as hidden input values.
    for (var p in params) {
      var input = document.createElement('input');
      input.setAttribute('type', 'hidden');
      input.setAttribute('name', p);
      input.setAttribute('value', params[p]);
      form.appendChild(input);
    }

    // Add form to page and submit it to open the OAuth 2.0 endpoint.
    document.body.appendChild(form);
    form.submit();
  }
</script>

<button onclick="trySampleRequest();">Try sample request</button>
</body></html>

JavaScript 출처 유효성 검사 규칙

Google은 개발자가 애플리케이션을 안전하게 유지할 수 있기 때문입니다 JavaScript 출처는 이러한 규칙을 준수해야 합니다. RFC 3986 섹션 3에서 아래에 언급된 도메인, 호스트 및 스키마의 정의입니다.

유효성 검사 규칙
스키마	자바스크립트 원본은 일반 HTTP가 아닌 HTTPS 스키마를 사용해야 합니다. 로컬 호스트 URI localhost IP 주소 URI 포함)은 이 규칙에서 제외됩니다.
호스트	호스트는 원시 IP 주소일 수 없습니다. 로컬 호스트 IP 주소는 이 규칙에서 제외됩니다.
도메인	호스트 TLD (최상위 도메인) 공개 접미사 목록에 속해야 합니다. 호스트 도메인은 `“googleusercontent.com”`일 수 없습니다. JavaScript 출처에는 URL 단축기 도메인 (예: `goo.gl`)을 포함할 수 없습니다. 사용할 수 없습니다.
사용자 정보	JavaScript 출처에는 userinfo 하위 구성 요소가 포함될 수 없습니다.
경로	JavaScript 출처에는 경로 구성요소가 포함될 수 없습니다.
쿼리	JavaScript 출처에는 쿼리 구성요소가 포함될 수 없습니다.
Fragment	JavaScript 출처에는 프래그먼트 구성요소가 포함될 수 없습니다.
문자	JavaScript 출처에는 다음과 같은 특정 문자를 포함할 수 없습니다. <ph type="x-smartling-placeholder"> </ph> 와일드 카드 문자 (`'*'`) 인쇄할 수 없는 ASCII 문자 퍼센트 인코딩이 잘못되었습니다 (URL 인코딩을 따르지 않는 퍼센트 인코딩이 잘못됨 퍼센트 기호 뒤에 두 개의 16진수 숫자가 오는 형식) null 문자 (인코딩된 NULL 문자, 예: `%00`, `%C0%80`)

점진적 승인

OAuth 2.0 프로토콜에서 앱은 60비트 필드입니다 승인을 요청하는 것은 최선의 사용자 환경 관행으로 간주됩니다. 리소스를 프로비저닝할 수 있습니다 이를 위해 Google 인증 서버는 단계적 승인을 지원합니다. 이 기능을 사용하면 필요에 따라 범위를 요청할 수 있으며 사용자가 새 범위에 대한 권한을 부여하면 사용자가 프로젝트에 부여한 모든 범위가 포함된 토큰으로 교환합니다.

예를 들어 음악 트랙을 샘플링하고 믹스를 만들 수 있는 앱에는 리소스, 예를 들면 로그인하는 사람의 이름일 뿐입니다. 하지만 완성된 믹스를 저장하려면 Google Drive에 액세스해야 합니다. 대부분의 사람들은 사용자가 앱을 사용할 때 Google 드라이브에 액세스하라는 요청만 받았다고 해서 필요로 했습니다

이 경우 로그인 시 앱이 openid 및 profile 범위를 사용하여 기본 로그인을 수행한 다음 나중에 https://www.googleapis.com/auth/drive.file 범위를 사용하여 혼합해 보겠습니다.

점진적 승인을 통해 얻은 액세스 토큰에는 다음 규칙이 적용됩니다.

이 토큰은 새롭게 통합된 승인입니다.
통합 승인에 대한 갱신 토큰을 사용하여 액세스 토큰을 얻으면 액세스 토큰은 통합 승인을 나타내며 응답에 scope개 값이 포함됩니다.
통합 승인에는 사용자가 API 프로젝트에 부여한 모든 범위가 포함됩니다. 서로 다른 고객으로부터 지원금을 요청한 경우 예를 들어 사용자가 한 범위를 애플리케이션의 데스크톱 클라이언트를 사용하여 지정한 다음 모바일 클라이언트를 통한 애플리케이션의 경우 통합 승인에는 두 범위가 모두 포함됩니다.
통합 승인을 나타내는 토큰을 취소하는 경우 해당 토큰 모두에 액세스할 수 있습니다. 동시에 취소됩니다.

를 통해 개인정보처리방침을 정의할 수 있습니다.

아래의 코드 샘플은 기존 액세스 토큰에 범위를 추가하는 방법을 보여줍니다. 이 접근 방식을 사용하면 여러 액세스 토큰을 관리하지 않아도 됩니다.

OAuth 2.0 엔드포인트

기존 액세스 토큰에 범위를 추가하려면 include_granted_scopes를 포함합니다. 매개변수를 Google의 OAuth 2.0 서버에 대한 요청에 포함해야 합니다.

다음 코드 스니펫은 그 방법을 보여줍니다. 이 스니펫은 각 포드에 대해 브라우저의 로컬 저장소에 저장된 액세스 토큰의 유효 범위입니다. ( 전체 예 코드: oauth2-test-params.scope 속성을 브라우저의 로컬 storage.)

스니펫은 액세스 토큰이 유효한 범위를 사용하려는 범위와 비교합니다. 확인할 수 있습니다 액세스 토큰에 해당 범위가 포함되지 않으면 OAuth 2.0 흐름이 시작됩니다. 여기서 oauth2SignIn 함수는 2단계 (자세한 내용은 전체 예).

var SCOPE = 'https://www.googleapis.com/auth/drive.metadata.readonly';
var params = JSON.parse(localStorage.getItem('oauth2-test-params'));

var current_scope_granted = false;
if (params.hasOwnProperty('scope')) {
  var scopes = params['scope'].split(' ');
  for (var s = 0; s < scopes.length; s++) {
    if (SCOPE == scopes[s]) {
      current_scope_granted = true;
    }
  }
}

if (!current_scope_granted) {
  oauth2SignIn(); // This function is defined elsewhere in this document.
} else {
  // Since you already have access, you can proceed with the API request.
}

토큰 취소

사용자가 애플리케이션에 부여된 액세스 권한을 취소하려고 하는 경우도 있습니다. 사용자는 액세스 권한을 취소할 수 있습니다. 방문 계정 설정을 탭합니다. 자세한 내용은 삭제 서드 파티 사이트의 사이트 또는 앱 액세스 섹션 및 내 계정에 액세스할 수 있는 앱 지원 문서를 참조하세요.

또한 애플리케이션에서 프로그래밍 방식으로 주어진 액세스 권한을 취소할 수도 있습니다. 프로그래매틱 취소는 사용자가 구독을 취소하거나 또는 앱에 필요한 API 리소스가 크게 변경된 경우 즉, 삭제 프로세스의 일부로 이전에 사용하던 권한을 확인하기 위한 API 요청이 포함될 수 있습니다. 삭제됩니다.

OAuth 2.0 엔드포인트

토큰을 프로그래매틱 방식으로 취소하기 위해 애플리케이션은 https://oauth2.googleapis.com/revoke이며 토큰을 매개변수로 포함합니다.

curl -d -X -POST --header "Content-type:application/x-www-form-urlencoded" \
        https://oauth2.googleapis.com/revoke?token={token}

토큰은 액세스 토큰 또는 갱신 토큰일 수 있습니다. 토큰이 액세스 토큰이며 해당하는 갱신 토큰이 있으면 갱신 토큰도 취소됩니다.

취소가 성공적으로 처리되면 응답의 HTTP 상태 코드는 200 오류 조건의 경우 HTTP 상태 코드 400가 함께 반환됩니다. 오류 코드가 표시됩니다.

다음 자바스크립트 스니펫은 JavaScript용 Google API 클라이언트 라이브러리입니다. 취소를 위한 Google의 OAuth 2.0 엔드포인트가 토큰은 교차 출처 리소스 공유 (CORS)를 지원하지 않으므로 XMLHttpRequest() 메서드를 사용하여 합니다.

function revokeAccess(accessToken) {
  // Google's OAuth 2.0 endpoint for revoking access tokens.
  var revokeTokenEndpoint = 'https://oauth2.googleapis.com/revoke';

  // Create <form> element to use to POST data to the OAuth 2.0 endpoint.
  var form = document.createElement('form');
  form.setAttribute('method', 'post');
  form.setAttribute('action', revokeTokenEndpoint);

  // Add access token to the form so it is set as value of 'token' parameter.
  // This corresponds to the sample curl request, where the URL is:
  //      https://oauth2.googleapis.com/revoke?token={token}
  var tokenField = document.createElement('input');
  tokenField.setAttribute('type', 'hidden');
  tokenField.setAttribute('name', 'token');
  tokenField.setAttribute('value', accessToken);
  form.appendChild(tokenField);

  // Add form to page and submit it to actually revoke the token.
  document.body.appendChild(form);
  form.submit();
}

계정 간 보안 구현

사용자의 개인 정보를 보호하기 위해 취해야 할 추가 조치 여러 계정에서 교차 계정 구현 중 Google의 계정 간 보안 서비스를 활용하여 보호합니다. 이 서비스를 사용하면 보안 관련 활동에 대한 정보를 애플리케이션에 제공하는 사용자 계정에 큰 변화가 있을 수 있습니다. 그런 다음 이러한 정보를 활용하여 이벤트에 대한 응답 방법을 결정하는 것입니다.

다음은 Google 계정 간 보안 서비스에서 앱에 전송하는 이벤트 유형의 예입니다.

https://schemas.openid.net/secevent/risc/event-type/sessions-revoked
https://schemas.openid.net/secevent/oauth/event-type/token-revoked
https://schemas.openid.net/secevent/risc/event-type/account-disabled

자세한 내용은 <ph type="x-smartling-placeholder"></ph> 계정 간 보안 페이지에서 사용자 계정 보호하기 를 통해 개인정보처리방침을 정의할 수 있습니다. 에서 교차 계정 보호를 구현하는 방법을 자세히 알아보고 사용 가능한 이벤트의 전체 목록을 확인하세요.

클라이언트 측 웹 애플리케이션용 OAuth 2.0

Google API 클라이언트 라이브러리 및 Google ID 서비스

기본 요건

프로젝트에 API 사용 설정

승인 사용자 인증 정보 만들기

액세스 범위 식별

OAuth 2.0 액세스 토큰 받기

1단계: Google의 OAuth 2.0 서버로 리디렉션

OAuth 2.0 엔드포인트

Google 인증 서버로의 샘플 리디렉션

JavaScript 샘플 코드

2단계: Google에서 사용자에게 동의 요청 메시지 표시

오류

admin_policy_enforced

disallowed_useragent

Android

iOS

org_internal

invalid_client

invalid_grant

origin_mismatch

redirect_uri_mismatch

invalid_request

3단계: OAuth 2.0 서버 응답 처리

OAuth 2.0 엔드포인트

OAuth 2.0 서버 응답 샘플

Google API 호출

OAuth 2.0 엔드포인트

HTTP GET 예시

curl 예

JavaScript 샘플 코드

전체 예시

OAuth 2.0 엔드포인트

JavaScript 출처 유효성 검사 규칙

점진적 승인

OAuth 2.0 엔드포인트

토큰 취소

OAuth 2.0 엔드포인트

계정 간 보안 구현

`admin_policy_enforced`

`disallowed_useragent`

`org_internal`

`invalid_client`

`invalid_grant`

`origin_mismatch`

`redirect_uri_mismatch`

`invalid_request`

`curl` 예