간단한 TikTok 스크래핑 API 구축 🤖

TikTok(출시 예정!)을 중심으로 한 프로젝트의 일환으로 동영상 미디어를 가져올 방법이 필요했습니다. TikTok이 공식적으로 제공하는 가장 가까운 것은 그들의 oembed API 이지만 불행히도 여기에는 title , thumbnail_url 등과 같은 기본 정보만 포함됩니다. 하다. 그래서 이 정보를 검색할 다른 방법이 필요했습니다.

돈이 든다 SSR 패턴 활용 📦

많은 양의 트래픽을 처리하는 웹사이트로서 나는 그들이 일종의 SSR/클라이언트 측 수화(hydration)가 진행되고 있다는 것을 알고 있었습니다. 여기에는 일반적으로 <script> 태그 내부에 인라인된 개체의 클라이언트에 데이터를 전달하는 것이 포함되어 이 데이터로 구성 요소를 직접 채워 필요한 클라이언트 측 요청 수를 줄입니다. 예를 들어 python에서 이것은 을 통해 발생합니다.

그리고 보라! 모든 비디오에 대한 페이지 마크업과 함께 편리한 blob이 제공됩니다. TikTok 비디오 페이지( https://www.tiktok.com/:user/video/:id )를 방문하고 콘솔을 통해 SIGI_STATE 태그의 내용을 보면 이를 직접 확인할 수 있습니다.

JSON.parse(document.getElementById("SIGI_STATE").innerText);

이것을 알고 나는 Next.js을 사용하여 이 blob을 가져오고 직접 반환하는 간단한 핸들러를 만들었습니다.

서버 측 소품 신나게 & 데노 입장 🥣🦕

동영상 URL이 요청에 첨부된 경우(POST 본문 또는 매개변수를 통해) 간단한 처리기가 페이지의 콘텐츠를 가져올(스크래핑) 수 있습니다.

const response = await fetch(`https://tiktok.com/${video}`);
const html = await response.text();

그런 다음 deno 을 사용하여 이 원시 텍스트를 쿼리 가능한 jQuery와 유사한 API로 전환할 수 있습니다. 이는 스크립트 태그 내에서 서버 생성 blob의 콘텐츠를 가져오는 진입점을 제공합니다.

const $ = cheerio.load(html);
const appContext = $("#SIGI_STATE").text();

여기에서 이를 JSON으로 구문 분석하고 응답에 관련 데이터를 반환하기만 하면 됩니다( ItemModule ). 데이터는 현재 일부 고유 식별자Object.keys로 키가 지정되어 다음을 제거하는 데 도움이 됩니다.

const json = JSON.parse(appContext);
const key = Object.keys(json.ItemModule)[0];
const data = json.ItemModule[key];

return new Response(JSON.stringify({ ...data }), {
  headers: { 'Content-Type': 'application/json' },
  status: 200,
});

그리고 그게 다야! 이제 비디오에 대한 최신 미디어를 가져오고 직접 표시하도록 클라이언트 측 요청을 할 수 있습니다. 이것은 또한 이 미디어에 대한 참조를 저장하지 못하게 하는 TikTok의 CDN 만료를 우회합니다.

Side-note: comparing this to the output for one of the unofficial API options I came across, the data looks identical. So it's likely they're doing the same thing (but charging almost $200/mo for unlimited usage)!

어쨌든 이것은 깨지기 쉬우며 그들이 스크립트 태그, 속도 제한 등의 이름을 변경하기로 결정하면 깨질 수 있습니다. 그러나 이것은 자신의 프로젝트에 대한 인스턴스를 가동하는 것이 얼마나 쉬운지 보여줍니다. 그리고 충분한 봇 트래픽이 있으면 TikTok은 우리가 긁어 모으는 대신 이를 수행하는 공개 API를 만들 것입니다! 😇