FROM CACHE - jp_header

Re: カスタムアプリにpostをしたい

解決済

カスタムアプリにpostをしたい

nomin
Shopify Partner
32 5 4

会員情報の項目の追加と更新のできるカスタムアプリを作成しているものです。
デフォルトでは、会員情報の項目の追加、更新などはできないため(メモを除く)
自作で作ることにしました。

私の考えている手順としては、カスタムアプリ側(remix)でテーマ(liquid)からのリクエストを監視し、受け取った値をadmin apiにリクエストするという流れです。

 

調査タスクとしては下記
 1.カスタムアプリからadmin api(customerUpdate)にpostしてデータが更新されることを確認する

2.テーマからカスタムアプリにpostして、データが受け取れることを確認する。

3.1と2を結合する


それで、今回の本題なのですが一応1の実装は対応済みで、2の方で詰まってまして
カスタムアプリへのpostってそもそも可能なのでしょうか?
ドキュメントを漁っているのですが、なかなか見つからず、、

また、他の方法(公開アプリは使用しな)とかありましたら、ご教授いただけたらです。

1 件の受理された解決策

Qcoltd
Shopify Partner
1059 435 427

成功

@nomin 様

 

興味があり調査してみました。

※専門家ではないため、より詳しい方からの回答をお待ちいただいた方が良いかもしれません。

 

カスタムアプリへのpostってそもそも可能なのでしょうか?

可能かと思います。

 

下記のチュートリアルをベースにされていると思いますので、その前提で回答いたします。

https://shopify.dev/docs/apps/getting-started/create

 

プロジェクトディレクトの中の /app/routes/ ディレクトリの直下に、例えば、text.jsxというファイルを作ります。

 

test.jsxの内容を下記のようにします。

/** @typedef {import("@remix-run/node").ActionArgs} ActionArgs */

import { json } from "@remix-run/node";
import { Form, useActionData } from "@remix-run/react";

export 
/**
  * @param {request} ActionArgs
  * @returns {FunctionResult}
*/
async function action({ request }) {
  const body = await request.formData();
  const name = body.get("visitorsName");
  return json({ message: `Hello, ${name}` });
}

export default function Test() {
    const data = /** @type {action} */ useActionData();
    return (
      <Form method="post">
        <p>
          <label>
            What is your name?
            <input type="text" name="visitorsName" />
          </label>
        </p>
        <p>{data ? data.message : "Waiting..."}</p>
      </Form>
    );
  }

 このコードはRemixのチュートリアルから拝借して少し調整したものです。

https://remix.run/docs/en/main/hooks/use-action-data

 

 

そうしましたら、

npm run dev を実行し、

パートナーダッシュボードのアプリ管理より、

今回作成したカスタムアプリの設定画面にアクセスします。

メニューから「アプリ設定」にアクセスし、

アプリURLを取得します。

 

取得したアプリURLにtestとつけアクセスします。
URLは下記のようになるはずです。

https://xxxxxxxxxx-xxxxxxx-xxxxxxxxx.trycloudflare.com/test

 

そうしますと、

下図のような画面が表示されるはずです。

screenshot_20230807_02.png

"What is your name?" に、例えば "hoge" と入れて、Enterを押せば、そのデータが自分自身にPOSTされます。

すると、"Waiting..." の箇所に、"Hello, hoge" と表示されるはずです。

 

あとは、最初に貼ったコードをご希望の形になるように編集いただけば、

目的を達成できるのではないかと思います。

 

なお、顧客自身に会員情報を変更させることについては、

下記のアプリでも実現できます。

https://apps.shopify.com/customr?locale=ja

 

ご予算に余裕があればご検討いただいても良いかもしれません。

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

10件の返信10

ogasawarakyohei
Shopify Partner
114 44 41

・会員情報の項目の追加、更新をしたい

・公開アプリは使用しない

 

ということはわかったのですが、追加でいくつか確認させてください。

 

・会員情報の項目の追加、更新とは具体的にどのようなことをしたいのでしょうか?

(Customerの◯◯というデータを更新したいなど)

・また、どのページでそれを行う想定ですか?

(チェックアウトページで行う想定、など)

小笠原 京平 | 株式会社Tsun | RuffRuff アプリ
・私の回答が役に立ったら、いいね! ボタンをクリックして教えてください!
Shopify 開発で役に立つ情報を発信していますので、テックブログおすすめ Shopifyアプリ もぜひご参照ください。
nomin
Shopify Partner
32 5 4

回答遅くなりました。
顧客情報の名前やメタフィールド(追加項目)などですね。
documentにあるcustomerUpdateを使用して更新する想定です。
https://shopify.dev/docs/api/storefront/2023-07/mutations/customerUpdate

その後調査しまして、対応方法は2つかなと思っています。
- proxyを経由してカスタムアプリからリクエストをする。
- アクセストークンを使用して直接admin apiを叩く(この場合セキュリティを自前で対応する必要がある)

アクセストークンを使用した場合は、get,post,putできるのは確認できましたが、セキュリティ的になしなので、proxyを使用したやり方でいこうとおもっています。
https://shopify.dev/docs/apps/online-store/app-proxies

で、質問に戻るのですがproxyを経由した場合でも、カスタムアプリを経由しますので、
remixを使用してapiサーバーを立てれれば、今回の質問の主題である「カスタムアプリにPost」が実現できるかなと考えております。(ここはまだ解決できていないです。)

 

 

app.get('/', (req, res) => {
  res.send('hello world')
})
app.post('/', (req, res) => {
  res.send('POST request to the homepage')
})

 

nodeだと上記のようにこのurlにリクエストを受け取ったら、この処理をするという書き方だと思うんですけど、remixで書いた場合は他の方からの回答にあったように、apps/routes直下のtext.tsxを作成してlodater(Get)とaction(post,put,etc..)を定義して、下記のようなカスタムアプリのurlにパス名を記載することでnodeでいうリクエストの待受状態だとおもっていたんですけど、どうもここがうまくいかず、、というのが現状の状況になります。

https://xxxxxxxxxx-xxxxxxx-xxxxxxxxx.trycloudflare.com/test


流れとしては下記のイメージです。
テーマ(proxy経由でリクエスト)→カスタムアプリ(remix)→admin api(update)

→テーマ(レスポンスを受け取る)

 



nomin
Shopify Partner
32 5 4

一旦主題の質問については自己解決できましたので、この質問を閉じます。ありがとうございました。

ogasawarakyohei
Shopify Partner
114 44 41

返信遅くなってすみません。

また、投稿エラーによって連投になってしまいました。

 

次の作業に入られているということですので、深掘りするのは申し訳ないのですが、テーマ側でフォームの修正 + Webhookで対応できそうな内容だなと思いました。

 

https://shopify.dev/docs/themes/customer-engagement/additional-customer-information

こちらにあるようにcustomer[note]以下に追加したい項目が保存されるようにフォームを修正する。

 

customer/create および customer/update イベントのWebhookをサブスクライブして、noteに入っている追加情報を元にCustomerを更新する。

 

Nominさんのやりたいことがこれで実現できるかわかりませんが、ご検討ください。

小笠原 京平 | 株式会社Tsun | RuffRuff アプリ
・私の回答が役に立ったら、いいね! ボタンをクリックして教えてください!
Shopify 開発で役に立つ情報を発信していますので、テックブログおすすめ Shopifyアプリ もぜひご参照ください。

Qcoltd
Shopify Partner
1059 435 427

成功

@nomin 様

 

興味があり調査してみました。

※専門家ではないため、より詳しい方からの回答をお待ちいただいた方が良いかもしれません。

 

カスタムアプリへのpostってそもそも可能なのでしょうか?

可能かと思います。

 

下記のチュートリアルをベースにされていると思いますので、その前提で回答いたします。

https://shopify.dev/docs/apps/getting-started/create

 

プロジェクトディレクトの中の /app/routes/ ディレクトリの直下に、例えば、text.jsxというファイルを作ります。

 

test.jsxの内容を下記のようにします。

/** @typedef {import("@remix-run/node").ActionArgs} ActionArgs */

import { json } from "@remix-run/node";
import { Form, useActionData } from "@remix-run/react";

export 
/**
  * @param {request} ActionArgs
  * @returns {FunctionResult}
*/
async function action({ request }) {
  const body = await request.formData();
  const name = body.get("visitorsName");
  return json({ message: `Hello, ${name}` });
}

export default function Test() {
    const data = /** @type {action} */ useActionData();
    return (
      <Form method="post">
        <p>
          <label>
            What is your name?
            <input type="text" name="visitorsName" />
          </label>
        </p>
        <p>{data ? data.message : "Waiting..."}</p>
      </Form>
    );
  }

 このコードはRemixのチュートリアルから拝借して少し調整したものです。

https://remix.run/docs/en/main/hooks/use-action-data

 

 

そうしましたら、

npm run dev を実行し、

パートナーダッシュボードのアプリ管理より、

今回作成したカスタムアプリの設定画面にアクセスします。

メニューから「アプリ設定」にアクセスし、

アプリURLを取得します。

 

取得したアプリURLにtestとつけアクセスします。
URLは下記のようになるはずです。

https://xxxxxxxxxx-xxxxxxx-xxxxxxxxx.trycloudflare.com/test

 

そうしますと、

下図のような画面が表示されるはずです。

screenshot_20230807_02.png

"What is your name?" に、例えば "hoge" と入れて、Enterを押せば、そのデータが自分自身にPOSTされます。

すると、"Waiting..." の箇所に、"Hello, hoge" と表示されるはずです。

 

あとは、最初に貼ったコードをご希望の形になるように編集いただけば、

目的を達成できるのではないかと思います。

 

なお、顧客自身に会員情報を変更させることについては、

下記のアプリでも実現できます。

https://apps.shopify.com/customr?locale=ja

 

ご予算に余裕があればご検討いただいても良いかもしれません。

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
nomin
Shopify Partner
32 5 4

こちらの方法でpostできていなかったのですが、問題は開発環境のアプリURLは随時変わるようでして、アプリURLを変更したらこちらのやり方でPOSTできました。
セキュリティの対応が残ってはいますが、主題の質問に関しては解決できましたので、こちらの質問を閉じさせていただきます。
ご回答ありがとうございました。

ogasawarakyohei
Shopify Partner
114 44 41

テーマからカスタムアプリにpostして、データが受け取れることを確認する。

 

テーマからpostできるということは公開されたエンドポイントを持つカスタムアプリを作る想定でしょうか?

認証フローを用意するのであれば問題ありませんが、基本的にはおすすめしません。

(認証がなかった場合、カスタムアプリのURLがわかってしまえば会員情報の更新が誰でも可能になってしまうため)

 

また、カスタムアプリである必要があるのかもちょっと判別つかないので、もしよろしければ、

・会員情報のどの情報を変更・追加するのか

・テーマからカスタムアプリを呼び出すのはどのページか

を教えていただけますか?

小笠原 京平 | 株式会社Tsun | RuffRuff アプリ
・私の回答が役に立ったら、いいね! ボタンをクリックして教えてください!
Shopify 開発で役に立つ情報を発信していますので、テックブログおすすめ Shopifyアプリ もぜひご参照ください。

ogasawarakyohei
Shopify Partner
114 44 41

テーマからカスタムアプリにpostして、データが受け取れることを確認する。

 

テーマからカスタムアプリにpostするということは公開エンドポイントを用意する想定でしょうか?

認証フローを用意しないとカスタムアプリのURLを知っている場合に誰でも会員情報を変更できてしまいますので、基本的にはおすすめできないです。

 

カスタムアプリを用意しなくても、テーマ自体の編集もしくはテーマ拡張機能を用意するだけでも要件を満たせる可能性がありますので、よろしければ、

・会員情報のどの項目を追加、変更したいのか

・どのページで追加、変更を行うのか

を教えていただけますか?

小笠原 京平 | 株式会社Tsun | RuffRuff アプリ
・私の回答が役に立ったら、いいね! ボタンをクリックして教えてください!
Shopify 開発で役に立つ情報を発信していますので、テックブログおすすめ Shopifyアプリ もぜひご参照ください。

ogasawarakyohei
Shopify Partner
114 44 41

 

> テーマからカスタムアプリにpostして、データが受け取れることを確認する。

 

テーマからカスタムアプリにpostするということは公開エンドポイントを用意する想定でしょうか?

認証フローを用意しないとカスタムアプリのURLを知っている場合に誰でも会員情報を変更できてしまいますので、基本的にはおすすめできないです。

 

カスタムアプリを用意しなくても、テーマ自体の編集もしくはテーマ拡張機能を用意するだけでも要件を満たせる可能性がありますので、よろしければ、どのページで追加、変更を行うのかなどの詳細な要件を教えていただけますか?

小笠原 京平 | 株式会社Tsun | RuffRuff アプリ
・私の回答が役に立ったら、いいね! ボタンをクリックして教えてください!
Shopify 開発で役に立つ情報を発信していますので、テックブログおすすめ Shopifyアプリ もぜひご参照ください。
nomin
Shopify Partner
32 5 4

回答ありがとうございます。
そうですよね。。そこは私も懸念しており、カスタムアプリのエンドポイントを知っていると、第三者に変更されてしまう可能性がありますので、JWT認証などを考えておりました。
一応前提として、ラーニングコストはかけれないので有料の公開アプリは使用しない想定です。
対応ページについては下記になります。
- 会員登録

 - 性別

 - 電話番号

 - メールマガジンを受け取るかどうか

- 会員情報変更

 - 氏名

 - 性別

 - 電話番号

 - メールマガジンを受け取るかどうか

- メールアドレス変更