Next.jsでSUZURI APIでOAuthするサンプルプロジェクトを作っている話

この記事はSUZURI Advent Calendar 2022の 18 日目です。 こんにちは、SUZURI でエンジニア 2 年目をやっている yukun です。 最近は業務でも私的なことでもやりたいことや、やるべきことが沢山ありそこそこ忙しい日々を送っています。

さて、みなさんはSUZURIの一部の API が開発者向けに公開されていることをご存知ですか？

SUZURI では画像からオリジナルグッズを作ったり、公開されている情報を取得する API を誰でも使うことが可能です。 できる事について詳しくは開発者向けドキュメントをごご覧ください。

https://suzuri.jp/developer

特に今年はこの API を活用したサービスの一つがとても人気になり、外部サービスとの API 連携の可能性を再認識しました。 私自身、絵が描けない一般ユーザとして SUZURI のエディタ画面でできない機能や簡単に誰でも絵が作れるサービスはとても魅力的に感じました。 気になった方はこちらで紹介しているのでご覧ください。 https://suzuri.jp/surisurikun/journals/2022-07-29-1659101778

API のサンプルプロジェクトを作ったきっかけ

ここからはだいぶエンジニア寄りの話になります。

SUZURI の API 連携には２種類の方法があり、1 つのアカウント(ショップ)に API 経由でアイテムを追加していくのと、SUZURI ユーザのそれぞれのアカウント(ショップ)に API 経由でアイテムを追加していく

前者は割と簡単に実装することができ、開発者ページから発行した Token を使って API に POST するだけです。 しかし、後者については OAuth での実装が必要となってくるため、慣れていない開発者からすると少しハードルが高いかもしれません。

そこで、私は後者に焦点を当て、SUZURI の OAuth を使った認証のサンプルプロジェクトを作り始めました。

技術スタックについて

実現したいアプリケーションにもよりますが、近年の JavaScript 界隈の盛り上がりや Canvas などブラウザでできることが広がったことから、Next.js を使ったプロジェクトにしました。

そして Next.js で OAuth を実現するために NextAuth.js を使いました。これは、Next.js 公式が出しているものではなく、OSS Community によるものですが、Next.js の API Routes を使っていい感じに OAuth をサーバーサイドとフロントエンドの実装をすることができます。 Twitter や Google などの有名どころは既存の Built-in Providers として提供されていますが、SUZURI については存在しなかったので Custom Provider として使えるようにしました。

また、データフェッチには話題の SWR を選んでみました。まだあまり機能を試せていないですが…

そのほか詳しい事については、はコードを読んでください!

GitHub リポジトリはこちらです。

https://github.com/yuta-hayashi/next-suzuri-starter

今後について

TypeScript を使っているのでレスポンスの型をつけたいことや、SWR のキャッシュを効果的に使えるようにするといったことがまだできていないので、これから少しずつブラッシュアップしていきます。

これらの機能ができたら正式版として、また記事を書こうかと思います。

面白い SUZURI API の活用方法があればぜひお試しください!

それでは、ごきげんよう〜

Tags