はじめに

Shopifyの公式ライブラリを使って、認証認可を行うときにエラーがでたので今回はエラーとその対処法について書いていこうと思います。

ちなみにShopifyの公式ライブラリの他のエラーについても記事にしているのでよろしければご覧ください。

@shopify/shopify-api: Shopify.Context.initialize()がundefinedになる

この記事の対象者

Shopifyの公式ライブラリ「@shopify/shopify-api」を使っている人
Shopifyの認証認可で躓いている人

解決法だけ知りたい人へ

beginAuth()に渡すshopの引数をURLではなく、ドメイン名にする。

// 以下は動かない
// const shop = "[https://test-theme-jp.myshopify.com/](https://development-test-theme-jp.myshopify.com/)"

// ドメイン名で保存する
const shop = "[test-theme-jp.myshopify.com](https://development-test-theme-jp.myshopify.com/)"

実行環境

OS：Windows 11 Home 21H2
言語
- Node.js
  - version: 16.11.1
- npm
  - version: 8.0.0
使用しているライブラリ・フレームワーク
- Express
  - version: 4.18.1
- @shopify/shopify-api (shopify-api-node Shopify公式のライブラリ)
  - version: ^5.0.1

前提知識

shopify/shopify-apiとは？

Shopifyが提供するNode.js製のライブラリ。
Shopify Appのインストール時に発生するOAuth認証のフローを抽象化し、自分で一から実装するよりも短く、安全にOAuth認証～アクセストークン取得を実装することができる。

beginAuth()について

概要

OAuth認証を始めるときに呼び出す関数。認証認可画面に遷移し、ユーザが認可を終えたあと、引数に渡したコールバックURLに認可コードが送られる。

引数

request: HTTPリクエスト
response: HTTPレスポンス
shop: ストアのドメイン名
redirectPath: アプリ管理画面で指定したコールバックURL
isOnline: オンラインセッションかオフラインセッションかをbooleanで判定

戻り値

認証・認可画面へのURL

エラーの詳細

やりたかったこと

Shopifyが提供するAdmin APIへのアクセストークンを取得する
- ユーザーが遷移する認証認可のURLを生成したい。
- このドキュメントで、認証認可のURLを生成するbeiginAuth()を実行してユーザーを認証画面にリダイレクトしたい。

発生したエラー（上手くいかなかったこと）

beginAuth()を実行すると、Received Invalid shop argumentというエラーが発生した。
- shopに渡している値が正しくないと怒られる。
- 公式ドキュメントでは、shopの値を環境変数で管理してそれを読み取ってbeginAuth()に渡しており、自分も同じように実装した。
  - Expressで実装しています。

コード例

import dotenv from 'dotenv'

dotenv.config()

// 環境変数の読み取り
const { API_KEY, API_SECRET_KEY, SCOPES, SHOP, HOST, HOST_SCHEME } = process.env;

/*       途中の処理は割愛        */

router.get('/login', async(req, res) => {
    console.log(SHOP)
    let authRoute = await Shopify.Auth.beginAuth(
        req,
        res,
				// ここで渡している値が正しくないと怒られる 
        SHOP,
        '/shopify/auth/callback',
        false,
      );
      return res.redirect(authRoute);
})

調査

1 環境変数が読み取れるかをConosoleで確認する

環境変数で取得したSHOPの中身をbeginAuth()の直前で確認する。ここでundefinedになっていないかを確認。
Consoleで確認したところ、https://test-theme-jp.myshopify.com/ だった。

2 公式ドキュメントを読み直す

公式ドキュメントを読み直した。環境変数を設定するページではSHOPにdev store urlを保存すると書いてあった。

引用元：https://github.com/Shopify/shopify-api-node/blob/main/docs/getting_started.md#set-up-environment
ただ、beginAuth()の引数について解説するページでは、urlではなくドメイン名を渡すように書いてあった。

調査結果、エラーの原因

すごいややこしいが、beginAuth()に渡すshop名はドメイン名でないといけない。
- 環境変数の方にはurlと書いてあったので自分はそっちを保存していた。
- 公式ドキュメント分かりづらい。。

エラーの解決法

環境変数でshopにストアのURLを保存するときは、ドメイン名で保存すれば良い
動かない
- https://test-theme-jp.myshopify.com/
- https://　スキーマが含まれていると動かない
動く
- test-theme-jp.myshopify.com
- ドメイン名だとちゃんと動く

おわりに

ちゃんとライブラリが用意している関数やクラスなどの仕様を見ておくことが大事だと改めて痛感しました。

とはいえ、あの記述の仕方だと勘違いしてしまうので修正してほしいですね。。

【参考にしたサイト・動画等】

公式ドキュメント　環境変数のセットアップ
shopify-api-node/getting_started.md at main · Shopify/shopify-api-node
公式ドキュメント　beginAuth()の引数について
shopify-api-node/oauth.md at main · Shopify/shopify-api-node
このライブラリに関する他のエラー及び解決法
@shopify/shopify-api: Shopify.Context.initialize()がundefinedになる