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

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

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

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

전제 조건

프로젝트에 API 활성화

구글 API를 호출하는 응용 프로그램은에서와 API를 활성화 할 필요가 API Console.

프로젝트에 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가 목록에 표시되지 않으면 사용 검색을 찾거나이 속한 제품군에서 모두보기를 클릭합니다.
  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. 양식을 작성하십시오. 자바 스크립트를 사용하는 응용 프로그램은 구글 API 요청이 권한을 지정해야합니다 자바 스크립트 기원 공인 확인합니다. 출처는 애플리케이션이 OAuth 2.0 서버에 요청을 보낼 수 있는 도메인을 식별합니다. 이러한 기원을 준수해야합니다 구글의 유효성 검사 규칙 .

액세스 범위 식별

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

OAuth 2.0 인증 구현을 시작하기 전에 앱에 액세스 권한이 필요한 범위를 식별하는 것이 좋습니다.

의 OAuth 2.0 API 스코프의 문서는 액세스 구글의 API에 사용할 수있는 범위의 전체 목록이 포함되어 있습니다.

OAuth 2.0 액세스 토큰 얻기

다음 단계는 애플리케이션이 Google의 OAuth 2.0 서버와 상호작용하여 사용자를 대신하여 API 요청을 수행하기 위해 사용자의 동의를 얻는 방법을 보여줍니다. 애플리케이션에서 사용자 승인이 필요한 Google API 요청을 실행하려면 먼저 해당 동의가 있어야 합니다.

1단계: 클라이언트 개체 구성

당신이 사용하는 경우 자바 스크립트 용 Google API 클라이언트 라이브러리를 의 OAuth 2.0 흐름을 처리하기 위해, 첫 번째 단계는 구성하는 것입니다 gapi.auth2gapi.client 객체. 이러한 개체를 사용하면 응용 프로그램에서 사용자 권한을 얻고 승인된 API 요청을 할 수 있습니다.

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

JS 클라이언트 라이브러리

JavaScript 클라이언트 라이브러리는 인증 프로세스의 다양한 측면을 단순화합니다.

  1. Google의 인증 서버에 대한 리디렉션 URL을 생성하고 사용자를 해당 URL로 안내하는 방법을 제공합니다.
  2. 해당 서버에서 애플리케이션으로 다시 리디렉션을 처리합니다.
  3. 인증 서버에서 반환한 액세스 토큰의 유효성을 검사합니다.
  4. 권한 부여 서버가 애플리케이션에 보내는 액세스 토큰을 저장하고 이후에 앱이 승인된 API를 호출할 때 이를 검색합니다.

아래의 코드 조각은에서 발췌 한 것입니다 완벽한 예를 들어 이 문서의 뒷부분 표시. 이 코드는 초기화 gapi.client 응용 프로그램이 나중에 API 호출을 할 때 사용하는 개체를. 그 객체가 생성 될 때, gapi.auth2 응용 프로그램을 확인하고 사용자의 권한 부여 상태를 모니터링하기 위해 사용하는 객체는,도 초기화됩니다.

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

  • apiKeyclientId 값은 응용 프로그램의 인증 자격 증명을 지정합니다. 에서 설명한 바와 같이 생성 권한 증명서 부,이 값이 얻어 질 수 API Console. 점을 유의 clientId 응용 프로그램이 인증 된 API 요청을 만드는 경우 필요합니다. 승인되지 않은 요청만 하는 애플리케이션은 API 키만 지정할 수 있습니다.
  • scope 필드는 공백으로 구분 된 목록을 지정 액세스 스코프 응용 프로그램이 사용자를 대신 액세스 할 수있는 자원이 대응합니다. 이 값은 Google이 사용자에게 표시하는 동의 화면을 알려줍니다.

    가능하면 애플리케이션이 컨텍스트에서 권한 부여 범위에 대한 액세스를 요청하는 것이 좋습니다. 를 통해 상황에서 사용자 데이터에 대한 액세스를 요청하여 증분 인증 , 당신은 당신의 응용 프로그램이 요청하는 액세스해야하는 이유를보다 쉽게에 사용자가 이해하는 데 도움이.

  • discoveryDocs 필드를 식별 목록 API 검색 문서 응용 프로그램 사용. Discovery 문서는 리소스 스키마를 포함하여 API의 표면을 설명하고 JavaScript 클라이언트 라이브러리는 해당 정보를 사용하여 애플리케이션에서 사용할 수 있는 메서드를 생성합니다. 이 예에서 코드는 Google Drive API 버전 3에 대한 검색 문서를 검색합니다.

애프터 gapi.client.init 호출이 완료 코드는 설정 GoogleAuth 구글 인증 개체를 식별하는 변수를. 마지막으로 코드는 사용자의 로그인 상태가 변경될 때 함수를 호출하는 리스너를 설정합니다. (해당 기능은 스니펫에 정의되어 있지 않습니다.)

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() 구글의 인증 서버로 사용자를하는 방법.

GoogleAuth.signIn();

실제로, 당신의 응용 프로그램이 호출할지 여부를 결정하는 부울 값을 설정할 수 있습니다 signIn() API 호출을하기 전에 방법을.

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

  • GoogleAuth 코드에서 참조 목적은 상기 코드에서 정의 된 글로벌 변수와 동일 단계 1 .

  • updateSigninStatus 기능은 사용자의 권한 부여 상태에 대한 변경 사항을 수신하는 수신기이다. : 리스너의 역할은 1 단계에서 코드에 정의
    GoogleAuth.isSignedIn.listen(updateSigninStatus);
  • 스니펫은 두 개의 추가 전역 변수를 정의합니다.

    • 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 엔드포인트

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

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

매개변수
client_id 필수의

애플리케이션의 클라이언트 ID입니다. 당신은이 값 찾을 수 있습니다 API ConsoleCredentials page.

redirect_uri 필수의

사용자가 권한 부여 흐름을 완료한 후 API 서버가 사용자를 리디렉션하는 위치를 결정합니다. 값은 정확하게 고객의에 구성하여 OAuth 2.0 클라이언트에 대한 인증 된 리디렉션 된 URI 중 하나와 일치해야합니다 API ConsoleCredentials page. 이 값은 제공을 위해 승인 된 리디렉션 URI와 일치하지 않는 경우 client_id 당신은 얻을 것이다 redirect_uri_mismatch 오류입니다.

참고 그 http 또는 https 방식의 경우, 후행 슬래시 ( ' / ') 모두 일치해야합니다.

response_type 필수의

자바 스크립트 응용 프로그램에 매개 변수의 값을 설정해야 token . 이 값은 같은 액세스 토큰 반환 구글 인증 서버에 지시 name=value URI를 (단편의 식별자 쌍 # 사용자 인증 절차를 완료 한 후 리디렉션되는 참조).

scope 필수의

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

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

가능하면 애플리케이션이 컨텍스트에서 권한 부여 범위에 대한 액세스를 요청하는 것이 좋습니다. 를 통해 상황에서 사용자 데이터에 대한 액세스를 요청하여 증분 인증 , 당신은 당신의 응용 프로그램이 요청하는 액세스해야하는 이유를보다 쉽게에 사용자가 이해하는 데 도움이.

state 추천

애플리케이션이 권한 부여 요청과 권한 부여 서버의 응답 사이의 상태를 유지하기 위해 사용하는 문자열 값을 지정합니다. 서버는 당신이로 보내 정확한 값 반환 name=value 의 URL 조각 식별자 쌍 ( # 의) redirect_uri 에 사용자의 동의 후 또는 응용 프로그램의 액세스 요청을 거부합니다.

이 매개변수는 사용자를 애플리케이션의 올바른 리소스로 안내하고, nonce를 전송하고, 사이트 간 요청 위조를 완화하는 것과 같은 여러 목적으로 사용할 수 있습니다. 하여 이후 redirect_uri 추측 할 수있다하는 사용 state 값은 인입 접속 인증 요청의 결과인지하여 확신을 높일 수있다. 임의의 문자열을 생성하거나 쿠키의 해시 또는 클라이언트의 상태를 캡처하는 다른 값을 인코딩하는 경우 응답을 검증하여 요청과 응답이 동일한 브라우저에서 시작되었는지 추가로 확인하여 교차 사이트와 같은 공격으로부터 보호할 수 있습니다. 위조요청. 참고 항목 오픈 ID 연결 작성하고 확인하는 방법의 예를 들어 문서를 state 토큰을.

include_granted_scopes 선택 과목

애플리케이션이 컨텍스트에서 추가 범위에 대한 액세스를 요청하기 위해 증분 권한 부여를 사용할 수 있습니다. 당신이이 매개 변수의 값을 설정하면 true 및 승인 요청이 승인, 새로운 액세스 토큰은 사용자가 이전 응용 프로그램 액세스 권한이 부여되는 모든 범위를 커버합니다. 참고 항목 증가 인증 예제 섹션을 참조하십시오.

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 2.0 엔드포인트는 CORS(Cross-Origin Resource Sharing)를 지원하지 않으므로 스니펫은 해당 엔드포인트에 대한 요청을 여는 양식을 생성합니다.

/*
 * 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 계정은 Google Workspace 관리자의 정책으로 인해 요청된 하나 이상의 범위를 승인할 수 없습니다. 구글 작업 공간 관리자 도움말을 참조하십시오 타사 및 내부 애플리케이션은 구글 작업 공간 데이터에 액세스 제어 액세스가 명시 적으로 OAuth 클라이언트 ID에 부여 될 때까지 관리자가 모든 범위 또는 민감하고 제한된 범위에 대한 액세스를 제한 할 수있는 방법에 대한 자세한 정보를.

disallowed_useragent

권한 부여 엔드 포인트는 구글에 의해 허용되지 임베디드 사용자 에이전트 내부에 표시됩니다 의 OAuth 2.0 정책 .

기계적 인조 인간

에 승인 요청을 열 때 안드로이드 개발자는이 오류 메시지가 발생할 수 있습니다android.webkit.WebView . 개발자는 대신 같은 안드로이드 라이브러리를 사용한다 구글 안드로이드에 대한 로그인 또는 오픈 ID 재단의 안드로이드에 대한 AppAuth을 .

웹 개발자는 Android 앱이 포함된 사용자 에이전트에서 일반 웹 링크를 열고 사용자가 사이트에서 Google의 OAuth 2.0 인증 끝점으로 이동할 때 이 오류가 발생할 수 있습니다. 개발자는 일반적으로 링크가 모두 포함하는 운영 체제의 기본 링크 처리기에서 열 수 있어야 안드로이드 앱 링크 핸들러 또는 기본 브라우저 응용 프로그램을. 안드로이드 사용자 정의 탭의 라이브러리는 지원되는 옵션입니다.

iOS

에 승인 요청을 열 때 iOS 및 맥 OS 개발자는이 오류가 발생할 수 있습니다WKWebView . 개발자는 대신 같은 아이폰 OS 라이브러리를 사용한다 구글 iOS 용 로그인 또는 오픈 ID 재단의 iOS 용 AppAuth .

iOS 또는 macOS 앱이 포함된 사용자 에이전트에서 일반 웹 링크를 열고 사용자가 사이트에서 Google의 OAuth 2.0 인증 엔드포인트로 이동할 때 웹 개발자에게 이 오류가 발생할 수 있습니다. 개발자는 일반적으로 링크가 모두 포함하는 운영 체제의 기본 링크 처리기에서 열 수 있도록해야 유니버설 링크 핸들러 또는 기본 브라우저 응용 프로그램을.SFSafariViewController 라이브러리는 지원되는 옵션입니다.

org_internal

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

origin_mismatch

인증 요청을 시작한 JavaScript의 스키마, 도메인 및/또는 포트가 OAuth 클라이언트 ID에 대해 등록된 인증된 JavaScript 원본 URI와 일치하지 않을 수 있습니다. 검토는 자바 스크립트 기원 공인 Google API ConsoleCredentials page.

redirect_uri_mismatch

redirect_uri 승인 요청 전달은 OAuth 클라이언트 ID에 대한 권한이 부여 된 리디렉션 URI와 일치하지 않습니다. 평가는 현재의 리디렉션 URI를 허가 Google API Console Credentials page.

인증 요청을 시작한 JavaScript의 스키마, 도메인 및/또는 포트가 OAuth 클라이언트 ID에 대해 등록된 인증된 JavaScript 원본 URI와 일치하지 않을 수 있습니다. 검토는 자바 스크립트 기원 공인 Google API Console Credentials page.

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

JS 클라이언트 라이브러리

JavaScript 클라이언트 라이브러리는 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 파라미터 단편 문자열도 포함 token_type 항상 설정되는 파라미터 Bearerexpires_in 초 토큰의 수명을 지정하는 파라미터. 경우] state 파라미터는 토큰 요청 액세스에 지정하고, 그 값은 상기 응답에 포함된다.

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

샘플 OAuth 2.0 서버 응답

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

의 OAuth 2.0 흐름을 완료 한 후, 당신은으로 리디렉션됩니다 http://localhost/oauth2callback . 그 URL은 얻을 것입니다 404 NOT FOUND 로컬 컴퓨터가 해당 주소로 파일을 제공하기 위해 발생하지 않는 오류가 발생했습니다. 다음 단계에서는 사용자가 애플리케이션으로 다시 리디렉션될 때 URI에 반환되는 정보에 대한 자세한 정보를 제공합니다.

Google API 호출

JS 클라이언트 라이브러리

애플리케이션이 액세스 토큰을 얻은 후 JavaScript 클라이언트 라이브러리를 사용하여 사용자를 대신하여 API 요청을 수행할 수 있습니다. 클라이언트 라이브러리는 액세스 토큰을 관리하며 요청에서 보내기 위해 특별한 작업을 수행할 필요가 없습니다.

클라이언트 라이브러리는 API 메서드를 호출하는 두 가지 방법을 지원합니다. 검색 문서를 로드한 경우 API가 메서드별 기능을 정의합니다. 당신은 또한 사용할 수 있습니다 gapi.client.request 하는 API 메소드를 호출하는 기능. 다음 두 조각은 드라이브 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를 호출할 수 있습니다. 이렇게하려면 중 하나를 포함하여 API에 요청에 액세스 토큰이 포함 access_token 쿼리 매개 변수 또는 Authorization HTTP 헤더 Bearer 값입니다. 쿼리 문자열은 서버 로그에 표시되는 경향이 있기 때문에 가능하면 HTTP 헤더를 사용하는 것이 좋습니다. 대부분의 경우 구글 API에 통화를 설정하는 클라이언트 라이브러리를 사용할 수 있습니다 (예를 들어, 드라이브 파일 API를 호출 ).

당신은 모든 구글 API를 시도하고 그들의 범위를 볼 수 OAuth는 2.0 놀이터 .

HTTP GET 예제

받는 호출 drive.files 엔드 포인트 (드라이브 파일 API)를 사용하여 Authorization: Bearer HTTP 헤더는 다음과 같이 보일 수 있습니다. 고유한 액세스 토큰을 지정해야 합니다.

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

여기에 사용하여 인증 된 사용자에 대해 동일한 API를 호출입니다 access_token 쿼리 문자열 매개 변수 :

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(Cross-origin 리소스 공유)를 사용하여 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);

완전한 예

JS 클라이언트 라이브러리

샘플 코드 데모

이 섹션에는 실제 앱에서 코드가 어떻게 작동하는지 보여주기 위해 뒤따르는 코드 샘플의 작업 데모가 포함되어 있습니다. 앱을 승인 후에는 사이에 표시됩니다 Google 계정에 연결된 응용 프로그램 . 이 앱은 구글 API 문서에의 OAuth 2.0 데모 지정됩니다. 마찬가지로 액세스 권한을 취소하고 해당 페이지를 새로 고치면 해당 앱은 더 이상 나열되지 않습니다.

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

자바스크립트 샘플 코드

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

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

당신은 또한을 통해 응용 프로그램에 액세스 취소 할 수 있습니다 권한 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 엔드포인트

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

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

  1. 그것은 액세스 요청 구글의 OAuth 2.0 서버에 대한 사용자 지시 https://www.googleapis.com/auth/drive.metadata.readonly 범위를.
  2. 하나 이상의 요청된 범위에 대한 액세스 권한을 부여(또는 거부)한 후 사용자는 원본 페이지로 리디렉션되며 조각 식별자 문자열에서 액세스 토큰을 구문 분석합니다.
  3. 페이지는 액세스 토큰을 사용하여 샘플 API 요청을 수행합니다.

    이 API 요청은 드라이브 API의 호출 about.get 허가 된 사용자의 Google 드라이브 계정에 대한 정보를 검색하는 방법을.

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

당신은을 통해 응용 프로그램에 액세스 취소 할 수 있습니다 권한 Google 계정 페이지를. 이 앱은 구글 API 문서에의 OAuth 2.0 데모로 표시됩니다.

로컬이 코드를 실행하려면, 당신은에 대한 설정 값에 필요 YOUR_CLIENT_IDYOUR_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';
  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>

JavaScript 원본 유효성 검사 규칙

Google은 개발자가 애플리케이션을 안전하게 보호할 수 있도록 JavaScript 원본에 다음 유효성 검사 규칙을 적용합니다. JavaScript 출처는 이러한 규칙을 준수해야 합니다. 참조 RFC 3986 제 3 절 아래에 언급 된 도메인, 호스트 및 계획의 정의합니다.

검증 규칙
계획

JavaScript 출처는 일반 HTTP가 아닌 HTTPS 체계를 사용해야 합니다. Localhost URI(localhost IP 주소 URI 포함)는 이 규칙에서 제외됩니다.

주인

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

도메인
  • 호스트 TLD를 ( 최상위 도메인은 )에 속해 있어야 공공 접미사 목록 .
  • 호스트 도메인은 할 수 없다 “googleusercontent.com” .
  • 자바 스크립트 기원 (예 : URL 축약 서비스 도메인을 포함 할 수 없습니다 goo.gl 앱이 도메인을 소유하지 않은 경우).
  • 사용자 정보

    JavaScript 원본은 userinfo 하위 구성 요소를 포함할 수 없습니다.

    JavaScript 원본은 경로 구성 요소를 포함할 수 없습니다.

    질문

    JavaScript 원본에는 쿼리 구성 요소가 포함될 수 없습니다.

    파편

    JavaScript 원본은 조각 구성 요소를 포함할 수 없습니다.

    캐릭터 JavaScript 출처는 다음을 포함한 특정 문자를 포함할 수 없습니다.
    • 와일드 카드 문자 ( '*' )
    • 인쇄할 수 없는 ASCII 문자
    • 잘못된 퍼센트 인코딩(퍼센트 기호 뒤에 2개의 16진수가 오는 URL 인코딩 형식을 따르지 않는 모든 퍼센트 인코딩)
    • 널 문자 (인코딩 NULL 문자, 예를 들면, %00 , %C0%80 )

    증분 승인

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

    예를 들어 사람들이 음악 트랙을 샘플링하고 믹스를 만들 수 있도록 하는 앱은 로그인할 때 리소스가 거의 필요하지 않을 수 있으며 로그인하는 사람의 이름만 필요할 수 있습니다. 그러나 완성된 믹스를 저장하려면 Google 드라이브에 액세스해야 합니다. . 대부분의 사람들은 앱이 실제로 필요할 때 자신의 Google 드라이브에 대한 액세스 권한을 요청받았을 때만 그것이 당연하다고 생각할 것입니다.

    이 경우에 시간 로그인에 앱이 요청할 수 있습니다 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 엔드포인트

    기존의 액세스 토큰에 범위를 추가하려면 포함 include_granted_scopes 당신의 매개 변수 구글의 OAuth 2.0 서버로 요청을 .

    다음 코드 스니펫은 그 방법을 보여줍니다. 스니펫은 액세스 토큰이 유효한 범위를 브라우저의 로컬 저장소에 저장했다고 가정합니다. 합니다 ( 전체 예제 코드 저장을 액세스 토큰이 설정하여 유효있는 범위 목록 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}

    The token can be an access token or a refresh token. If the token is an access token and it has a corresponding refresh token, the refresh token will also be revoked.

    If the revocation is successfully processed, then the HTTP status code of the response is 200 . For error conditions, an HTTP status code 400 is returned along with an error code.

    The following JavaScript snippet shows how to revoke a token in JavaScript without using the Google APIs Client Library for JavaScript. Since the Google's OAuth 2.0 endpoint for revoking tokens does not support Cross-origin Resource Sharing (CORS), the code creates a form and submits the form to the endpoint rather than using the XMLHttpRequest() method to post the request.

    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();
    }