api.channel.io API 가져오기 에러 해결 - plugin key

잘만 되던 동아리 웹사이트가 갑자기 POST 호출 중에 아래와 같은 403 forbidden 오류가 발생하며 동작하지 않았다. 

{type: "constraintUrlError", status: 403, errors: [{message: "this url is constraint"}],…}
errors : [{message: "this url is constraint"}]
language : "ko"
status : 403
type : "constraintUrlError"

constraintUrlError에 대해서 검색도 해봤지만 마땅한 답이 나오지 않았다. 그런데 역시, 오류를 자세히 들여다 봐야한다. 오류에 아래와 같은 주소가 있었다. 

https://api.channel.io/front/v6/elastic/plugins/{pluginKey}/boot 403 (Forbidden)

channel.io라는 곳에서 인증 오류가 난 것인데, 사실 나는 이때까지만 해도 동아리 웹사이트에서 제공하고 있는 채널톡을 떠올리지도 못했다. 검색해보니 channel.io는 플러그인이고 채널톡에서 제공받아 사용할 수 있다는 것을 확인하고 나서야 요즘 사이트 들어갈 때마다 채널톡 아이콘이 뜨고 있지 않았음을 떠올릴 수 있었다.

 

채널톡 연동 중 오류가 난 것임을 확인하고, plugin-key가 현재 일치하는 지 확인해봤는데, pulginkey가 재발급 되었던 것이었다.

 

바뀐 키를 보는 방법은 아래와 같다.

채널톡에서 제공하는 동아리 관리 페이지에 접속한다.

일반설정 > 버튼 설치 및 설정 > 채널톡 버튼 설치 에서 plugin key 확인이 가능하고

사용하는 코드는 <기본 자바스크립트>에서 복사할 수 있다.

 

복사한 코드를 index.html에 넣어주면 된다.

<script>
      (function () {
        var w = window;
        if (w.ChannelIO) {
          return w.console.error("ChannelIO script included twice.");
        }
        var ch = function () {
          ch.c(arguments);
        };
        ch.q = [];
        ch.c = function (args) {
          ch.q.push(args);
        };
        w.ChannelIO = ch;
        function l() {
          if (w.ChannelIOInitialized) {
            return;
          }
          w.ChannelIOInitialized = true;
          var s = document.createElement("script");
          s.type = "text/javascript";
          s.async = true;
          s.src = "https://cdn.channel.io/plugin/ch-plugin-web.js";
          var x = document.getElementsByTagName("script")[0];
          if (x.parentNode) {
            x.parentNode.insertBefore(s, x);
          }
        }
        if (document.readyState === "complete") {
          l();
        } else {
          w.addEventListener("DOMContentLoaded", l);
          w.addEventListener("load", l);
        }
      })();

      ChannelIO("boot", {
        pluginKey: "발급받은 플러그인 키",
      });
    </script>

 

플러그인 키를 다시 올바르게 저장하니 오류도 사라지고 잘 동작하는 것을 확인했다.

---

처음에는 채널톡과 관련된 오류라는 생각도 못했기 때문에 API 연동하는 부분이나 firebase 연동 코드 등 관련없는 코드만 검토하며 엄청 삽질을 했다... 앞으로 에러가 났을 때 꼼꼼히 확인하고 에러를 통해 최대한 많은 힌트를 얻어야 겠다.