无法在 vercel 生产中验证 spotify

Posted 2023-04-15

【中文标题】无法在 vercel 生产中验证 spotify

【英文标题】：couldn't authenticate spotify in vercel production

【发布时间】：2022-01-12 05:21:58

【问题描述】：

我做了一个 Spotify 克隆，它有一个登录，主页。用户最初被定向到登录页面 (localhost:3000/login)，一旦用户单击登录按钮，他们就会被带到 spotify 身份验证回调 url (从 spotify 端，我们可以使用 google、facebook 或电子邮件等登录)，一旦用户已登录（成功通过身份验证），spotify 提供了一个令牌，用于检查用户是否从客户端进行了身份验证。如果成功，用户将被带到主页（其中包含所有音乐）。 spotify 仪表板接受重定向 url 进行身份验证，在我的例子中是 -> http://localhost:3000/api/auth/callback/spotify

此工作流程在本地工作和运行时完美运行 (localhost:3000)。

在 vercel 中托管时，

我在没有环境的 Vercel 中创建了一个项目

我将我的https://sp-app.vercel.app 域添加到我的环境中，并将 NEXTAUTH_URL 添加到我的环境中，还添加了 - NEXT_PUBLIC_CLIENT_SECRET、NEXT_PUBLIC_CLIENT_ID 和 JWT_SECRET

去发现仪表板并将重定向网址编辑为https://sp-app.vercel.app/api/auth/callback/spotify并保存

从 vercel 重新部署了应用程序（它给了我一个已部署的 url，但没关系）并单击域 --> sp-app.vercel.app

登录页面来了，一旦我点击登录按钮，它就会加载并停留在登录页面本身。它没有移动到我的主页，也没有进行身份验证，但同样的代码在本地运行良好。

要理解的代码： 登录按钮：

providers !== null && Object.values(providers).map((provider) => (
                <div key=provider.name>
                    <button onClick=()=>signIn(provider.id, callbackUrl:"/")
                        >Login with provider.name</button>
                </div>

export async function getServerSideProps()
    const providers = await getProviders(); //getProviders is imported from next-auth

return 
    props:
        providers,
    

中间件：

export async function middleware(req)
    const token = await getToken(req,secret:process.env.JWT_SECRET);

    const pathname = req.nextUrl;

    //Allow the request if,
    // (1) Its a request for next-auth session & provider fetching
    // (2) The token exists

    if(pathname.includes('/api/auth') || token)
        return NextResponse.next();
    

    //Redirect to login if no token or requesting a protected route
    if(!token && pathname !== "/login")
        return NextResponse.redirect("/login");
    

当我使用“网络”选项卡进行检查时，我得到了一个会话，它应该让我登录并重定向到主页，但它在 Vercel 部署中不起作用。

【问题讨论】：

浏览器的控制台和/或 Vercel 的日志中是否有任何错误？

@juliomalves 不

这可能会有所帮助：leerob.io/blog/spotify-api-nextjs，源代码中有一个工作示例

【参考方案1】：

您好，首先请确保您的 NEXTAUTH_URL 环境变量是正确的。还要检查重定向 URI（来自 Spotify 开发者仪表板）是否正确。

之后，将此secureCookie 代码添加到_middleware.js 文件中的getToken 函数中。所以这个函数最终应该是这样的：

const token = await getToken(
  req,
  secret: process.env.JWT_SECRET,
  secureCookie:
    process.env.NEXTAUTH_URL?.startsWith("https://") ??
    !!process.env.VERCEL_URL,
);

让我知道这是否有效。我有同样的问题，这对我有用。