프로젝트에 소셜로그인을 구현했다. 로컬에서 테스트를 하고, 배포에서 실제 사용해야하니 로컬환경과 배포환경에서 동일한 작동을 구현하는데 문제가 생겼었다.
별거 아닌 문제였지만 이거 하는데 정말 하루는 온전히 갈아넣었던 것 같다.
배포된 백엔드에서 로그를 확인하며 진행해야했기 때문이다. (처음엔 심지어 이 생각도 하지 못했다.)
우리 문제는 redirect_uri였다.
그전에 우리 로그인 로직에 대해 설명하자면
우리 로그인 로직
로컬환경 구성
구글 client id와 redirect_uri, google_scope를 env형태로 관리해주었다.
client_id와 google_scope는 변하지 않는 값이므로 따로 github에서 분기처리를 해주지 않았다.
배포환경 구성(Github action)
.github/workflows/deploy.yml이다.
name: NEXT Deploy prod
on:
push:
branches: main
env:
NEXT_PUBLIC_GOOGLE_CLIENT_ID: '${{secrets.NEXT_PUBLIC_GOOGLE_CLIENT_ID}}'
NEXT_PUBLIC_GOOGLE_REDIRECT_URI: '${{secrets.NEXT_PUBLIC_GOOGLE_REDIRECT_URI}}'
NEXT_PUBLIC_GOOGLE_SCOPE: '${{secrets.NEXT_PUBLIC_GOOGLE_SCOPE}}'
NEXT_PUBLIC_API_KEY: '${{secrets.NEXT_PUBLIC_API_KEY}}'
NEXT_PUBLIC_NOTION_KEY: '${{secrets.NEXT_PUBLIC_NOTION_KEY}}'
NEXT_PUBLIC_NOTION_DATABASE_ID: '${{secrets.NEXT_PUBLIC_NOTION_DATABASE_ID}}'
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout source code.
uses: actions/checkout@main
- name: Install Dependencies
run: |
npm install
- name: Configure AWS Credentials
uses: aws-actions/configure-aws-credentials@v1
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
aws-region: ap-northeast-2
- name: Deploy Next.js app
run: |
npm run deployredirect_uri만 http://localhost:3000/google에서 https://cau-likelion.org/google로 로 변경해주었고, 구글 api콘솔에 등록해주었다.
이렇게 구성을 했고, 로컬에서는 항상 잘 작동했다. 근데 배포하니까 작동하지 않았다.
몇 번(수 시간)의 시도와 고민 끝에 찾아낸 의문인 점은 백엔드에서 구글에 토큰을 요청할 때에도 redirect_uri가 필요하다는 것이었다.
내가 이해한 redirect_uri는 클라이언트측에서 로그인 후에 볼 화면인데 어떻게 이게 백엔드 요청에도 필요한 걸까라는 의문이 들었다.
그리고 우리 백엔드, 그리고 chatGPT와의 엄청난 대화 끝에 백엔드 토큰 요청의 redirect_uri는 검증값이라는 것을 알아냈다. 즉, 프론트엔드와 백엔드 redirect_uri가 동일해야 제대로 실행이 된다는 것이다.
그래서 우리 백엔드에서 post요청을 한 url을 검사하고, 이를 통해 백엔드의 redirect_uri를 설정해주었다.
def get_redirect_url(request):
host = request.META.get('HTTP_REFERER')
scheme = request.scheme
host_domain = host
if host_domain != None:
host_domain = host.split('/google')[0]
print(host_domain)
if host_domain == 'http://localhost:3000':
redirect_uri = 'http://localhost:3000/google'
else:
redirect_uri = 'https://cau-likelion.org/google'
return redirect_uri
