javascript - 使用 Firebase 进行 Shopify 身份验证？

Question

我一直在关注this有关如何使用 Node、Nextjs 和 React 构建公共(public) Shopify 应用的教程。

一切都很顺利，但是我现在需要将一些应用程序数据存储在数据库中。为此，我选择了 Firestore。

我正在做的是，当用户通过他们的商店验证应用程序时，我使用 Next JS 服务器中的 Admin-SDK 将他们的商店和 accessToken 写入文档:

Note: I'm using the accessMode "offline" as I need a permanent access token so that my app can make Shopify API requests in the background. I also know that I should really encrypt the accessToken before storing it, however just trying to get the logic working first

server.use(
    createShopifyAuth({
        apiKey: SHOPIFY_API_KEY,
        secret: SHOPIFY_API_SECRET_KEY,
        scopes: ['read_products', 'write_products'],
        accessMode: "offline",
        async afterAuth(ctx) {
            const {shop, accessToken} = ctx.session;

            ctx.cookies.set('shopOrigin', shop, {
                httpOnly: false,
                secure: true,
                sameSite: 'none'
            });

            await getSubscriptionUrl(ctx, accessToken, shop);
            await db.collection('shops').doc(shop).set({
                name: shop,
                accessToken
            }, {merge: true});
        },
    }),
);

我还使用 Koa 中间件来验证对我的应用程序的任何请求，以确保它们来自 Shopify 应用程序

server.use(verifyRequest());

我现在想要做的是为我的应用添加一种从 Firebase 提取数据的方法。我在 /pages/api/firebase.js 中创建了一个 api 端点，它使用 shopOrigin cookie 来获取商店名称，然后提取该商店的数据。

export default async(req, res) => {
        const shop = req.cookies.shopOrigin;
        const doc = await db.collection('shops').doc(shop).get()
        res.status(200).json({success: true, data: doc.data()});
    }

我面临的问题是，用户可以简单地更改 cookie 值并为另一家商店提取数据。 verifyRequest 函数似乎不会检查调用它的 shopOrigin 名称是否来自调用它的商店。

有谁知道我如何验证这些请求，以便调用我的 API 的商店只能访问存储数据(通过 Next 服务器上的 admin-sdk)？

Answer 1

考虑到这一点，我可以使用自定义身份验证方法。

在 Next server.js 文件中，下面的代码使用商店名称创建自定义 token ，然后在 cookie 中设置该 token 。例如，它然后在商店集合中创建一个文档，并将文档 ID 作为商店名称。

async afterAuth(ctx) {
    const {shop, accessToken} = ctx.session;

    await getSubscriptionUrl(ctx, accessToken, shop);

    const customToken = await admin.auth().createCustomToken(shop)

    ctx.cookies.set('shopOrigin', shop, {
        httpOnly: false,
        secure: true,
        sameSite: 'none'
    });

    ctx.cookies.set('token', customToken, {
        httpOnly: false,
        secure: true,
        sameSite: 'none'
    });

    await db.collection('shops').doc(shop).set({
        domain: shop,
        token: cryptr.encrypt(accessToken),
    }, {merge: true});
}, 

在 React 应用中，初始化您的 Firebase 应用实例，然后在 index.js 中监听 authState 是否更改或使用 token 登录用户。

useEffect(() => {
    firebase.auth().onAuthStateChanged(user => {
        if(user) {
            setSignedIn(true)
        } else {
            firebase.auth().signInWithCustomToken(Cookies.get('token'));
        }
    })
},[])

然后在 Firebase 规则中根据需要设置您的权限

match /shops/{shop}/{documents=**} {
    allow read, write: if request.auth != null && request.auth.uid == shop
}