Shopify의 앱 설치 로직 이해하기

2024년 5월 20일 월요일

Today I Learned

날짜

2024년 5월 20일 월요일

내용

앱 설치 링크

이제 우리 서비스는 2가지 앱을 같은 어드민 페이지에서 지원한다. 브라우저 부스터 앱을 사용하는 사람이 알파플러스 앱에 접근하려고 하면, 앱 설치 URL로 리다이렉트 시켜줘야 한다. 쇼피파이 앱 스토어에서 설치할 때, 바로 해당 앱을 설치하기 위한 권한을 묻는 페이지로 넘겨줬어야 했는데 저번주 내내 열심히 뒤져봤지만 못찾았다.. 분명 다른 앱에선 구현해놓은 건데…

이 부분을 해결했다! 쇼피파이와 우리 서버가 통신을 주고받는 엔드포인트는 3개다.

  1. /shopify
  2. /shopify/oauth/authorize
  3. /shopify/callback

쇼피파이에선 최초로(유저가 앱스토어에서 설치 버튼을 누르면) 1번 엔드포인트로 요청을 보낸다. 이때, 우리 서버에서 샵 데이터가 존재하는지 확인한다(우리 서비스에 접근하는 순간 가장 먼저 발생하는 데이터가 샵 데이터다. 심지어 계정이 아직 연결되지 않았을때 조차 샵 데이터는 존재한다).

만약 샵 데이터가 없다면, 최초 접근이라고 생각하고 2번 엔드포인트로 보낸다. 2번에선 설치하는 앱이 요구하는 권한을 승인하는 페이지로 리다이렉트 시켜준다. 여기서 유저가 승인하면 3번 엔드포인트로 리다이렉트한다. 여기서 2번에서 온 요청을 검증한 후 올바른 요청이라면 샵 데이터를 만든다. 이때가 유저가 우리 서비스를 설치한 후 최초로 서버에 저장하는 데이터다. 샵 데이터를 생성한 후 필요한 데이터(상품 데이터)를 마이그레이션 한 뒤, 다시 1번 엔드포인트로 요청을 보낸다.

1번 엔드포인트에서 샵 데이터가 존재한다면 어떻게 될까? 존재 이유는, 방금 위에서 설명한 과정을 거쳐 다시 1번으로 왔을 수도 있고, 다른 경로로 들어왔을 수도 있다. 1번 엔드포인트는 앱 스토어에서만 호출되는 설치 경로가 아니라, 쇼피파이 어드민에서 설치해놨던 앱을 실행할 때도 호출된다. 즉, 평소 우리 서비스를 이용하는 유저들이 접속할 때도 1번 엔드포인트가 호출된다는 의미이다.

어떤 과정을 거쳐왔던, 1번 엔드포인트에서 샵이 존재한다면 그 샵의 shopify에 등록되어있는 access_scope를 검사한다. 우리 서비스가 필요로 하는 access_scope가 모두 등록되어 있다면 로그인 페이지로 넘어가고, 일부가 결손되어 있거나 확인하는 요청 자체가 실패하면 다시 2번 엔드포인트로 보내서 재설치 과정을 거친다.

즉, 앱의 설치 과정은 2번 엔드포인트부터 시작되는 셈이다. 설치화면으로 리다이렉트 시키기 위해선, 해당 샵이 2번 엔드포인트로 접근했을 때를 재현해주면 된다. 설치 과정을 이해하니 생각보다 쉽게 풀려버렸다.

사용 상태

위에서 말했듯, 자신이 사용하지 않는 앱에 접근할 떄는 설치하는 URL로 보내주어야 한다. 우리 서비스의 활성화 상태는 설치 여부와는 별개다. 설치하더라도, 내부에서 모달을 거쳐 사용을 시작하지 않으면 활성화 상태가 아니다. 따라서 설치하였더라도, 비활성화 상태인 유저가 존재할 수 있다.

A라는 유저가 브라우저 부스터 앱만 설치했다고 가정해보자. 이 유저는 어드민 페이지에서 알파플러스 앱의 서비스 중 하나인 리스트 디자이너에 접근하려고 했다. 우리는 이 유저를 “알파플러스 설치 링크”로 보내주어야 한다. 반면 B라는 유저는 브라우저 부스터와 알파 플러스 앱을 모두 설치했다. 이 유저도 리스트 디자이너에 접근하려고 한다. B는 앱 설치 링크로 보내주어선 안된다. 이미 설치를 한 상태기 떄문에, 리스트 디자이너 서비스를 활성화하는 플로우로 유도해야 한다.

그렇다면, 프론트에서 이 분기를 어떻게 처리할 수 있을까? 클릭한 유저가 앱을 설치했는지 안했는지를 알아야 한다. 기존에는 설치한 앱을 계정 수준에서만 알면 되겠다고 생각했었다. 샵이 어떤 앱들읋 설치하였는지 를 알아야 위에서 설명한 분기를 처리할 수 있다. 이는 활성화 여부로는 처리할 수 없는 부분이다.

따라서 로그인 할 때, 프론트에게 전달하는 데이터에 각 샵이 설치한 앱들을 포함하도록 변경했다. 가면 갈수록 문제다.

502

앱 설치할 때 502의 원인을 찾았다! 샵의 메인 테마를 불러올 때 못찾아서 발생하는 원인이었다. 아마 테스트를 위한 샵을 만들었을 때, 아직 메인 테마를 설정하지 않은 샵들은 메인테마가 없어서 생기는 문제였던듯 하다. 그래서 테스트 서버에서만 발생하고 있었던 것 같다. 예외처리 추가하니 아주 잘된다!

회고

하나를 처리하면 2개가 생겨나는 QA