이 문서에서는 OAuth 2.0 인증을 구현하여 액세스하는 방법을 설명합니다. JavaScript 웹 애플리케이션에서 YouTube Analytics API 또는 YouTube Reporting API OAuth 2.0을 사용하면 사용자 이름, 비밀번호 및 기타 사용자 이름과 비밀번호를 그대로 유지하면서 정보를 비공개로 유지합니다. 예를 들어 애플리케이션에서 OAuth 2.0을 사용하여 권한을 얻을 수 있습니다. 채널의 YouTube 분석 데이터를 검색합니다.
이 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.
- 보관함 페이지에서 YouTube Analytics API와 YouTube Reporting API를 찾아 사용 설정합니다. YouTube 분석 데이터를 검색하는 여러 애플리케이션은 YouTube Data API와도 연결됩니다. 애플리케이션에서 사용할 다른 API를 찾아 사용 설정합니다.
승인 사용자 인증 정보 만들기
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 승인을 구현하기 전에 해당 범위를 식별하는 것이 좋습니다. 앱에 액세스 권한이 있어야 합니다
YouTube Analytics API는 다음 범위를 사용합니다.
범위 | |
---|---|
https://www.googleapis.com/auth/youtube | YouTube 계정 관리 |
https://www.googleapis.com/auth/youtube.readonly | YouTube 계정보기 |
https://www.googleapis.com/auth/youtubepartner | YouTube에서 저작물 및 관련 콘텐츠를보고 관리합니다. |
https://www.googleapis.com/auth/yt-analytics-monetary.readonly | YouTube 콘텐츠에 대한 금전적 및 비 금전적 YouTube 분석 보고서보기 |
https://www.googleapis.com/auth/yt-analytics.readonly | YouTube 콘텐츠에 대한 YouTube 분석 보고서보기 |
YouTube Reporting API는 다음 범위를 사용합니다.
범위 | |
---|---|
https://www.googleapis.com/auth/yt-analytics-monetary.readonly | YouTube 콘텐츠에 대한 금전적 및 비 금전적 YouTube 분석 보고서를 봅니다. |
https://www.googleapis.com/auth/yt-analytics.readonly | YouTube 콘텐츠에 대한 YouTube 분석 보고서보기 |
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입니다. 이 값이
제공된
|
||||||||||||||||||
response_type |
필수
JavaScript 애플리케이션은 매개변수의 값을 |
||||||||||||||||||
scope |
필수
가 공백으로 구분 애플리케이션이 액세스할 수 있는 리소스를 식별하는 범위 할 수 있습니다. 이 값은 Google에서 있습니다. 범위를 사용하면 애플리케이션이 필요한 리소스에 대한 액세스만 요청할 수 있습니다. 사용자가 내 사이트에 부여하는 액세스 권한의 양을 애플리케이션입니다. 따라서 요청된 범위 수 간에는 반비례 관계가 있습니다. 사용자 동의 획득 가능성을 고려합니다. YouTube Analytics API는 다음 범위를 사용합니다.
YouTube Reporting API는 다음 범위를 사용합니다.
OAuth 2.0 API 범위 문서에서는 Google API에 액세스하는 데 사용할 수 있는 전체 범위 목록 애플리케이션에서 컨텍스트 내에서 승인 범위에 대한 액세스를 요청하는 것이 좋습니다. 할 수 있습니다. 다음을 통해 컨텍스트 내에서 사용자 데이터에 대한 액세스를 요청함 점진적 승인으로 사용자가 더욱 쉽게 애플리케이션에 요청하는 액세스가 필요한 이유를 이해할 수 있습니다. |
||||||||||||||||||
state |
권장
애플리케이션이
승인 요청 및 승인 서버의 응답을 나타냅니다.
서버는 이 매개변수는 사용자를
nonce 전송, 교차 사이트 요청 완화 등 애플리케이션의 올바른 리소스 사용
있습니다. |
||||||||||||||||||
include_granted_scopes |
선택사항
애플리케이션이 점진적 승인을 사용하여 추가
범위를 맞춤설정할 수 있습니다 이 매개변수의 값을 |
||||||||||||||||||
enable_granular_consent |
선택사항
기본값은 Google이 애플리케이션에 대한 세분화된 권한을 사용 설정하는 경우 이 매개변수는 영향을 미치지 않습니다. |
||||||||||||||||||
login_hint |
선택사항
애플리케이션이 인증을 시도하는 사용자를 알고 있는 경우 이 매개변수를 사용할 수 있습니다. Google 인증 서버에 힌트를 제공합니다. 서버는 힌트를 사용하여 로그인 양식의 이메일 입력란을 미리 채우거나 적절한 멀티 로그인 세션을 선택합니다. 매개변수 값을 이메일 주소 또는 |
||||||||||||||||||
prompt |
선택사항
공백으로 구분되며 대소문자를 구분하는 사용자에게 표시할 메시지 목록입니다. 그렇지 않은 경우 이 매개변수를 지정하면 프로젝트를 처음 사용할 때만 사용자에게 메시지가 표시됩니다. 액세스 권한을 요청합니다. 를 참조하세요. 재동의 메시지 표시 가능한 값은 다음과 같습니다.
|
Google 인증 서버로의 샘플 리디렉션
아래 샘플 URL은 오프라인 액세스를 요청합니다.
(access_type=offline
)를 액세스를 허용하는 범위로
사용자의 YouTube 분석 보고서 점진적 승인을 사용하여
새 액세스 토큰이 사용자가
권한을 부여할 수 있습니다. 또한 URL은
필수: redirect_uri
, response_type
,
client_id
매개변수 및 state
매개변수 값으로 사용됩니다. 가독성을 위해 URL에 줄바꿈과 공백이 포함되어 있습니다.
https://accounts.google.com/o/oauth2/v2/auth?
scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyt-analytics.readonly&
include_granted_scopes=true&
state=state_parameter_passthrough_value&
redirect_uri=http%3A%2F%2Flocalhost%2Foauth2callback&
response_type=token&
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/yt-analytics.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 서버는 지정된 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%2F%2Fwww.googleapis.com%2Fauth%2Fyt-analytics.readonly& include_granted_scopes=true& state=state_parameter_passthrough_value& redirect_uri=http%3A%2F%2Flocalhost%2Foauth2callback& response_type=token& 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에 대한 호출을 설정할 수 있는 경우 (예:
YouTube Analytics API 호출)을 참조하세요.
YouTube Analytics API는 서비스 계정을 지원하지 않습니다. 있습니다. YouTube Reporting API는 여러 YouTube 채널을 소유하고 관리하는 YouTube 콘텐츠 소유자(예: 음반사와 영화 스튜디오입니다.
모든 Google API를 사용해 보고 OAuth 2.0 플레이그라운드.
HTTP GET 예시
호출
<ph type="x-smartling-placeholder"></ph>
reports.query
엔드포인트 (YouTube Analytics API)에서 Authorization: Bearer
HTTP를 사용하는 경우
헤더는 다음과 같을 수 있습니다. 자체 액세스 토큰을 지정해야 합니다.
GET /youtube/analytics/v1/reports?ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views HTTP/1.1 Host: www.googleapis.com Authorization: Bearer access_token
다음은 access_token
를 사용하여 인증된 사용자의 동일한 API를 호출합니다.
쿼리 문자열 매개변수:
GET https://www.googleapis.com/youtube/analytics/v1/reports?access_token=access_token&ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views
curl
예
curl
명령줄 애플리케이션을 사용하여 이러한 명령어를 테스트할 수 있습니다. 다음은
예를 들면 다음과 같습니다 (권장).
curl -H "Authorization: Bearer access_token" https://www.googleapis.com/youtube/analytics/v1/reports?ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views
또는 쿼리 문자열 매개변수 옵션을 사용합니다.
curl https://www.googleapis.com/youtube/analytics/v1/reports?access_token=access_token&ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views
JavaScript 샘플 코드
아래의 코드 스니펫은 CORS (교차 출처 리소스 공유)를 사용하여 Google API에 요청을 보낼 수 있습니다 이 예에서는 JavaScript용 Google API 클라이언트 라이브러리를 사용하지 않습니다. 그러나 클라이언트 라이브러리를 사용하지 않더라도 라이브러리 문서의 CORS 지원 가이드가 을 읽고 이러한 요청을 더 잘 이해할 수 있습니다.
이 코드 스니펫에서 access_token
변수는
얻은 권한을 사용하여 승인된 사용자를 대신하여 API 요청을 할 수 있습니다. 전체
예는 이 토큰을 브라우저의 로컬 저장소에 저장하고 검색하는 방법을 보여줍니다.
API 요청을 할 때
var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://www.googleapis.com/youtube/analytics/v1/reports?ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views&' + '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/yt-analytics.readonly
범위. - 하나 이상의 요청된 범위에 대한 액세스 권한을 부여 (또는 거부)하면 사용자는 부분 식별자 문자열에서 액세스 토큰을 파싱합니다.
이 페이지는 액세스 토큰을 사용하여 샘플 API 요청을 만듭니다.
이 API 요청은 YouTube Analytics API의
reports.query
를 호출합니다. 메서드를 사용하여 인증된 사용자의 YouTube 채널에 대한 조회수를 검색할 수 있습니다.- 요청이 실행되면 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/youtube/analytics/v1/reports?ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views&' + '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/yt-analytics.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 주소는 이 규칙에서 제외됩니다. |
도메인 |
“googleusercontent.com” 일 수 없습니다.goo.gl )을 포함할 수 없습니다.
사용할 수 없습니다. |
사용자 정보 |
JavaScript 출처에는 userinfo 하위 구성 요소가 포함될 수 없습니다. |
경로 |
JavaScript 출처에는 경로 구성요소가 포함될 수 없습니다. |
쿼리 |
JavaScript 출처에는 쿼리 구성요소가 포함될 수 없습니다. |
Fragment |
JavaScript 출처에는 프래그먼트 구성요소가 포함될 수 없습니다. |
문자 |
JavaScript 출처에는 다음과 같은 특정 문자를 포함할 수 없습니다.
<ph type="x-smartling-placeholder">
|
점진적 승인
OAuth 2.0 프로토콜에서 앱은 60비트 필드입니다 승인을 요청하는 것은 최선의 사용자 환경 관행으로 간주됩니다. 리소스를 프로비저닝할 수 있습니다 이를 위해 Google 인증 서버는 단계적 승인을 지원합니다. 이 기능을 사용하면 필요에 따라 범위를 요청할 수 있으며 사용자가 새 범위에 대한 권한을 부여하면 사용자가 프로젝트에 부여한 모든 범위가 포함된 토큰으로 교환합니다.
예를 들어 앱에서 YouTube 분석 보고서를 검색하고
이러한 보고서는 다른 영역에
도달하지 않은 추가 범위에 액세스해야 하는
확인할 수 있습니다 이 경우 로그인 시 앱이
다음에 대한 액세스 요청
https://www.googleapis.com/auth/yt-analytics.readonly
범위.
그러나 사용자가 재무 보고서를 검색하려고 하면 앱은
다음에 대한 액세스 요청
https://www.googleapis.com/auth/yt-analytics-monetary.readonly
범위를 제공합니다
점진적 승인을 통해 얻은 액세스 토큰에는 다음 규칙이 적용됩니다.
- 이 토큰은 새롭게 통합된 승인입니다.
- 통합 승인에 대한 갱신 토큰을 사용하여 액세스 토큰을 얻으면
액세스 토큰은 통합 승인을 나타내며
응답에
scope
개 값이 포함됩니다. - 통합 승인에는 사용자가 API 프로젝트에 부여한 모든 범위가 포함됩니다. 서로 다른 고객으로부터 지원금을 요청한 경우 예를 들어 사용자가 한 범위를 애플리케이션의 데스크톱 클라이언트를 사용하여 지정한 다음 모바일 클라이언트를 통한 애플리케이션의 경우 통합 승인에는 두 범위가 모두 포함됩니다.
- 통합 승인을 나타내는 토큰을 취소하는 경우 해당 토큰 모두에 액세스할 수 있습니다. 동시에 취소됩니다.
아래의 코드 샘플은 기존 액세스 토큰에 범위를 추가하는 방법을 보여줍니다. 이 접근 방식을 사용하면 여러 액세스 토큰을 관리하지 않아도 됩니다.
OAuth 2.0 엔드포인트
이 예에서는 호출하는 애플리케이션이 사용자의 YouTube 분석 데이터와 그 밖의 사용자 액세스 권한을 애플리케이션에 권한을 부여해야 합니다.
기존 액세스 토큰에 범위를 추가하려면 include_granted_scopes
를 포함합니다.
매개변수를 Google의 OAuth 2.0 서버에 대한 요청에 포함해야 합니다.
다음 코드 스니펫은 그 방법을 보여줍니다. 이 스니펫은 각 포드에 대해
브라우저의 로컬 저장소에 저장된 액세스 토큰의 유효 범위입니다. (
전체 예 코드:
oauth2-test-params.scope
속성을 브라우저의 로컬
storage.)
스니펫은 액세스 토큰이 유효한 범위를 사용하려는 범위와 비교합니다.
확인할 수 있습니다 액세스 토큰에 해당 범위가 포함되지 않으면 OAuth 2.0 흐름이 시작됩니다.
여기서 oauth2SignIn
함수는
2단계 (자세한 내용은 전체
예).
var SCOPE = 'https://www.googleapis.com/auth/yt-analytics.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> 계정 간 보안 페이지에서 사용자 계정 보호하기 를 통해 개인정보처리방침을 정의할 수 있습니다. 에서 교차 계정 보호를 구현하는 방법을 자세히 알아보고 사용 가능한 이벤트의 전체 목록을 확인하세요.