如何在NextAuth的IdentityServer4Provider中设置用户名和密码？

核心前提说明 #

你需要传入固定/用户输入的用户名密码直接完成认证的需求，对应的是 OAuth 2.0 协议中的资源所有者密码凭证流（ROPC）。该模式已在 OAuth 2.1 规范中被废弃，仅适用于完全可控的第一方内部应用场景，公网应用、第三方接入场景不建议使用。

默认提供的 identity-server4 Provider 是基于授权码+PKCE流程实现的，本身设计为跳转至IdentityServer4官方登录页完成账号密码校验，因此没有预留username、password配置字段，需要自定义覆盖部分逻辑实现需求。

现有配置错误修正 #

你当前代码中的issuer字段填写错误，官方Provider会基于该字段拼接OpenID Connect发现文档地址，正确值应为IdentityServer4服务的根地址，示例中应为https://localhost:4445，而非token端点路径。

实现步骤 #

• 先调整IdentityServer4侧的客户端配置
  • 给对应客户端添加password授权类型
  • 将你需要申请的openid profile email api phone offline_access等scope加入客户端的允许scope列表
  • 如果需要使用刷新令牌，开启客户端的AllowOfflineAccess配置
• 覆盖NextAuth中IdentityServer4 Provider的默认逻辑，自定义token请求规则，注入用户名密码参数
• 配置自定义登录页，用于收集用户输入的用户名、密码（默认登录页为跳转模式，无法收集账号密码参数）

完整配置示例 #

NextAuth 核心配置 #

import NextAuth from "next-auth"
import IdentityServer4Provider from "next-auth/providers/identity-server4";

export default NextAuth({
  providers: [
    IdentityServer4Provider({
      id: "identity-server4",
      name: "IdentityServer4",
      issuer: "https://localhost:4445",
      clientId: "你的实际clientId",
      clientSecret: "你的实际clientSecret",
      authorization: { params: { scope: "openid profile email api phone offline_access" } },
      // 关闭授权码流默认的PKCE、state校验，ROPC流不需要该类校验
      checks: [],
      // 自定义token端点请求逻辑
      token: {
        url: "https://localhost:4445/connect/token",
        async request(context) {
          // 从登录请求参数中获取传入的用户名、密码
          const { username, password } = context.params;
          // 构造ROPC流要求的表单参数
          const tokenRequestParams = new URLSearchParams({
            grant_type: "password",
            client_id: context.provider.clientId,
            client_secret: context.provider.clientSecret,
            username,
            password,
            scope: context.provider.authorization.params.scope
          });

          const tokenResponse = await fetch("https://localhost:4445/connect/token", {
            method: "POST",
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            },
            body: tokenRequestParams
          });

          const tokenResult = await tokenResponse.json();
          if (!tokenResponse.ok) {
            throw new Error(tokenResult.error_description || "身份认证失败");
          }

          return {
            tokens: tokenResult
          }
        }
      },
      // 用户信息解析逻辑，可根据IS4返回的claim自行扩展字段
      profile(profile) {
        return {
          id: profile.sub,
          name: profile.name,
          email: profile.email,
          image: null
        }
      }
    })
  ],
  // 指定自定义登录页路径
  pages: {
    signIn: "/login"
  }
})

自定义登录页示例（Pages Router路径为pages/login.jsx） #

import { useState } from "react";
import { signIn } from "next-auth/react";

export default function CustomLoginPage() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [loginError, setLoginError] = useState("");

  const handleLoginSubmit = async (e) => {
    e.preventDefault();
    setLoginError("");
    const signInResult = await signIn("identity-server4", {
      username,
      password,
      redirect: false,
      callbackUrl: "/"
    });

    if (signInResult?.error) {
      setLoginError("用户名或密码错误，请重试");
      return;
    }
    if (signInResult?.ok) {
      window.location.href = signInResult.url || "/";
    }
  };

  return (
    <div style={{ maxWidth: "400px", margin: "100px auto" }}>
      <h1>系统登录</h1>
      {loginError && <p style={{ color: "red" }}>{loginError}</p>}
      <form onSubmit={handleLoginSubmit}>
        <div style={{ marginBottom: "16px" }}>
          <label style={{ display: "block", marginBottom: "4px" }}>用户名</label>
          <input
            type="text"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            required
            style={{ width: "100%", padding: "8px" }}
          />
        </div>
        <div style={{ marginBottom: "16px" }}>
          <label style={{ display: "block", marginBottom: "4px" }}>密码</label>
          <input
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            required
            style={{ width: "100%", padding: "8px" }}
          />
        </div>
        <button type="submit" style={{ width: "100%", padding: "10px" }}>登录</button>
      </form>
    </div>
  )
}

替代实现方案 #

如果不需要复用OAuth Provider的内置逻辑，也可以直接使用NextAuth的Credentials Provider，在authorize方法中自行实现请求IdentityServer4 token端点、校验用户信息的逻辑，灵活度更高，适合定制化需求多的场景。

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