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

코드 모델 사용

Google ID 서비스 라이브러리를 사용하면 사용자가 승인을 요청할 수 있습니다. 브라우저 기반 팝업 또는 리디렉션 UX 흐름을 사용하여 Google에서 코드를 작성합니다 이 안전한 OAuth 2.0 흐름을 시작하고 사용자를 대신하여 Google API에 액세스할 수 있습니다

OAuth 2.0 승인 코드 흐름 요약:

브라우저에서 버튼 클릭과 같은 동작을 통해 Google 계정 소유자가 Google에 승인 코드를 요청합니다.
Google이 응답하여 JavaScript 웹 앱이 사용자의 브라우저에서 실행되거나, 승인 코드 엔드포인트를 사용할 수 있습니다.
백엔드 플랫폼은 승인 코드 엔드포인트를 호스팅하고 있습니다. 유효성 검사 후 이 코드는 사용자별 액세스로 교환되며 토큰을 새로고침할 수 있습니다.
Google에서 승인 코드를 검증하고 요청이 시작되었는지 확인 액세스 및 갱신 토큰을 발급하고, 토큰을 얻습니다.
로그인 엔드포인트가 액세스 및 갱신 토큰을 수신하여 안전하게 저장합니다. 나중에 사용할 수 있습니다

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

코드 클라이언트 초기화

google.accounts.oauth2.initCodeClient() 메서드는 코드 클라이언트를 초기화합니다.

팝업 또는 리디렉션 모드

Redirect 또는 팝업 모드 사용자 플로우 리디렉션 모드를 사용하면 OAuth2 승인을 호스팅합니다. Google이 사용자 에이전트를 이 엔드포인트로 리디렉션합니다. 인증 코드를 URL 매개변수로 공유합니다. 팝업 모드의 경우 콜백 핸들러가 필요합니다. 팝업 모드 방문자가 웹사이트를 방문하지 않고도 원활한 사용자 환경을 제공하는 데 사용할 수 있습니다. 사이트를 떠날 수 있습니다.

다음에 대해 클라이언트를 초기화하는 방법은 다음과 같습니다.

UX 흐름을 리디렉션하고 ux_mode를 redirect로 설정 redirect_uri를 플랫폼의 승인 코드 엔드포인트에 연결합니다. 값은 OAuth 2.0에 대해 승인된 리디렉션 URI 중 하나와 정확히 일치해야 합니다. API 콘솔에서 구성한 클라이언트입니다. 또한 다음을 준수해야 합니다. 리디렉션 URI 유효성 검사 규칙.
팝업 UX 흐름에서 ux_mode를 popup로, callback 값을 에 승인 코드를 보내는 데 사용할 함수의 이름 있습니다.

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

CSRF 공격 방지

Cross-Site-Request-Forgery (CSRF) 공격을 방지하기 위해 리디렉션 및 팝업 모드 UX 흐름에 사용됩니다. 리디렉션용 OAuth 2.0 state 매개변수가 사용됩니다. RFC6749 섹션 10.12 참조 교차 사이트 요청 위조 state 매개변수를 생성하고 검증하는 방법을 자세히 알아보세요. 팝업 모드를 사용하면 요청에 맞춤 HTTP 헤더를 추가한 다음 서버에서 예상값 및 출처와 일치합니다.

인증 코드 및 CSRF 처리를 보여주는 코드 스니펫을 보려면 UX 모드를 선택하세요.

리디렉션 모드

Google이 사용자의 브라우저를 인증 엔드포인트로 인증 코드를 URL 매개변수로 공유

const client = google.accounts.oauth2.initCodeClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'redirect',
  redirect_uri: "https://your.domain/code_callback_endpoint",
  state: "YOUR_BINDING_VALUE"
});

사용자의 브라우저가 인증 코드를 수신하는 클라이언트 초기화 사용자의 서버로 전송합니다.

const client = google.accounts.oauth2.initCodeClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'popup',
  callback: (response) => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', code_receiver_uri, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    // Set custom header for CRSF
    xhr.setRequestHeader('X-Requested-With', 'XmlHttpRequest');
    xhr.onload = function() {
      console.log('Auth code response: ' + xhr.responseText);
    };
    xhr.send('code=' + response.code);
  },
});

OAuth 2.0 코드 흐름 트리거

코드 클라이언트의 requestCode() 메서드를 호출하여 사용자 흐름을 트리거합니다.

<button onclick="client.requestCode();">Authorize with Google</button>

사용자가 Google 계정에 로그인하고 공유에 동의해야 합니다. 승인 코드를 받기 전에 개별 범위를 리디렉션 엔드포인트 또는 콜백 핸들러에 전달됩니다.

인증 코드 처리

Google은 Google에서 전송한 사용자별 승인 코드를 받아서 확인할 수 있습니다

팝업 모드의 경우 callback로 지정된 핸들러는 사용자의 브라우저가 승인 코드를 플랫폼에서 호스팅하는 엔드포인트로 전달합니다.

리디렉션 모드의 경우 GET 요청이 지정된 엔드포인트로 전송됩니다. redirect_url: URL code 매개변수의 승인 코드를 공유합니다. 받는사람 다음과 같이 승인 코드를 받습니다.

기존 승인 엔드포인트가 없는 경우 새 승인 엔드포인트를 만듭니다. 구현 또는
GET 요청 및 URL을 수락하도록 기존 엔드포인트를 업데이트합니다. 매개변수입니다. 이전에는 PUT 요청이 사용하여 페이로드가 사용되었습니다

승인 엔드포인트

승인 코드 엔드포인트는 다음 URL 쿼리로 GET 요청을 처리해야 합니다. 문자열 매개변수:

이름	값
인증 사용자	사용자 로그인 인증 요청
코드	Google에서 생성한 OAuth2 승인 코드
HD	사용자 계정의 호스트 도메인
프롬프트	사용자 동의 대화상자
범위	승인할 하나 이상의 OAuth2 범위가 공백으로 구분된 목록
주	CRSF 상태 변수

auth-code라는 엔드포인트에 대한 URL 매개변수가 포함된 GET 요청의 예 example.com에서 호스팅:

Request URL: https://www.example.com/auth-code?state=42a7bd822fe32cc56&code=4/0AX4XfWiAvnXLqxlckFUVao8j0zvZUJ06AMgr-n0vSPotHWcn9p-zHCjqwr47KHS_vDvu8w&scope=email%20profile%20https://www.googleapis.com/auth/calendar.readonly%20https://www.googleapis.com/auth/photoslibrary.readonly%20https://www.googleapis.com/auth/contacts.readonly%20openid%20https://www.googleapis.com/auth/userinfo.email%20https://www.googleapis.com/auth/userinfo.profile&authuser=0&hd=example.com&prompt=consent

승인 코드 흐름이 이전 JavaScript 라이브러리에 의해 시작되면 또는 Google OAuth 2.0 엔드포인트를 직접 호출하는 경우 POST 요청이 사용됩니다.

승인 코드가 페이로드로 포함된 POST 요청의 예 HTTP 요청 본문:

Request URL: https://www.example.com/auth-code
Request Payload: 4/0AX4XfWhll-BMV82wi4YwbrSaTPaRpUGpKqJ4zBxQldU\_70cnIdh-GJOBZlyHU3MNcz4qaw

요청 유효성 확인

CSRF 공격을 방지하려면 서버에서 다음을 실행하세요.

리디렉션 모드에 대해 state 매개변수 값을 확인합니다.

팝업 모드에 X-Requested-With: XmlHttpRequest 헤더가 설정되어 있는지 확인합니다.

그런 다음 Google에서 갱신 및 액세스 토큰을 받습니다. 먼저 인증 코드 요청을 성공적으로 확인한 경우에만

액세스 및 갱신 토큰 받기

백엔드 플랫폼이 Google로부터 승인 코드를 수신하고 인증 코드를 사용하여 Google이 API를 호출해야 합니다

다음 단계를 따릅니다. 5단계: 승인 코드를 웹서버에 OAuth 2.0 사용의 애플리케이션 가이드를 참조하세요.

토큰 관리

플랫폼이 갱신 토큰을 안전하게 저장합니다. 다음 경우에 저장된 갱신 토큰 삭제 사용자 계정이 제거되거나 사용자 동의가 google.accounts.oauth2.revoke 또는 https://myaccount.google.com/permissions.

원하는 경우 RISC를 사용하여 교차 계정을 사용하여 사용자 계정을 보호할 수 있습니다. 보호.

일반적으로 백엔드 플랫폼은 액세스 토큰을 사용하여 Google API를 호출합니다. 만약 웹 앱이 사용자의 브라우저에서 직접 Google API를 호출합니다. 웹 애플리케이션과 액세스 토큰을 공유하는 방법을 구현해야 합니다. 따라서 이 가이드의 범위를 벗어납니다. 이 접근 방식을 따르고 JavaScript용 Google API 클라이언트 라이브러리 gapi.client.SetToken()를 사용하여 브라우저에 액세스 토큰을 임시로 저장합니다. 라이브러리가 Google API를 호출하도록 사용 설정합니다.