google.accounts.oauth2 자바스크립트 라이브러리를 사용하면
액세스 토큰을 얻어야 합니다. 그것은
OAuth 2.0 암시적 권한 부여 흐름은 사용자가 Google에 전화를 걸거나
직접 REST 및 CORS를 사용하거나 Google API 클라이언트 라이브러리를 사용하여
JavaScript (gapi.client라고도 함)를 사용하면
더 복잡한 API를 제공합니다.
브라우저에서 보호되는 사용자 데이터에 액세스하기 전에 사이트의 사용자는 Google의 웹 기반 계정 선택기, 로그인 및 동의 프로세스, 그리고 마지막으로 Google의 OAuth 서버가 실행되고 웹 앱에 액세스 토큰이 반환됩니다.
토큰 기반 승인 모델에서는 사용자별로 데이터를 저장할 필요가 없습니다. 토큰을 새로고침할 수 있습니다
기존 방식 대신 여기에 설명된 방식을 따르는 것이 이전의 클라이언트 측 웹 애플리케이션용 OAuth 2.0에서 다루는 기술 참조하세요.
설정
Google API 클라이언트 ID 가이드를 참조하세요. 다음으로 페이지에 클라이언트 라이브러리를 추가합니다.
하위 집합일 수도 있습니다. 마지막으로 토큰을 초기화합니다.
있습니다 이 작업은 일반적으로 클라이언트 라이브러리의 onload 핸들러 내에서 실행됩니다.
토큰 클라이언트 초기화
initTokenClient()를 호출하여 웹 앱의 토큰으로 새 토큰 클라이언트를 초기화합니다.
클라이언트 ID로, 필요한 경우 사용자가 이용하는 하나 이상의 범위 목록을 포함할 수 있습니다.
액세스 권한 필요:
const client = google.accounts.oauth2.initTokenClient({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
scope: 'https://www.googleapis.com/auth/calendar.readonly',
callback: (response) => {
...
},
});
OAuth 2.0 토큰 흐름 트리거
requestAccessToken() 메서드를 사용하여 토큰 UX 흐름을 트리거하고
액세스할 수 있습니다. Google은 사용자에게 다음과 같은 메시지를 표시합니다.
- 계정을 선택하고
- Google 계정에 로그인합니다(로그인하지 않은 경우).
- 웹 앱이 요청된 각 범위에 액세스하는 데 동의를 부여합니다.
사용자 동작이 토큰 흐름을 트리거합니다. <button onclick="client.requestAccessToken();">Authorize me</button>
그러면 Google은 액세스 토큰과TokenResponse
사용자가 콜백 핸들러에 대한 액세스 권한을 부여한 범위 또는 오류가 있을 수 있습니다.
사용자는 계정 선택기 또는 로그인 창을 닫을 수 있으며, 이런 경우 콜백 함수가 호출되지 않습니다.
동의를 처리하는 방법
앱의 디자인과 사용자 환경은 철저한 Google OAuth 2.0 정책 검토 이러한 정책에는 사용자 동의를 처리하는 경우와 방법 등은 다양합니다.
증분 승인은 다음을 위해 사용되는 정책 및 앱 설계 방법입니다. 사전이 아닌 필요한 경우에만 범위를 사용하여 리소스에 대한 액세스 요청 할 수 있습니다. 사용자는 개별 리소스의 공유를 승인하거나 거부할 수 있습니다. 이러한 권한을 세분화된 권한이라고 합니다.
이 과정에서 Google은 사용자 동의를 요청하는 메시지를 각각 개별적으로 사용자가 앱과 공유할 리소스를 선택합니다. 마지막으로 Google은 콜백 함수를 호출하여 액세스 토큰과 사용자 인증 정보를 반환합니다. 승인된 범위에만 적용됩니다. 그러면 앱이 다양한 결과를 안전하게 처리합니다. 더 많은 권한을 부여할 수 있습니다
점진적 승인
웹 앱의 경우 다음 두 가지 대략적인 시나리오는 인증:
- 동적 액세스 권한이 있는
XMLHttpRequest를 자주 사용하는 단일 페이지 Ajax 앱 리소스를 배포합니다 - 여러 개의 웹페이지, 리소스가 페이지별로 분리되고 관리됩니다.
이 두 가지 시나리오는 설계 고려 사항을 설명하고 방법론을 포괄적으로 제시할 수 있는 방법이 앱에 동의를 얻으세요 실제 앱에서는 변형 또는 조합할 수 있습니다.
Ajax
여러 번 호출하여 앱에 증분 승인 지원을 추가합니다.
requestAccessToken()에 적용하고 OverridableTokenClientConfig 객체의
필요할 때 개별 범위를 요청하는 scope 매개변수
필요한 경우에만 사용합니다 이 예시에서는 리소스가 요청되고
접힌 콘텐츠 섹션을 펼친 후에만
| Ajax 앱 |
|---|
페이지 로드 시 토큰 클라이언트를 초기화합니다.
const client = google.accounts.oauth2.initTokenClient({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: "onTokenResponse",
});
읽을 문서최근 문서 표시
client.requestAccessToken(
overrideConfig = ({
scope = 'https://www.googleapis.com/auth/documents.readonly'
})
);
예정된 이벤트캘린더 정보 표시
client.requestAccessToken(
overrideConfig = ({
scope = 'https://www.googleapis.com/auth/calendar.readonly'
})
);
사진 캐러셀사진 표시
client.requestAccessToken(
overrideConfig = ({
scope = 'https://www.googleapis.com/auth/photoslibrary.readonly'
})
);
|
requestAccessToken를 호출할 때마다 사용자 동의 순간이 트리거되며 앱은 다음과 같이 작동합니다.
사용자가 선택한 섹션에서 요구하는 리소스에만 액세스할 수 있음
사용자 선택을 통한 리소스 공유가 제한됩니다.
여러 웹페이지
점진적 승인을 설계할 때 요청을 하려면 여러 페이지가 사용됩니다. 페이지 로드에 필요한 범위만 지정하면 되므로 복잡성이 줄어들고 사용자 동의를 얻고 액세스 토큰을 검색하기 위해 여러 번 호출합니다.
| 다중 페이지 앱 | ||||||||
|---|---|---|---|---|---|---|---|---|
|
각 페이지는 필요한 범위를 요청하고 다음을 호출하여 액세스 토큰을 얻습니다.
로드 시 initTokenClient() 및 requestAccessToken() 이 시나리오에서는
사용자 기능과 API를 명확하게 구분하기 위해 개별 웹페이지를
선택할 수 있습니다 실제 상황에서는 개별 페이지가
여러 관련 범위가 있습니다
세분화된 권한
세분화된 권한은 모든 시나리오에서 동일한 방식으로 처리됩니다. 이후
requestAccessToken()는 콜백 함수와 액세스 토큰을 호출합니다.
사용자가 다음을 사용하여 요청된 범위를 승인했는지 확인합니다.
hasGrantedAllScopes() 또는 hasGrantedAnyScope()입니다. 예를 들면 다음과 같습니다.
const client = google.accounts.oauth2.initTokenClient({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
scope: 'https://www.googleapis.com/auth/calendar.readonly \
https://www.googleapis.com/auth/documents.readonly \
https://www.googleapis.com/auth/photoslibrary.readonly',
callback: (tokenResponse) => {
if (tokenResponse && tokenResponse.access_token) {
if (google.accounts.oauth2.hasGrantedAnyScope(tokenResponse,
'https://www.googleapis.com/auth/photoslibrary.readonly')) {
// Look at pictures
...
}
if (google.accounts.oauth2.hasGrantedAllScopes(tokenResponse,
'https://www.googleapis.com/auth/calendar.readonly',
'https://www.googleapis.com/auth/documents.readonly')) {
// Meeting planning and review documents
...
}
}
},
});
이전 세션 또는 요청을 통해 이전에 수락된 권한 부여도
포함되어 있습니다. 사용자 동의 기록은 사용자별로 유지 관리되며
클라이언트 ID이며 initTokenClient() 또는
requestAccessToken()입니다. 기본적으로 사용자 동의는
사용자가 웹사이트를 방문하여 새 범위를 요청하지만 다음 날짜에 요청될 수 있는 시간
모든 페이지를 로드할 때마다 토큰 클라이언트 구성 객체에서 prompt=consent를 사용합니다.
토큰으로 작업하기
토큰 모델에서는 액세스 토큰이 OS나 브라우저에 저장되지 않고 대신
새 토큰을 먼저 페이지 로드 시에 얻거나
버튼 누르기와 같은 사용자 동작을 통해 requestAccessToken() 호출을 보냅니다.
Google API에서 REST 및 CORS 사용
액세스 토큰은 Google API에 대해 인증된 요청을 하는 데 사용할 수 있으며 REST 및 CORS를 사용할 수 있습니다. 이를 통해 사용자는 로그인하고, 동의하며, Google에서 사용자 데이터를 사용할 수 있습니다.
이 예에서는 다음을 사용하여 로그인한 사용자의 예정된 캘린더 일정을 확인합니다.
tokenRequest()에서 반환한 액세스 토큰:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.googleapis.com/calendar/v3/calendars/primary/events');
xhr.setRequestHeader('Authorization', 'Bearer ' + tokenResponse.access_token);
xhr.send();
자세한 내용은 CORS를 사용하여 Google API에 액세스하는 방법을 참조하세요.
다음 섹션에서는 더 복잡한 API와 쉽게 통합하는 방법을 설명합니다.
Google API JavaScript 라이브러리로 작업하기
토큰 클라이언트는 JavaScript용 Google API 클라이언트 라이브러리와 함께 작동합니다. 아래의 코드 스니펫을 참조하세요.
const client = google.accounts.oauth2.initTokenClient({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
scope: 'https://www.googleapis.com/auth/calendar.readonly',
callback: (tokenResponse) => {
if (tokenResponse && tokenResponse.access_token) {
gapi.client.setApiKey('YOUR_API_KEY');
gapi.client.load('calendar', 'v3', listUpcomingEvents);
}
},
});
function listUpcomingEvents() {
gapi.client.calendar.events.list(...);
}
토큰 만료
액세스 토큰은 설계상 수명이 짧습니다. 액세스 토큰이 만료되는 경우
사용자 세션이 종료되기 전에
버튼 누르기와 같은 사용자 기반 이벤트의 requestAccessToken()
액세스 토큰을 사용하여 동의 취소
google.accounts.oauth2.revoke 메서드를 호출하여 사용자 동의를 삭제하고
앱에 부여된 모든 범위의 리소스에 대한 액세스 권한 유효한 액세스 권한
토큰이 있어야 합니다.
google.accounts.oauth2.revoke('414a76cb127a7ece7ee4bf287602ca2b56f8fcbf7fcecc2cd4e0509268120bd7', done => {
console.log(done);
console.log(done.successful);
console.log(done.error);
console.log(done.error_description);
});