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

Question

我一直在关注这个关于如何建立使用节点，Nextjs公共Shopify应用和应对教程。

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

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

注意：我使用“离线”访问模式，因为我需要一个永久访问令牌，以便我的应用程序可以在后台发出 Shopify API 请求。我也知道我应该在存储之前真正加密 accessToken，但是只是试图让逻辑先工作

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 提取数据的方法。我在其中创建了一个 api 端点，/pages/api/firebase.js它使用shopOrigincookie 来获取商店名称，然后为该商店提取数据。

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 文件中，以下内容使用商店名称创建自定义令牌，然后在 cookie 中设置该令牌。例如，它然后在商店集合中创建一个文档，并将文档 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 是否更改或使用令牌登录用户。

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
}