Next.js集成MoneyButton OAuth时handleAuthorizationResponse的调用问题

你之前的代码把两个完全独立的流程节点写在了同一个函数里：client.requestAuthorization()方法执行时会直接触发浏览器跳转至MoneyButton的授权确认页，属于会中断当前页面JS执行流的操作，写在它后面的所有代码永远不会被运行，这就是handleAuthorizationResponse完全没被调用的根本原因。

两个核心方法必须放在互不干扰的触发场景下执行，不能串在同一段同步执行流里：

• 用户主动触发授权的场景：仅将授权跳转逻辑绑定到登录按钮的点击事件上，不要混入回调处理的代码。
• 用户授权完成、被重定向回应用的场景：当浏览器URL中携带code和state参数回到应用时，在客户端环境执行handleAuthorizationResponse方法，SDK会自动解析URL参数、完成授权码交换访问令牌的流程，把凭证存入localStorage，实现跨会话的登录状态保持。

因为MoneyButton SDK依赖浏览器端的localStorageAPI，所有逻辑必须放在Next.js的客户端组件中运行，不能放在服务端渲染的流程里：

// app/auth/AuthFlow.js
'use client'
import { MoneyButtonClient } from '@moneybutton/api-client'
import { useEffect } from 'react'

// 统一初始化Client，避免重复实例化
const getMoneyButtonClient = () => {
  return new MoneyButtonClient('你的OAuth客户端标识')
}

export default function AuthFlow() {
  // 页面加载时检测是否为授权回调场景
  useEffect(() => {
    const client = getMoneyButtonClient()
    // 识别URL中是否存在授权回调的code、state参数
    if (window.location.search.includes('code=') && window.location.search.includes('state=')) {
      try {
        // 处理回调：解析参数、交换令牌、存入localStorage
        client.handleAuthorizationResponse()
        // 处理完成后再读取refreshToken，同步到你的应用状态或后端存储
        const refreshToken = client.getRefreshToken()
        // 清理URL中残留的code、state参数，避免刷新页面时重复触发处理
        window.history.replaceState({}, document.title, window.location.pathname)
      } catch (err) {
        console.error('授权回调处理失败：', err)
      }
    }
  }, [])

  // 触发授权的点击处理函数
  const triggerLogin = () => {
    const client = getMoneyButtonClient()
    // 执行跳转，该方法触发后页面将直接跳转到授权页，后续不要写其他逻辑
    client.requestAuthorization(
      'auth.user_identity:read',
      'http://localhost:3000' // 需和MoneyButton后台配置的回调地址完全一致
    )
  }

  return (
    <button onClick={triggerLogin}>
      用MoneyButton登录
    </button>
  )
}

注意：执行完handleAuthorizationResponse后，SDK已经自动将refreshToken写入内部状态和localStorage，不需要再手动调用setRefreshToken做重复设置。

MoneyButton的授权流程完全符合标准OAuth2.0授权码模式，将其作为自定义OAuth Provider接入NextAuth时，不需要手动调用SDK的回调处理逻辑，NextAuth会自动完成回调接收、令牌交换、会话持久化、令牌刷新的全流程，能大幅降低手动管理凭证的维护成本。

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