Gyazoに画像をアップロードするnpmパッケージを作った

一応公式?のgyazo-apiパッケージがありますが更新止まってて型定義も無さそうなので自分が使いやすいようにGyazo API Docsを元にTypeScriptで書き直しました。
あと折角なのでnpmの学習も兼ねてパッケージとして公開しました。

wrap-gyazo

npm i wrap-gyazo

• リポジトリ

はじめに

Gyazo Applicationsでアプリを登録してください。

ユーザーからの承認(任意)

ユーザーごとのアクセストークンがいらない場合、この項目はスキップしてください。

0 . Gyazo Applicationsでclient_id, secret_id,Callback URLを取得します。
1 . 以下のコードで承認用リンクを生成します。

import {GyazoAdmin} from 'wrap-gyazo';
const gyazoAdmin = new GyazoAdmin({
  clientId:"***************",
  redirectUri:"***************",
  clientSecret:"***************"
});
const authUrl = gyazoAdmin.makeAuthorizeURL();
/**
 * authUrl = {url:string,state:string}
 */

CSRF対策としてstateを使うことをGyazo APIは推奨しています。
stateの生成にはuuidv4を使用しています。

1. (2) ユーザーに生成したリンクをクリックさせます。

   1. Callback URLのクエリパラメータに"code"と"state"が渡されるので取得します。
   2. stateが生成したものと一致するか確認します。
   3. 以下のコードでcodeからアクセストークンを取得します。

   const accessToken =  await gyazoAdmin.getAccessToken(code);
   

アップロード

準備

• 前の項目で取得したユーザー用のアクセストークンかGyazo Applicationsにある自分用アクセストークンを用意してください。
• 画像データを読み込んでおいてください(base64またはBuffer,Blob->base64変換は後述)。

Gyazoにアップロード

//base64
const uploadRes = await gyazoAdmin.uploadBase64(accessToken,base64);
//buffer
const uploadRes = await uploadBuffer(accessToken,imageData,"png")

※CORSポリシーで弾かれるのでブラウザから上のコードは実行できません。

File/Blob->Base64 変換(おまけ、ブラウザのみ)

import {readAsDataURL} from 'wrap-gyazo';

const base64 = await readAsDataURL(file);

おわりに

どちらかというとラッパーの実装よりnpmパッケージの作成に手こずりました。
とりあえずできて良かったです。

最後に参考にさせていただいたGyazo API Docsと先行パッケージgyazo-api様、「npmパッケージ公開の手順」のShinKano様に感謝します。
もし何かあればコメントや直接プルリクエストをお願いします。