前の記事でFirebase Dynamic Linksを使ったURL短縮を書いたけど、
ドメインを自分で設定するのでURLバンされる気してbitly APIも試してみた。
その時の備忘録。

TwitterのURLバンについては、もぎゃさんのCrieit記事を参照

準備

bitly アカウントの作成

Bitly API Documentationにアクセスして作成。

メニューの「Manage App」を選択して、
「MANAGE MY APPS」を押すと、認証画面が出てくる

f:id:wannabe-jellyfish:20190714110346p:plain

ログインするとこんな感じ。

f:id:wannabe-jellyfish:20190714110547p:plain

パスワード変更

Gooogleアカウントで認証するとパスワードが未設定。
Access Tokenを生成するときにパスワードが必要なので設定する

パスワード変更は右上のハンバーガーメニューから。

f:id:wannabe-jellyfish:20190714110656p:plain

アカウントを選択。

f:id:wannabe-jellyfish:20190714110923p:plain

「Change Password」を選ぶ。

f:id:wannabe-jellyfish:20190714110944p:plain

パスワード変更画面が出てくるので、パスワードを変更。
CURRENT PASSORDは未設定なので、空欄でOK。

Access Tokenの生成

APIを利用するために、Access Tokenを発行する。

再度、右上のハンバーガーメニューから。
今度は「Generic Access Token」を選択

f:id:wannabe-jellyfish:20190714111307p:plain

さっき設定したパスワードを入力して、

f:id:wannabe-jellyfish:20190714111713p:plain

「GENERATE TOKEN」を押すと...

f:id:wannabe-jellyfish:20190714111758p:plain

Access Tokenが発行されるのでコピーする。

使ってみる

ソースコードはこんな感じ。
APIクライアントはaxiosを使ってます。必要に応じてnpm i -S axios。

import axios from "axios";

// 生成したbitlyのアクセストークン
const BITLY_ACCESS_TOKEN = process.env.BITLY_ACCESS_TOKEN || "";
export default class BitlyHelper {
  public async toShort(targetURL: string): Promise<string> {
    try {
      // bitly API v4のエンドポイント
      const endpoint = "https://api-ssl.bitly.com/v4";
      // URLを短縮するAPIのURL
      const url = `${endpoint}/shorten`;

      // リクエストヘッダのAuthorizationにAccess Tokenを設定
      const options = {
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${BITLY_ACCESS_TOKEN}`
        }
      };
      // リクエストするパラメタ
      const params = {
        long_url: targetURL
      };

      // POSTでリクエスト
      const res: any = await axios.post(url, params, options);

      // linkが短縮URL
      return res.data.link;
    } catch (error) {
      // エラーが発生したら、短縮前のURLを返す
      return targetURL;
    }
  }
}