쇼피파이 임베디드 앱

2024년 7월 4일 목요일

Today I Learned

날짜

2024년 7월 4일 목요일

내용

임베디드 앱은 다르다.

큰일났다. 인스타그램 댓글을 가져오는 스프린트가 다 끝나고, 검수만 남아있었다. 무려 10번의 요청 끝에 렙틸리언 에게 앱 허가를 받아냈는데, 쇼피파이가 복병이었다. 임베디드 앱은 우리가 몰랐던 규칙이 있었다. 바로 shopify app birdge를 사용해야 한다는 것. 이걸 이용해, 사용자의 세션 토큰을 검증해야 한단다. 우린 전혀 쓰지 않는데… 뭔지도 모르겠고 어떻게 해결해야할 지도 몰랐다.

기존대로라면, 정해진 검증이 끝나면 우리가 설정한 곳으로 유저를 리다이렉트 시킨다. 유저는 아이프레임 내에 우리가 구현한 화면을 볼 수 있게된다. 근데, 앱 브릿지로 검증할 때 앱 설정에서 입력한 URL과 우리가 이동시키는 URL이 일치해야 한다. 말하면서도 어렵긴한데… 풀어서 설명하자면

기존 플로우

  1. 우리 앱을 사용하기 위한 검증을 마쳤다.
  2. 인스타그램 코멘트 어드민 페이지로 이동시킨다.

추가된(그래서 문제가 발생한) 플로우

  1. 우리 앱을 사용하기 위한 검증을 마쳤다.
  2. 사실 검증이 하나 추가됐다.
  3. 이 검증에서 URL은 인스타그램 코멘트 어드민 페이지(프론트 주소)다.
  4. 하지만 니들이 앱에서 등록한 바에 의하면, 앱 URL은 리뷰서버의 주소인데?
  5. 검증 실패!

상황이다. 오전 오후를 모두 날려버리며 고민해본 결과, 해결책을 찾았다.

  1. 기존대로 설치가 완료되면
  2. 원래는 서버가 어드민 페이지로 리다이렉트 시켰지만, 이젠 프론트의 새로운 엔드포인트로 리다이렉트시켜준다.
  3. 프론트는 받은걸 다시 그대로 서버의 또다른 URL로 보내준다.
  4. 서버는 받은걸로 다시 한번 검증하고, host 와 shop_platform_id 를 반환해준다.
  5. 반환받은 프론트는 여차저차 과정을 거쳐서 세션토큰을 만들어 서버에 보내준다.
  6. 서버는 토큰이 정상이면 True를 반환한다.
  7. 프론트는 True가 오면 어드민 페이지로 보내준다.

라는 복잡한 상황… 하지만 400 Bad Request가 뜬다. 세션 토큰 검증이 가장 첫 화면에서 실행되야 하는 건가.. 내일 더 봐야겠다.

회고

네이버는 답변을 주지 않았다. 너무해