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

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

이 문서에서는 자바스크립트 웹 애플리케이션에서 Google API에 액세스하기 위해 OAuth 2.0 승인을 구현하는 방법을 설명합니다. OAuth 2.0을 사용하면 사용자가 사용자 이름과 비밀번호, 기타 정보를 비공개로 유지하면서 특정 데이터를 애플리케이션과 공유할 수 있습니다. 예를 들어 애플리케이션에서 OAuth 2.0을 사용하여 사용자로부터 Google Drive에 파일을 저장할 권한을 얻을 수 있습니다.

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

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

기본 요건

프로젝트에 API 사용 설정

Google API를 호출하는 모든 애플리케이션은 API Console에서 이러한 API를 사용 설정해야 합니다.

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

  1. Open the API Library : Google API Console
  2. If prompted, select a project, or create a new one.
  3. API Library 사용 가능한 모든 API가 제품군 및 인기도별로 그룹화되어 나열됩니다. 사용 설정하려는 API가 목록에 없는 경우 검색을 사용하여 찾거나 해당 API가 속한 제품군에서 모두 보기를 클릭합니다.
  4. 사용 설정하려는 API를 선택한 다음 사용 설정 버튼을 클릭합니다.
  5. If prompted, enable billing.
  6. If prompted, read and accept the API's Terms of Service.

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

OAuth 2.0을 사용하여 Google API에 액세스하는 모든 애플리케이션에는 Google OAuth 2.0 서버에 대한 애플리케이션을 식별하는 승인 사용자 인증 정보가 있어야 합니다. 다음 단계에서는 프로젝트의 사용자 인증 정보를 만드는 방법을 설명합니다. 그러면 애플리케이션이 사용자 인증 정보를 사용하여 해당 프로젝트에 대해 사용 설정된 API에 액세스할 수 있습니다.

  1. Go to the Credentials page.
  2. 사용자 인증 정보 만들기 > OAuth 클라이언트 ID를 클릭합니다.
  3. 웹 애플리케이션 애플리케이션 유형을 선택합니다.
  4. 신고 양식을 작성합니다. 자바스크립트를 사용하여 승인된 Google API를 요청하는 애플리케이션은 승인된 자바스크립트 출처를 지정해야 합니다. 출처는 애플리케이션에서 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 API 클라이언트 라이브러리를 사용하여 OAuth 2.0 흐름을 처리하는 경우 첫 번째 단계는 gapi.auth2gapi.client 객체를 구성하는 것입니다. 이러한 객체를 통해 애플리케이션은 사용자 승인을 받고 승인된 API 요청을 할 수 있습니다.

클라이언트 객체는 애플리케이션이 액세스 권한을 요청하는 범위를 식별합니다. 이러한 값은 Google이 사용자에게 표시하는 동의 화면에 알립니다.

JS 클라이언트 라이브러리

자바스크립트 클라이언트 라이브러리는 인증 프로세스의 여러 측면을 단순화합니다.

  1. Google 승인 서버의 리디렉션 URL을 만들고 사용자를 해당 URL로 안내하는 메서드를 제공합니다.
  2. 서버에서 서버로의 리디렉션을 다시 처리합니다.
  3. 인증 서버에서 반환된 액세스 토큰의 유효성을 검사합니다.
  4. 인증 서버가 애플리케이션에 전송하는 액세스 토큰을 저장하고 이후에 앱에서 승인된 API를 호출할 때 액세스 토큰을 가져옵니다.

아래의 코드 스니펫은 이 문서의 뒷부분에 나와 있는 전체 예시에서 발췌한 것입니다. 이 코드는 애플리케이션이 나중에 API를 호출하는 데 사용할 gapi.client 객체를 초기화합니다. 이 객체가 생성되면 애플리케이션이 사용자의 승인 상태를 확인하고 모니터링하는 데 사용하는 gapi.auth2 객체도 초기화됩니다.

gapi.client.init 호출은 다음 필드를 지정합니다.

  • apiKeyclientId 값은 애플리케이션의 승인 사용자 인증 정보를 지정합니다. 승인 사용자 인증 정보 만들기 섹션에 설명된 대로 이러한 값은 API Console에서 얻을 수 있습니다. 애플리케이션이 승인된 API 요청을 하는 경우 clientId는 필수입니다. 승인되지 않은 요청만 수행하는 애플리케이션은 API 키만 지정하면 됩니다.
  • scope 필드는 애플리케이션이 사용자를 대신하여 액세스할 수 있는 리소스에 상응하는 공백으로 구분된 액세스 범위 목록을 지정합니다. 이러한 값은 Google이 사용자에게 표시하는 동의 화면에 알립니다.

    가능한 경우 애플리케이션에서 상황에 따라 승인 범위에 대한 액세스를 요청하는 것이 좋습니다. 증분 승인을 통해 컨텍스트에서 사용자 데이터에 대한 액세스를 요청하면 사용자가 애플리케이션에서 요청하는 액세스 권한이 필요한 이유를 더 쉽게 이해할 수 있습니다.

  • discoveryDocs 필드는 애플리케이션이 사용하는 API 검색 문서의 목록을 식별합니다. 검색 문서는 리소스 스키마를 포함하여 API 노출 영역을 설명하며 자바스크립트 클라이언트 라이브러리는 이 정보를 사용하여 애플리케이션이 사용할 수 있는 메서드를 생성합니다. 이 예에서 코드는 Google Drive API 버전 3에 대한 검색 문서를 검색합니다.

gapi.client.init 호출이 완료되면 코드에서 GoogleAuth 변수를 설정하여 Google 인증 객체를 식별합니다. 마지막으로 이 코드는 사용자의 로그인 상태가 변경될 때 함수를 호출하는 리스너를 설정합니다. (이 함수는 스니펫에 정의되어 있지 않습니다.)

var GoogleAuth; // Google Auth object.
function initClient() {
  gapi.client.init({
      'apiKey': 'YOUR_API_KEY',
      'clientId': 'YOUR_CLIENT_ID',
      'scope': 'https://www.googleapis.com/auth/drive.metadata.readonly',
      'discoveryDocs': ['https://www.googleapis.com/discovery/v1/apis/drive/v3/rest']
  }).then(function () {
      GoogleAuth = gapi.auth2.getAuthInstance();

      // Listen for sign-in state changes.
      GoogleAuth.isSignedIn.listen(updateSigninStatus);
  });
}

OAuth 2.0 엔드포인트

OAuth 2.0 엔드포인트에 직접 액세스하는 경우 다음 단계로 진행할 수 있습니다.

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

사용자 데이터에 대한 액세스 권한을 요청하려면 사용자를 Google OAuth 2.0 서버로 리디렉션하세요.

JS 클라이언트 라이브러리

GoogleAuth.signIn() 메서드를 호출하여 사용자를 Google 승인 서버로 안내합니다.

GoogleAuth.signIn();

실제로 애플리케이션은 API 호출을 시도하기 전에 부울 값을 설정하여 signIn() 메서드를 호출할지 결정할 수 있습니다.

아래의 코드 스니펫은 사용자 승인 흐름을 시작하는 방법을 보여줍니다. 스니펫에 관한 다음 사항에 유의하세요.

  • 코드에서 참조된 GoogleAuth 객체는 1단계의 코드 스니펫에 정의된 전역 변수와 동일합니다.

  • updateSigninStatus 함수는 사용자의 승인 상태 변경을 수신 대기하는 리스너입니다. 리스너로서의 역할은 1단계(
    GoogleAuth.isSignedIn.listen(updateSigninStatus);
    )의 코드 스니펫에서도 정의되었습니다.
  • 이 스니펫에서는 2개의 추가 전역 변수를 정의합니다.

    • isAuthorized는 사용자가 이미 로그인되어 있는지 여부를 나타내는 부울 변수입니다. 이 값은 앱이 로드될 때 설정되고 사용자가 앱에 로그인하거나 로그아웃할 때 업데이트될 수 있습니다.

      이 스니펫에서 sendAuthorizedApiRequest 함수는 변수 값을 확인하여 앱에서 승인이 필요한 API 요청을 시도해야 하는지 또는 사용자에게 앱을 승인하라는 메시지를 표시해야 하는지 판단합니다.

    • currentApiRequest는 사용자가 시도한 마지막 API 요청에 관한 세부정보를 저장하는 객체입니다. 앱에서 sendAuthorizedApiRequest 함수를 호출할 때 객체 값이 설정됩니다.

      사용자가 앱을 승인하면 요청이 즉시 실행됩니다. 그렇지 않으면 함수에서 사용자가 로그인하도록 리디렉션합니다. 사용자가 로그인한 후 updateSignInStatus 함수는 sendAuthorizedApiRequest를 호출하여 승인 흐름이 시작되기 전에 시도된 것과 동일한 요청을 전달합니다.

var isAuthorized;
var currentApiRequest;

/**
 * Store the request details. Then check to determine whether the user
 * has authorized the application.
 *   - If the user has granted access, make the API request.
 *   - If the user has not granted access, initiate the sign-in flow.
 */
function sendAuthorizedApiRequest(requestDetails) {
  currentApiRequest = requestDetails;
  if (isAuthorized) {
    // Make API request
    // gapi.client.request(requestDetails)

    // Reset currentApiRequest variable.
    currentApiRequest = {};
  } else {
    GoogleAuth.signIn();
  }
}

/**
 * Listener called when user completes auth flow. If the currentApiRequest
 * variable is set, then the user was prompted to authorize the application
 * before the request executed. In that case, proceed with that API request.
 */
function updateSigninStatus(isSignedIn) {
  if (isSignedIn) {
    isAuthorized = true;
    if (currentApiRequest) {
      sendAuthorizedApiRequest(currentApiRequest);
    }
  } else {
    isAuthorized = false;
  }
}

OAuth 2.0 엔드포인트

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

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

매개변수
client_id 필수

애플리케이션의 클라이언트 ID입니다. 이 값은 API ConsoleCredentials page에서 확인할 수 있습니다.

redirect_uri 필수

사용자가 승인 흐름을 완료한 후 API 서버가 사용자를 리디렉션하는 위치를 결정합니다. 이 값은 클라이언트의 API ConsoleCredentials page에 구성한 OAuth 2.0 클라이언트에 대해 승인된 리디렉션 URI 중 하나와 정확히 일치해야 합니다. 이 값이 제공된 client_id에 대해 승인된 리디렉션 URI와 일치하지 않으면 redirect_uri_mismatch 오류가 발생합니다.

http 또는 https 스킴, 대소문자, 후행 슬래시('/')는 모두 일치해야 합니다.

response_type 필수

자바스크립트 애플리케이션은 매개변수 값을 token로 설정해야 합니다. 이 값은 사용자가 승인 프로세스를 완료한 후 리디렉션되는 URI (#)의 프래그먼트 식별자에서 name=value 쌍으로 액세스 토큰을 반환하도록 Google 승인 서버에 지시합니다.

scope 필수

애플리케이션이 사용자를 대신하여 액세스할 수 있는 리소스를 식별하는 공백으로 구분된 범위 목록입니다. 이러한 값은 Google이 사용자에게 표시하는 동의 화면에 알립니다.

범위를 사용하면 애플리케이션이 필요한 리소스에 대한 액세스만 요청하는 동시에 사용자가 애플리케이션에 부여하는 액세스 양을 제어할 수 있습니다. 따라서 요청된 범위 수와 사용자 동의를 얻을 가능성 사이에는 반비례적인 관계가 있습니다.

가능한 경우 애플리케이션에서 상황에 따라 승인 범위에 대한 액세스를 요청하는 것이 좋습니다. 컨텍스트에서 사용자 데이터에 대한 액세스를 요청하면 증분 승인을 통해 사용자가 애플리케이션에 필요한 액세스 권한이 필요한 이유를 더 쉽게 이해할 수 있습니다.

state 권장됨

애플리케이션이 승인 요청과 승인 서버의 응답 간에 상태를 유지하는 데 사용하는 문자열 값을 지정합니다. 사용자가 애플리케이션의 액세스 요청에 동의하거나 거부하면 서버는 redirect_uri의 URL 프래그먼트 식별자 (#)에 name=value 쌍으로 전송하는 정확한 값을 반환합니다.

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

include_granted_scopes Optional

애플리케이션이 점진적 승인을 사용하여 컨텍스트에서 추가 범위에 대한 액세스를 요청할 수 있도록 합니다. 이 매개변수의 값을 true로 설정하고 승인 요청이 부여된 경우, 새로운 액세스 토큰에는 사용자가 이전에 애플리케이션 액세스 권한을 부여한 모든 범위도 포함됩니다. 예시는 증분 승인 섹션을 참고하세요.

login_hint Optional

애플리케이션이 인증하려는 사용자를 알고 있다면 이 매개변수를 사용하여 Google 인증 서버에 힌트를 제공할 수 있습니다. 서버는 힌트를 사용하여 로그인 양식의 이메일 필드를 미리 입력하거나 적절한 멀티 로그인 세션을 선택하여 로그인 흐름을 단순화합니다.

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

prompt Optional

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

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

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을 만든 후 사용자를 해당 페이지로 리디렉션합니다.

자바스크립트 샘플 코드

다음 자바스크립트 스니펫은 자바스크립트용 Google API 클라이언트 라이브러리를 사용하지 않고 자바스크립트에서 승인 과정을 시작하는 방법을 보여줍니다. 이 OAuth 2.0 엔드포인트는 교차 출처 리소스 공유 (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();
}

3단계: Google에서 사용자에게 동의를 요청합니다.

이 단계에서는 사용자가 애플리케이션에 요청된 액세스 권한을 부여할지 결정합니다. 이 단계에서 Google은 애플리케이션의 이름과 애플리케이션에서 사용자의 승인 사용자 인증 정보로 액세스할 권한을 요청하는 Google API 서비스와 부여할 액세스 범위의 요약을 보여주는 동의 창을 표시합니다. 그런 다음 사용자는 애플리케이션에서 요청한 하나 이상의 범위에 대한 액세스 권한을 부여하거나 요청을 거부할 수 있습니다.

이 단계에서는 액세스 권한이 부여되었는지 여부를 나타내는 Google OAuth 2.0 서버의 응답을 기다리는 동안 이 단계에서 아무 작업도 할 필요가 없습니다. 이 응답은 다음 단계에 설명되어 있습니다.

오류

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

admin_policy_enforced

Google Workspace 관리자의 정책으로 인해 Google 계정에서 하나 이상의 요청 범위를 승인할 수 없습니다. OAuth 클라이언트 ID에 명시적으로 액세스 권한이 부여될 때까지 관리자가 모든 범위 또는 민감한 범위 및 제한된 범위에 대한 액세스를 제한하는 방법에 대한 자세한 내용은 Google Workspace 관리자 도움말, Google Workspace 데이터에 액세스하는 타사 및 내부 앱 관리를 참고하세요.

disallowed_useragent

Google의 OAuth 2.0 정책에서 허용하지 않는 삽입된 사용자 에이전트 안에 승인 엔드포인트가 표시됩니다.

Android

Android 개발자가 android.webkit.WebView에서 승인 요청을 열 때 이 오류 메시지가 표시될 수 있습니다. 개발자는 Android용 Google 로그인이나 OpenID Foundation의 Android용 AppAuth와 같은 Android 라이브러리를 대신 사용해야 합니다.

Android 앱에서 삽입된 사용자 에이전트에서 일반 웹 링크를 열고 사용자가 사이트에서 Google의 OAuth 2.0 승인 엔드포인트로 이동하면 이 오류가 발생할 수 있습니다. 개발자는 Android App Links 핸들러 또는 기본 브라우저 앱이 포함된 운영체제의 기본 링크 핸들러에서 일반 링크를 열 수 있도록 허용해야 합니다. 지원되는 옵션인 Android Custom Tabs 라이브러리도 있습니다.

iOS

iOS 및 macOS 개발자의 경우 WKWebView에서 승인 요청을 열 때 이 오류가 발생할 수 있습니다. 개발자는 iOS용 Google 로그인 또는 OpenID Foundation의 iOS용 AppAuth와 같은 iOS 라이브러리를 사용해야 합니다.

iOS 또는 macOS 앱에서 삽입된 사용자 에이전트에서 일반 웹 링크를 열고 사용자가 사이트에서 Google의 OAuth 2.0 승인 엔드포인트로 이동하면 이 오류가 발생할 수 있습니다. 개발자는 범용 링크 핸들러 또는 기본 브라우저 앱이 모두 포함된 운영체제의 기본 링크 핸들러에서 일반 링크를 열도록 허용해야 합니다. SFSafariViewController 라이브러리도 지원되는 옵션입니다.

org_internal

요청의 OAuth 클라이언트 ID는 특정 Google Cloud 조직의 Google 계정에 대한 액세스를 제한하는 프로젝트의 일부입니다. 이 구성 옵션에 관한 자세한 내용은 OAuth 동의 화면 설정 도움말의 사용자 유형 섹션을 참고하세요.

origin_mismatch

승인 요청을 시작하는 자바스크립트의 스키마, 도메인 또는 포트가 OAuth 클라이언트 ID에 등록된 승인된 자바스크립트 원본 URI와 일치하지 않을 수 있습니다. Credentials page에서 Google API Console 승인된 자바스크립트 출처를 검토합니다.

redirect_uri_mismatch

승인 요청에서 전달된 redirect_uri이(가) OAuth 클라이언트 ID의 승인된 리디렉션 URI와 일치하지 않습니다. Google API Console Credentials page에서 승인된 리디렉션 URI를 검토합니다.

승인 요청을 시작하는 자바스크립트의 스키마, 도메인 또는 포트가 OAuth 클라이언트 ID에 등록된 승인된 자바스크립트 원본 URI와 일치하지 않을 수 있습니다. Google API Console Credentials page에서 승인된 자바스크립트 출처를 검토합니다.

4단계: OAuth 2.0 서버 응답 처리하기

JS 클라이언트 라이브러리

자바스크립트 클라이언트 라이브러리가 Google 승인 서버의 응답을 처리합니다. 리스너를 설정하여 현재 사용자의 로그인 상태의 변경사항을 모니터링하면 사용자가 애플리케이션에 필요한 액세스 권한을 부여할 때 해당 함수가 호출됩니다.

OAuth 2.0 엔드포인트

OAuth 2.0 서버는 액세스 토큰 요청에 지정된 redirect_uri로 응답을 보냅니다.

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

  • 액세스 토큰 응답:

    https://oauth2.example.com/callback#access_token=4/P7q7W91&token_type=Bearer&expires_in=3600

    access_token 매개변수 외에도 프래그먼트 문자열에는 항상 Bearer로 설정되는 token_type 매개변수와 토큰 수명을 초 단위로 지정하는 expires_in 매개변수가 포함됩니다. state 매개변수가 액세스 토큰 요청에 지정된 경우 이 값도 응답에 포함됩니다.

  • 오류 응답:
    https://oauth2.example.com/callback#error=access_denied

샘플 OAuth 2.0 서버 응답

다음 샘플 URL을 클릭하여 이 흐름을 테스트할 수 있습니다. 이 샘플 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 호출

JS 클라이언트 라이브러리

애플리케이션이 액세스 토큰을 가져온 후 자바스크립트 클라이언트 라이브러리를 사용하여 사용자 대신 API 요청을 할 수 있습니다. 클라이언트 라이브러리가 액세스 토큰을 관리하며, 요청에서 토큰을 전송하기 위해 특별한 작업을 하지 않아도 됩니다.

클라이언트 라이브러리는 API 메서드를 호출하는 두 가지 방법을 지원합니다. 검색 문서를 로드한 경우 API에서 메서드별 함수를 정의합니다. gapi.client.request 함수를 사용하여 API 메서드를 호출할 수도 있습니다. 다음 두 스니펫은 Drive API의 about.get 메서드에서 이 옵션을 보여줍니다.

// Example 1: Use method-specific function
var request = gapi.client.drive.about.get({'fields': 'user'});

// Execute the API request.
request.execute(function(response) {
  console.log(response);
});


// Example 2: Use gapi.client.request(args) function
var request = gapi.client.request({
  'method': 'GET',
  'path': '/drive/v3/about',
  'params': {'fields': 'user'}
});
// Execute the API request.
request.execute(function(response) {
  console.log(response);
});

OAuth 2.0 엔드포인트

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

OAuth 2.0 Playground에서 모든 Google API를 사용해 보고 범위를 확인할 수 있습니다.

HTTP GET의 예

Authorization: Bearer HTTP 헤더를 사용하는 drive.files 엔드포인트 (Drive Files API) 호출은 다음과 같습니다. 자체 액세스 토큰을 지정해야 합니다.

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 명령줄 애플리케이션을 사용하여 이러한 명령어를 테스트할 수 있습니다. 다음은 HTTP 헤더 옵션 (권장)을 사용하는 예입니다.

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

자바스크립트 샘플 코드

아래의 코드 스니펫은 CORS (교차 출처 리소스 공유)를 사용하여 Google API에 요청을 보내는 방법을 보여줍니다. 이 예에서는 자바스크립트용 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);

전체 예

JS 클라이언트 라이브러리

샘플 코드 데모

이 섹션에는 코드가 실제 앱에서 어떻게 동작하는지 보여주는 코드 샘플의 실제 데모가 포함되어 있습니다. 앱을 승인하면 Google 계정에 연결된 앱에 표시됩니다. 앱 이름은 Google API Docs용 OAuth 2.0 데모로 지정됩니다. 마찬가지로 액세스 권한을 취소하고 페이지를 새로고침하면 앱이 더 이상 표시되지 않습니다.

이 앱은 https://www.googleapis.com/auth/drive.metadata.readonly 범위에 대한 액세스를 요청합니다. 이 액세스는 자바스크립트 애플리케이션에서 OAuth 2.0 흐름을 시작하는 방법을 보여주기 위해서만 요청됩니다. 이 앱은 API 요청을 하지 않습니다.

자바스크립트 샘플 코드

위에 표시된 것처럼, 이 코드 샘플은 자바스크립트용 Google API 클라이언트 라이브러리를 로드하고 OAuth 2.0 흐름을 시작하는 페이지 (앱)용입니다. 페이지에 다음 중 하나가 표시됩니다.

  • 사용자가 앱에 로그인할 수 있는 버튼 1개. 사용자가 이전에 앱을 승인하지 않은 경우 앱에서 OAuth 2.0 흐름을 시작합니다.
  • 사용자가 앱에서 로그아웃하거나 이전에 앱에 부여된 액세스 권한을 취소할 수 있는 버튼 두 개가 있습니다. 앱에서 로그아웃하면 앱에 부여된 액세스 권한이 취소되지 않습니다. 앱이 사용자를 대신하여 다른 승인된 요청을 하기 전에 다시 로그인해야 하지만, 다음에 앱을 사용할 때는 다시 액세스 권한을 부여할 필요가 없습니다. 그러나 액세스를 취소하면 다시 액세스 권한을 부여해야 합니다.

Google 계정의 권한 페이지를 통해 앱 액세스 권한을 취소할 수도 있습니다. 앱이 Google API 문서의 OAuth 2.0 데모로 표시됩니다.

<script>
  var GoogleAuth;
  var SCOPE = 'https://www.googleapis.com/auth/drive.metadata.readonly';
  function handleClientLoad() {
    // Load the API's client and auth2 modules.
    // Call the initClient function after the modules load.
    gapi.load('client:auth2', initClient);
  }

  function initClient() {
    // In practice, your app can retrieve one or more discovery documents.
    var discoveryUrl = 'https://www.googleapis.com/discovery/v1/apis/drive/v3/rest';

    // Initialize the gapi.client object, which app uses to make API requests.
    // Get API key and client ID from API Console.
    // 'scope' field specifies space-delimited list of access scopes.
    gapi.client.init({
        'apiKey': 'YOUR_API_KEY',
        'clientId': 'YOUR_CLIENT_ID',
        'discoveryDocs': [discoveryUrl],
        'scope': SCOPE
    }).then(function () {
      GoogleAuth = gapi.auth2.getAuthInstance();

      // Listen for sign-in state changes.
      GoogleAuth.isSignedIn.listen(updateSigninStatus);

      // Handle initial sign-in state. (Determine if user is already signed in.)
      var user = GoogleAuth.currentUser.get();
      setSigninStatus();

      // Call handleAuthClick function when user clicks on
      //      "Sign In/Authorize" button.
      $('#sign-in-or-out-button').click(function() {
        handleAuthClick();
      });
      $('#revoke-access-button').click(function() {
        revokeAccess();
      });
    });
  }

  function handleAuthClick() {
    if (GoogleAuth.isSignedIn.get()) {
      // User is authorized and has clicked "Sign out" button.
      GoogleAuth.signOut();
    } else {
      // User is not signed in. Start Google auth flow.
      GoogleAuth.signIn();
    }
  }

  function revokeAccess() {
    GoogleAuth.disconnect();
  }

  function setSigninStatus() {
    var user = GoogleAuth.currentUser.get();
    var isAuthorized = user.hasGrantedScopes(SCOPE);
    if (isAuthorized) {
      $('#sign-in-or-out-button').html('Sign out');
      $('#revoke-access-button').css('display', 'inline-block');
      $('#auth-status').html('You are currently signed in and have granted ' +
          'access to this app.');
    } else {
      $('#sign-in-or-out-button').html('Sign In/Authorize');
      $('#revoke-access-button').css('display', 'none');
      $('#auth-status').html('You have not authorized this app or you are ' +
          'signed out.');
    }
  }

  function updateSigninStatus() {
    setSigninStatus();
  }
</script>

<button id="sign-in-or-out-button"
        style="margin-left: 25px">Sign In/Authorize</button>
<button id="revoke-access-button"
        style="display: none; margin-left: 25px">Revoke access</button>

<div id="auth-status" style="display: inline; padding-left: 25px"></div><hr>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script async defer src="https://apis.google.com/js/api.js"
        onload="this.onload=function(){};handleClientLoad()"
        onreadystatechange="if (this.readyState === 'complete') this.onload()">
</script>

OAuth 2.0 엔드포인트

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

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

  1. https://www.googleapis.com/auth/drive.metadata.readonly 범위에 대한 액세스를 요청하는 Google의 OAuth 2.0 서버로 사용자를 보냅니다.
  2. 하나 이상의 요청된 범위에 대한 액세스 권한을 부여 (또는 거부)한 후에 사용자는 원본 페이지로 리디렉션되고 프래그먼트 식별자 문자열에서 액세스 토큰을 파싱합니다.
  3. 이 페이지는 액세스 토큰을 사용하여 샘플 API 요청을 만듭니다.

    API 요청은 Drive API의 about.get 메서드를 호출하여 승인된 사용자의 Google Drive 계정에 대한 정보를 검색합니다.

  4. 요청이 성공적으로 실행되면 API 응답이 브라우저의 디버깅 콘솔에 로깅됩니다.

Google 계정의 권한 페이지를 통해 앱 액세스 권한을 취소할 수 있습니다. 앱이 Google API 문서의 OAuth 2.0 데모로 표시됩니다.

이 코드를 로컬에서 실행하려면 승인 사용자 인증 정보에 해당하는 YOUR_CLIENT_IDYOUR_REDIRECT_URI 변수의 값을 설정해야 합니다. YOUR_REDIRECT_URI 변수는 페이지가 제공되는 URL과 동일하게 설정되어야 합니다. 이 값은 API Console Credentials page에서 구성한 OAuth 2.0 클라이언트에 대해 승인된 리디렉션 URI 중 하나와 정확히 일치해야 합니다. 이 값이 승인된 URI와 일치하지 않으면 redirect_uri_mismatch 오류가 발생합니다. 프로젝트에서도 이 요청에 적절한 API를 사용 설정해야 합니다.

<html><head></head><body>
<script>
  var YOUR_CLIENT_ID = 'REPLACE_THIS_VALUE';
  var YOUR_REDIRECT_URI = 'REPLACE_THIS_VALUE';
  var fragmentString = location.hash.substring(1);

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

  // 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() {
    // 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': 'try_sample_request',
                  '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>

자바스크립트 원본 유효성 검사 규칙

Google은 개발자가 애플리케이션을 안전하게 유지할 수 있도록 다음 출처 규칙을 자바스크립트 출처에 적용합니다. 자바스크립트 원본은 이러한 규칙을 준수해야 합니다. 아래에 언급된 도메인, 호스트, 스키마의 정의는 RFC 3986 섹션 3을 참고하세요.

유효성 검사 규칙
스키마

자바스크립트 원본은 일반 HTTP가 아닌 HTTPS 스키마를 사용해야 합니다. 로컬 호스트 URI(localhost IP 주소 URI 포함)는 이 규칙에서 제외됩니다.

호스트

호스트는 원시 IP 주소일 수 없습니다. 로컬 호스트 IP 주소는 이 규칙에서 제외됩니다.

도메인
  • 호스트 TLD(최상위 도메인)는 공개 접미사 목록에 속해야 합니다.
  • 호스트 도메인은 “googleusercontent.com”일 수 없습니다.
  • 앱이 해당 도메인을 소유하지 않는 한 자바스크립트 출처에는 URL 단축 URL 도메인 (예: goo.gl)을 포함할 수 없습니다.
  • 사용자 정보

    자바스크립트 출처에는 userinfo 하위 구성요소를 포함할 수 없습니다.

    경로

    자바스크립트 출처에는 경로 구성요소를 포함할 수 없습니다.

    쿼리

    자바스크립트 출처에는 쿼리 구성요소를 포함할 수 없습니다.

    Fragment

    자바스크립트 원본에는 프래그먼트 구성요소를 포함할 수 없습니다.

    문자 자바스크립트 출처에는 다음과 같은 특정 문자를 포함할 수 없습니다.
    • 와일드 카드 문자('*')
    • 인쇄할 수 없는 ASCII 문자
    • 퍼센트 인코딩이 잘못되었습니다 (퍼센트 인코딩 뒤에 오는 퍼센트 기호 다음에 오는 퍼센트 인코딩 다음에 16진수 2자리가 지정됨).
    • null 문자 (인코딩된 NULL 문자, 예: %00, %C0%80)

    점진적 승인

    OAuth 2.0 프로토콜에서 앱은 리소스에 액세스할 수 있는 승인을 요청하며, 이는 범위별로 식별됩니다. 필요한 시점에 리소스에 대한 승인을 요청하는 것이 가장 좋은 사용자 환경 관행으로 간주됩니다. 이를 위해 Google 승인 서버는 증분 승인을 지원합니다. 이 기능을 사용하면 필요에 따라 범위를 요청할 수 있습니다. 사용자가 새 범위에 대한 권한을 부여하면 사용자가 프로젝트에 부여한 모든 범위가 포함된 토큰으로 교환될 수 있는 승인 코드가 반환됩니다.

    예를 들어 사용자가 음악 트랙을 샘플링하고 믹스를 만들 수 있는 앱은 로그인 시 필요한 리소스가 거의 없을 수 있습니다. 아마도 로그인하는 사람의 이름만 필요할 것입니다. 그러나 완료된 믹스를 저장하려면 Google Drive에 액세스해야 합니다. 대부분의 사람들은 앱에서 실제로 필요할 때 Google Drive에 대한 액세스 권한을 요청받는 경우에만 이를 자연스럽게 사용할 것입니다.

    이 경우 로그인 시 앱은 openidprofile 범위를 기본 로그인을 수행하도록 요청한 후 나중에 첫 번째 요청 시점에 https://www.googleapis.com/auth/drive.file 범위를 요청하여 믹스를 저장할 수 있습니다.

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

    • 토큰을 사용하여 새 통합 승인에 적용된 범위에 해당하는 리소스에 액세스할 수 있습니다.
    • 결합된 승인에 갱신 토큰을 사용하여 액세스 토큰을 획득하면 액세스 토큰은 결합된 승인을 나타내며 응답에 포함된 모든 scope 값에 사용할 수 있습니다.
    • 결합된 승인에는 다른 클라이언트에서 권한 요청이 요청되더라도 사용자가 API 프로젝트에 부여한 모든 범위가 포함됩니다. 예를 들어 사용자가 애플리케이션의 데스크톱 클라이언트를 사용하여 한 범위에 대한 액세스 권한을 부여한 다음 모바일 클라이언트를 통해 동일한 애플리케이션에 다른 범위를 부여한 경우 결합된 승인에는 두 범위가 모두 포함됩니다.
    • 결합된 승인을 나타내는 토큰을 취소하면 연결된 사용자를 대신하여 해당 승인의 모든 범위에 대한 액세스가 동시에 취소됩니다.

    아래 코드 샘플은 기존 액세스 토큰에 범위를 추가하는 방법을 보여줍니다. 이 접근 방식을 사용하면 앱에서 여러 액세스 토큰을 관리할 필요가 없습니다.

    JS 클라이언트 라이브러리

    기존 액세스 토큰에 범위를 추가하려면 GoogleUser.grant(options) 메서드를 호출합니다. options 객체는 액세스 권한을 부여할 추가 범위를 식별합니다.

    // Space-separated list of additional scope(s) you are requesting access to.
    // This code adds read-only access to the user's calendars via the Calendar API.
    var NEW_SCOPES = 'https://www.googleapis.com/auth/calendar.readonly';
    
    // Retrieve the GoogleUser object for the current user.
    var GoogleUser = GoogleAuth.currentUser.get();
    GoogleUser.grant({'scope': NEW_SCOPES});

    OAuth 2.0 엔드포인트

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

    다음 코드 스니펫은 그 방법을 보여줍니다. 이 스니펫은 사용자가 브라우저의 로컬 저장소에 유효한 액세스 토큰을 저장했다고 가정합니다. 전체 예시 코드는 브라우저의 로컬 저장소에 oauth2-test-params.scope 속성을 설정하여 액세스 토큰이 유효한 범위 목록을 저장합니다.

    스니펫은 액세스 토큰이 유효한 범위를 특정 쿼리에 사용하려는 범위와 비교합니다. 액세스 토큰이 해당 범위를 벗어날 경우 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 요청이 삭제 프로세스의 일부에 포함될 수 있습니다.

    JS 클라이언트 라이브러리

    토큰을 프로그래매틱 방식으로 취소하려면 GoogleAuth.disconnect()를 호출합니다.

    GoogleAuth.disconnect();

    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와 오류 코드가 반환됩니다.

    다음 자바스크립트 스니펫은 자바스크립트용 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();
    }