Next.js应用集成Xero登录按钮报错求助

问题 #

我正在将Xero集成至某款应用，前端采用Next.js实现。已按照Xero官方文档添加Xero认证脚本及带相关属性的登录按钮，代码如下：

import Head from 'next/head'
import Image from 'next/image'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
        <meta name="xero-client-id" content="clientID" />
        <meta name="xero-scopes" content="openid,profile,email" />
        <meta name="xero-redirect-uri" content="https://localhost:5001/Authorization/Callback" />
        <script src='https://edge.xero.com/platform/sso/xero-sso.js' defer></script> 
      </Head>
      <main >
        <div >
          <h1>Login page</h1>
          <div>
            <span data-xero-sso data-label="Sign In with Xero"></span> 
          </div>
        </div>
      </main>
    </>
  )
}

目前出现错误（截图：），需要协助修复。

解决方案 #

• 替换占位符Client ID：代码中<meta name="xero-client-id" content="clientID" />的clientID是占位符，必须替换为你在Xero开发者平台申请的真实客户端ID，这是最常见的错误原因。
• 验证重定向URI配置：
  1. 登录Xero开发者后台，找到你的应用
  2. 在"Authentication"页面的"Redirect URIs"列表中，确保添加了https://localhost:5001/Authorization/Callback，并且和代码中meta标签的内容完全一致（包括HTTPS协议、端口、路径）
• 启用本地HTTPS：Xero要求重定向URI必须是HTTPS协议，如果你本地Next.js服务默认是HTTP，需要配置HTTPS：
  • 可以使用next dev --experimental-https命令启动服务，或者自定义HTTPS服务器
  • 确保本地访问地址和重定向URI的协议一致
• 调整脚本加载逻辑：
  • 尝试移除脚本的defer属性，改为异步加载：<script src='https://edge.xero.com/platform/sso/xero-sso.js' async></script>
  • 或者将脚本放在<main>标签之后，确保DOM元素加载完成后脚本再执行
• 确认权限范围匹配：xero-scopes中的openid,profile,email是正确的基础范围，但如果后续需要更多API权限，需在Xero后台同步配置对应的范围

内容的提问来源于stack exchange，提问作者yasith rangana