webサイト(vue nuxt)でカラーミーショップ APIを利用

Question

前提

こんばんは。webサイト作成初心者です。
nuxt.js を利用して作成したwebサイト上で
外部ECサイト(カラーミーショップ)
のAPIを利用し自作web上に商品の一覧(写真、タイトル、値段)を載せたいと考えています。

該当ECサイトの開発者向け情報
https://developer.shop-pro.jp/docs/colorme-api
をみるとざっくり
1 OAuthアプリケーションの登録
2 必要なパラメータをつけて認可コードのurlを叩く
3 付与された認可コードがリダイレクトURIに返る
4 3で得た認可コードをアクセストークンに交換

という流れになるようで３までは開発者向け情報に沿って、
認可コードがリダイレクト先に付与されることを確認できたのですが
４のそのコードを使ってアクセストークンに交換し、
さらにトークンを保存しておき、それをつくって商品情報を取得するやり方が
わからず、うまく検索結果も得られず手が止まっています。
そもそもnuxt.jsを使ってこういったAPIのやり取りすることが普通なのかどうかも
わかっていません。

実現したいこと

リダイレクトURIが開かれたら、返ってきた認可コードとその他パラメータを入れ
アクセストークン取得のurlへリクエストをおくる
というフローをnuxt上でやる方法があれば
それがやりたいことになります。

iosのフロントエンドの経験しかなく
こうした外部APIを自前で使ってみるのは初めてなので
前提になる必要な知識についても自覚できていません。

発生している問題

nuxt Oauth アクセストークン等で調べて出てくる情報を
自分の環境に置き換えられない

Answer 1

スマホアプリやサーバーサイドと、ウェブのフロントには絶対に越えられない大きな違いがある。
ウェブのフロントでやってることはユーザー側から見えるので公開できないトークンを使うようなAPIは使えないことが多い。
フロントからAPIを使う時はそのAPIがフロントから使えるかの確認が必須。

サーバーサイドからなら問題ないので
NuxtならNuxtのサーバーサイドレンダリング辺りの機能を使えば可能かもしれない。