Google API를 사용하는 데 clientID가 충분하지 않은 이유는 무엇입니까? <a href="https://developers.google.com/apis-explorer/#search/youtube/m/youtube/v3/youtube.channels.list?part=statistics&id=UCE5Au4LfcBHxTQR_yLbncrQ&_h=4&" rel="nofollow noreferrer">Google's API explorer</a>에서

Question

나는 내 SPA에, 나는 어떻게 든 로그인에서 파생에 대한 후속 호출에 사용되는 YOUR_API_KEY보고 원하는 OAuth는 2.0를 사용 권한 부여 요청을 사용 :

https://www.googleapis.com/youtube/v3/channels?part=statistics&id=UCE5Au4LfcBHxTQR_yLbncrQ&key={YOUR_API_KEY} 

어떻게 할을 이 열쇠를 얻으려고? VueJS 앱에서 GAPI.auth2.getAuthInstance()에서 일하고 있습니다.

갭이은 Google samples에 사용 된 것을 볼 수 있습니다. 하지만 세션에 대해이 사용자의 API 키를 사용하여 간단한 직접 fetch 호출을 수행하려고합니다. gapi.client을 사용하고 싶지 않습니까, 아니면 선택의 여지가 없습니까?

업데이트 : Oauth2 playground에 나는 클라이언트 비밀 1을 참조하십시오. 백엔드가없는 SPA에서는 비밀을 저장하고 싶지 않기 때문에 나는 이것을 전혀 이해하지 못합니다! 클라이언트 ID가없고 의 출처가이면 충분하지 않은 이유는 무엇입니까?

다음은 apiKey에가 된 ClientID와 함께 사용되는 another confusing example (사용 비밀) 없습니다. 출처가 제한되어 있으므로 고객 ID는으로 충분하지 않습니다.

Answer 1

일반적으로 웹에있을 때 access_token을 얻기 위해 두 가지 유형의 OAuth 플로우가 있습니다. 하나는 implicit flow이고 다른 하나는 authorization code flow입니다.

코드 흐름의 경우 access_token으로 코드를 교환하려면 client_secret이 필요합니다. 이것은 대개 서버 측에서 발생합니다.
암시 적 플로우의 경우 client_id를 제공하여 access_token을 얻을 수 있으며 클라이언트 측에서 작동하도록 설계되었습니다.

첨부 된 스크린 샷은 인증 코드를 access_token과 교환하는 OAuth 플로우 부분입니다. 놀이터에서 인증 코드 흐름을 사용하기 때문입니다.

당신이 찾고있는 것은 암시적인 흐름이어야합니다.

YouTube 클라이언트 라이브러리 (또는 Google 자바 클라이언트 클라이언트 lib)에서이를 수행하려면 client_secret이 필요하지 않습니다. 다음 Google 드라이브를 사용하여 완전한 예를 찾을 수 있습니다. https://github.com/GoogleChrome/google-sign-in/blob/master/static/scripts/authorization_client.js