[next/react] google 로그인 구현하기 (2) : 액세스 토큰 받기

액세스 토큰을 받기 위해 oauth client id를 이전에 발급받았다. (link)

[next/react] google 로그인 구현하기 (1) : oauth client id 발급 받기

 

 

액세스 토큰 발급받기

하단의 endpoint와 매개변수를 조합하여, 본인의 link를 만들자 

- 보기 좋게 줄바꿈 넣어두었지만, 실제 쓸 때는 공백없이 한줄로 link 연결시키면 됨

- redirect_uri, client_id 의 value 수정 필수

- redirect_uri 값 넣어줄 때 encoding 해서 넣을 것! (그리고 요 값은 위의 oauth client id 값을 발급받을 때 넣었던 redirect uri 여야만 함)

https://accounts.google.com/o/oauth2/v2/auth?
 scope=profile%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email&
 include_granted_scopes=true&
 response_type=token
 redirect_uri=USER_REDIRECT_URL&
 client_id=USER_CLIENT_ID

 

1. endpoint

https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow?hl=ko#redirecting

 

2. 필수/권장 매개변수 (자세한 사항은 원문 참고)

client_id	필수애플리케이션의 클라이언트 ID입니다. 이 값은 API Console Credentials page입니다.
redirect_uri	필수사용자가 사용할 수 있습니다. 값은 설정했던 OAuth 2.0 클라이언트를 API Console Credentials page입니다. 이 값이 제공된 client_id에 대해 승인된 리디렉션 URI를 반환합니다. redirect_uri_mismatch 오류가 발생했습니다. http 또는 https 스키마, 케이스, 후행 슬래시 ('/')가 모두 일치해야 합니다.
response_type	필수 JavaScript 애플리케이션은 매개변수의 값을 token로 설정해야 합니다. 이 값은 Google 승인 서버가 액세스 토큰을 다음 URI (#)의 프래그먼트 식별자에 있는 name=value 쌍입니다. 승인 프로세스가 완료된 후 사용자가 리디렉션됩니다.
scope	필수가 공백으로 구분 애플리케이션이 액세스할 수 있는 리소스를 식별하는 범위 할 수 있습니다. 이 값은 Google에서 있습니다. 범위를 사용하면 애플리케이션이 필요한 리소스에 대한 액세스만 요청할 수 있습니다. 사용자가 내 사이트에 부여하는 액세스 권한의 양을 애플리케이션입니다. 따라서 요청된 범위 수 간에는 반비례 관계가 있습니다. 사용자 동의 획득 가능성을 고려합니다. 애플리케이션에서 컨텍스트 내에서 승인 범위에 대한 액세스를 요청하는 것이 좋습니다. 할 수 있습니다. 다음을 통해 컨텍스트 내에서 사용자 데이터에 대한 액세스를 요청함 단계별 승인을 통해 사용자가 손쉽게 애플리케이션에 요청하는 액세스가 필요한 이유를 이해할 수 있습니다.
state	권장애플리케이션이 승인 요청 및 승인 서버의 응답을 나타냅니다. 서버는 name=value 쌍으로 전송하는 정확한 값을 URL 부분 식별자 (#) 의 redirect_uri 사용자가 애플리케이션의 액세스할 수 있습니다. 이 매개변수는 사용자를 nonce 전송, 교차 사이트 요청 완화 등 애플리케이션의 올바른 리소스 사용 있습니다. state를 사용하여 redirect_uri을 추측할 수 있으므로 값은 수신 연결이 18개월 또는 30일 동안의 인증 요청에 사용할 수 있습니다. 임의의 문자열을 생성하거나 쿠키 또는 쿠키의 해시를 인코딩하는 경우 클라이언트 상태를 캡처하는 다른 값이 있는 경우 요청과 응답이 동일한 브라우저에서 시작되었는지 확인해야 합니다. 일회성, 직간접적 공격, 지속적 공격, 크로스 사이트 요청 위조 자세한 내용은 OpenID Connect state 토큰을 만들고 확인하는 방법에 관한 예시를 참조하세요. <ph type="x-smartling-placeholder"></ph> 중요: OAuth 클라이언트는 OAuth2 사양 에 대해 자세히 알아보세요. 이를 달성하는 한 가지 방법은 state 매개변수를 사용하여 상태입니다.

 

 

 

어라? 만든 endpoint를 들어가보니 아래처럼 에러가 뜬다면?

아래 글 참고할 것!

[google oauth] localhost 에서 400 오류 : redirect_uri_mismatch 오류 해결

 

 

 

 

 

 

참고 : https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow?hl=ko