1. GCP 설정의 승인된 리디렉션 URI 와 oauth url 로 넘겨주는 리디렉션 URI 가 정확하게 일치해야 합니다.
- oauth url 생성 로직
<script>
getUrl() {
const params = new URLSearchParams({
client_id: this.clientId,
redirect_uri: "http://localhost:3000/test",
response_type: 'code',
scope: 'email profile',
});
const authUrl =`
https://accounts.google.com/o/oauth2/v2/auth?${params.toString()}
`;
return authUrl;
},
</script>- GCP 세팅 화면
-
oauth url 로 넘겨주는 리디렉션 url 이 http://localhost:3000/test 인 경우, GCP 세팅에서도 http://localhost:3000/test 로 동일하게 설정해주어야 합니다.
-
그렇게 하지 않으면 redirect_uri_mismatch 오류가 납니다.
- 400 오류: redirect_uri_mismatch 화면
2. GCP 세팅을 저장한 뒤에 시간이 소요됩니다.
-
GCP 세팅을 저장한 뒤 적용되는 데 5분에서 몇 시간이 걸릴 수 있습니다. 라는 안내메세지가 있습니다.
-
보통 제가 관찰한 바로는 3분 정도 경과되면 적용되었습니다.
따라서 세팅을 저장 후 조금 기다렸다가 테스트하는 것이 좋습니다. (호흡을 길게)
3. s3 + cloudFront 배포환경에서 trailing slash 를 주의하여야 합니다.
-
예를 들어 https://buburecord.bird89.com/test 로 리디렉션 url 을 설정한 경우, 구글 로그인 후 https://buburecord.bird89.com/test/ 로 도달하고 code 등 구글이 보내준 쿼리가 수신되지 않는 현상이 있습니다.
-
이렇게 되는 이유는 처음에 다음 url 로 리다이렉트된 뒤,
( https://buburecord.bird89.com/test?code=4%2F0AVG7fiTzsXUPOO4higTmZw63s9Q5YLoX-2D7_9trse237aOc2SQiQguzSHy5h1vEAqab6w&scope=email%20profile%20openid%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email&authuser=0&prompt=consent )
웹 서버에서 마지막에 / slash 를 붙이는 과정에서 또 한번 리다이렉트를 시키게 되고 이때 쿼리들이 사라지게 됩니다.
( https://buburecord.bird89.com/test/ ) -
웹 서버의 설정에 따라 다르겠지만, AWS S3 + cloud front 배포 환경에서는 기본적으로 이렇게 설정이 되어 있습니다.
4. 위 문제는 리디렉션 URL에 슬래시 (/)를 포함하여 설정하여 해결할 수 있습니다.
- 리다이렉트 url 을 https://buburecord.bird89.com/test/ 로 설정하면, cloud front 가 추가적인 리다이렉트를 수행하지 않아, 쿼리 파라미터들이 유지됩니다.
5. S3 Static website hosting + cloudFront 배포 환경 특징 확인해보기
-
S3 Static website hosting 을 이용하면, 특정 url ( https://buburecord.bird89.com ) 로 이동시 그 디렉토리 내의 index.html 파일을 자동으로 찾아서 서빙합니다.
-
다른 예로 https://buburecord.bird89.com/test url 로 이동하여도, S3 내의 test 디렉토리 내의 index.html 파일을 자동으로 찾아서 서빙합니다.
6. 성공 후 리디렉션 예시
-
구글 로그인 후 리디렉션된 url 을 살펴보면 쿼리에 code 가 포함된 것을 볼 수 있습니다. 이 코드를 사용하여 다음 단계로 진행할 수 있습니다.
-
https://buburecord.bird89.com/test/ 처럼 뒤에 슬래시가 붙어있고, 그 뒤 ? 부터 쿼리들이 붙어있는 것을 확인할 수 있습니다.
