import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node"; import { json } from "@remix-run/node"; import { StrictMode } from "react"; import { useLoaderData } from "@remix-run/react"; import App from "../App"; import { unauthenticated, authenticate } from "../shopify.server"; import { getSocialLoginConfigFromAdmin } from "../lib/shopify-metafields"; export const meta: MetaFunction = () => { return [ { title: "Social Login App" }, { name: "description", content: "Social Login Application" }, ]; }; export const loader = async ({ request }: LoaderFunctionArgs) => { const url = new URL(request.url); const platform = url.searchParams.get("platform"); const shop = url.searchParams.get("shop"); // 管理画面側の認証コールバック（admin認証が必要） if (!platform && !shop) { try { await authenticate.admin(request); return null; } catch (error) { console.error("管理画面認証エラー:", error); return new Response("管理画面の認証に失敗しました", { status: 401 }); } } // ソーシャルログインのコールバック処理 if ( platform && ["google", "line", "facebook", "twitter", "apple", "instagram", "tiktok"].includes(platform) ) { return handleSocialLoginCallback(request, platform); } // 通常のソーシャルログインページの場合 if (!shop) { // shopパラメータがない場合はデフォルトのストアを使用 const defaultShop = "itbc-dev.myshopify.com"; console.warn("Missing shop parameter, using default shop:", defaultShop); return json({ config: { redirectUri: "", facebook: { enabled: false, appId: "", appSecret: "" }, x: { enabled: false, appId: "", clientId: "", clientSecret: "" }, google: { enabled: false, clientId: "" }, line: { enabled: false, liffId: "", channelId: "", channelSecret: "" }, instagram: { enabled: false, appId: "", appSecret: "" }, apple: { enabled: false, clientId: "" }, tiktok: { enabled: false, clientKey: "", clientSecret: "" }, }, platform, shop: defaultShop, }); } try { const { admin } = await unauthenticated.admin(shop); const config = await getSocialLoginConfigFromAdmin(admin); return json({ config, platform, shop }); } catch (error) { console.error("Failed to load config:", error); // 設定の読み込みに失敗した場合はデフォルト設定を使用 const defaultConfig = { redirectUri: "", facebook: { enabled: false, appId: "", appSecret: "" }, x: { enabled: false, appId: "", clientId: "", clientSecret: "" }, google: { enabled: false, clientId: "" }, line: { enabled: false, liffId: "", channelId: "", channelSecret: "" }, instagram: { enabled: false, appId: "", appSecret: "" }, apple: { enabled: false, clientId: "" }, tiktok: { enabled: false, clientKey: "", clientSecret: "" }, }; return json({ config: defaultConfig, platform, shop }); } }; export const action = async (args: LoaderFunctionArgs) => { // POSTリクエストにも対応 return loader(args); }; export default function SocialIndex() { const data = useLoaderData(); // コールバック処理の場合や管理画面認証の場合はHTMLレスポンスが返されるため、そのまま返す if (!data || data instanceof Response) { return null; } const { config, platform, shop } = data; return ( ); } async function handleSocialLoginCallback(request: Request, platform: string) { return new Response( ` ${platform}認証完了

認証処理中...

しばらくお待ちください

`, { headers: { "Content-Type": "text/html", }, } ); }