FROM CACHE - jp_header

カスタムアプリ(remix)で認証する際にsessonで認証する方法はありますか?

解決済

カスタムアプリ(remix)で認証する際にsessonで認証する方法はありますか?

nomin
Shopify Partner
32 5 4

前提条件

- テーマからproxy経由でカスタムアプリにリクエストする

- カスタムアプリのテンプレートはremix

- proxyから受け取るパラメータからセッション情報を取得して、下記のセッションで認証したい。※下記の値はダミー。

 

 

 

session: Session {
 id: 'hoge',
 shop: 'hoge',
 state: 'hoge',
 isOnline:'hoge',
 scope: ’hoge’,
 accessToken: 'hoge'
}

 

 

 

 

やりたいこと
nodeやruby、phpからリクエストする際は、セッション情報から認証できると思うんですけど(document)、remixがdocmumentに入っていないので、remixからsession認証が可能かどうか知りたいです。
デフォルト(カスタムアプリを作成して管理画面からリクエストした場合)だと、requestをshopify.authenticate.adminに渡して認証する形だと思うのですが、props見た感じsessionで認証できそうなメソッドが用意されていなかったので、お聞きしました。

詳しい方いましたら、ご回答いただけたら嬉しいです。

1 件の受理された解決策
テックギーク運営者
Shopify Partner
28 3 9

成功

アクセストークンを利用してREST API を使う方法は、記載いただいた方法であっております。ただ、エンドポイントが正しくないようです。

公式ドキュメント↓

https://shopify.dev/docs/api/admin/getting-started#rest-admin-api

 

> shopify.authenticateを使用して認証とリクエストをする

→ こちらのメソッドは、最新版のRemixフレームワークのものかと思います。

  Remixフレームワークは一通りチェックしていますが、細かい部分まで動作確認ができておらず、正確な回答にならない可能性があることをご承知いただければと思います。

 

remixを使ったShopifyアプリのテンプレートでは、 shopify.sessionStorageメソッドを使うことで、セッション情報をDBに保存、取得ができます。

このメソッドの使い方は確認できていませんが、今までの `@Shopify/shopify-app-express` モジュールでは、ストアドメイン(xxxx.myshopify.com)からセッション情報を取得するメソッドを使うことができました。

おそらく、同じ使い方ができるのではないかと思います。

取得したセッション情報をもとに、REST APIやGraphQL API にリクエストすることが可能になります。

元の投稿で解決策を見る

4件の返信4

テックギーク運営者
Shopify Partner
28 3 9

テーマからApp Proxyを経由してアプリにリクエストする場合、セッショントークンを利用する必要はありません。

代わりに、App Proxyから受け取るクエリパラメータのsignatureを SHA256 の HMAC認証する必要があります。

RyujiMorimoto_0-1692166916180.png

また、HMAC認証はご自身で開発が必要です。

その後、アクセストークンやセッション情報はご自身のDBに保存されているかと思いますので、そちらを使ってREST API, GraphQL API にリクエストします。

 

セッショントークンは、あくまでストア管理画面との認証を行う方式となっております。

ご参考になりましたら幸いです。

nomin
Shopify Partner
32 5 4

回答ありがとうございます。

また、HMAC認証はご自身で開発が必要です。




こちらは一応対応いたしました。

 

 

 

セッショントークンは、あくまでストア管理画面との認証を行う方式となっております。



ちょっと質問内容から逸れてしまうかもですが、アクセストークンやセッション情報からリクエストする方法はどこかのドキュメントに記載されていますでしょうか?
私が今把握しているリクエストの方法は下記の2つしかなくてですね、、
- ”X-Shopify-Access-Token”にAdmin APIのアクセストークンを追記してリクエストする

 

fetch("admin/etc...", {
      method: "POST",
      headers: {
        "X-Shopify-Access-Token": admin apiのアクセストークン,
        "Content-Type": "application/json",
      },
    })

 

 - shopify.authenticateを使用して認証とリクエストをする

 

export async function action({ request }) {
const { admin } = await authenticate.admin(request)
const res = await admin.graphql(UPDATE_USER, {variables: {...etc}})
  return res
}

 

 

テックギーク運営者
Shopify Partner
28 3 9

成功

アクセストークンを利用してREST API を使う方法は、記載いただいた方法であっております。ただ、エンドポイントが正しくないようです。

公式ドキュメント↓

https://shopify.dev/docs/api/admin/getting-started#rest-admin-api

 

> shopify.authenticateを使用して認証とリクエストをする

→ こちらのメソッドは、最新版のRemixフレームワークのものかと思います。

  Remixフレームワークは一通りチェックしていますが、細かい部分まで動作確認ができておらず、正確な回答にならない可能性があることをご承知いただければと思います。

 

remixを使ったShopifyアプリのテンプレートでは、 shopify.sessionStorageメソッドを使うことで、セッション情報をDBに保存、取得ができます。

このメソッドの使い方は確認できていませんが、今までの `@Shopify/shopify-app-express` モジュールでは、ストアドメイン(xxxx.myshopify.com)からセッション情報を取得するメソッドを使うことができました。

おそらく、同じ使い方ができるのではないかと思います。

取得したセッション情報をもとに、REST APIやGraphQL API にリクエストすることが可能になります。

テックギーク運営者
Shopify Partner
28 3 9

Remixフレームワーク(@Shopify/shopify-app-remix)で、AppProxyやCheckout Extensions経由で、REST API, GraphQL API を利用する方法を確認しました。

※ @Shopify/shopify-app-remix ver 1.1.0

import shopify from "~/shopify.server.js";

const { admin, session } = await shopify.unauthenticated.admin(shop);
// adminの使い方は同じ
const productCount = await admin.rest.resources.Product.count({ session });

これで埋め込みアプリ以外からも簡単にShopifyへリクエストを送れるようになります。