Next-Auth - 自定义 OAuth 2.0 提供程序集成

如何解决Next-Auth - 自定义 OAuth 2.0 提供程序集成

我们有自己的 OAuth 2.0 实现，我正在使用 next-auth 连接并在我的 Next.js 应用中获取 jwt。

输出： 目前，我可以登录。但是，我在客户端获得 null 作为令牌。

我已实施的步骤：

• 在顶级添加了 next-auth Provider 组件。

    function MyApp({ Component,pageProps }) {
      return (
        <Provider
          options={{
            clientMaxAge: 0,keepAlive: 0,}}
          session={pageProps.session}>
          <Component {...pageProps} />
        </Provider>
      );
    }

• 文件：pages/api/auth/[...nextauth].js：

export default NextAuth({
  providers: [
    {
      id: "quot-test",name: "quot-test",type: "oauth",version: "2.0",scope: "openid email",state: true,protection: "state",params: { grant_type: "authorization_code" },idToken: true,authorizationUrl:
        "http://localhost:9000/oauth2/authorize?response_type=code",accessTokenUrl: "http://localhost:9000/oauth2/token",requestTokenUrl: "http://localhost:9000/oauth2/jwks",clientId: process.env.QUOT_ID,clientSecret: process.env.QUOT_SECRET,},],secret: process.env.SECRET,debug: true,session: {
    jwt: true,maxAge: 60 * 5,jwt: {
    secret: process.env.SECRET,encryption: false,callbacks: {
    async signin(user,account,profile) {
      console.log("user",user,profile);
      return true;
    },async jwt(token,profile,isNewUser) {
      console.log(token);
      console.log(user);
      console.log(account);
      console.log(profile);
      console.log(isNewUser);
      if (account.accessToken) {
        token.accessToken = account.accessToken;
      }
      return Promise.resolve(token);
    },async session(session,token) {
      console.log(session);
      console.log(token);
      return session;
    },});

这是第一个问题：没有回调被触发，终端上没有打印 console.log。我上面的配置似乎有问题？

• 添加了 signIn/ signOut 以在主页上使用身份验证服务登录。

import { signIn,signOut,useSession,getSession } from "next-auth/client";

export default function Home(){
  ...
  const [session,loading]  = useSession();
  console.log(session); // prints null after signin
  return(
  <button onClick={() =>signIn(null,{ callbackUrl: "http://localhost:3000/happy" })}>
    Sign 
  </button>
  ...

这是下一个问题：即使登录函数中的 callbackUrl 是到页面 '/happy'，我仍然被带到主页！

• 我在根目录中有 .env.local 文件，内容如下：

NEXTAUTH_URL=http://localhost:3000/

QUOTECH_ID=quot-test
QUOTECH_SECRET=[secret-from-authenticator-goes-here]
SECRET=[random-string-goes-here]

我错过了什么？为什么我被客户端应用程序重定向后会收到 null。上面的 [...nextauth].js 文件中的某些选项似乎被忽略了？

解决方法

自定义提供程序需要配置文件值，如果您更新它们应该可以工作。

{
  ...,profileUrl: string,profile: function,...
}

在文档中，您可以看到这些区域是必填字段。

profileUrl 应该是获取个人资料信息的个人资料链接 profile 是一个函数，您可以操纵此配置文件 url 返回以适合下一个身份验证配置文件模式或您的自定义配置文件模式。

示例；

{
 id: "quot-test",name: "quot-test",type: "oauth",version: "2.0",scope: "openid email",state: true,protection: "state",params: { grant_type: "authorization_code" },idToken: true,authorizationUrl: "http://localhost:9000/oauth2/authorize?response_type=code",accessTokenUrl: "http://localhost:9000/oauth2/token",requestTokenUrl: "http://localhost:9000/oauth2/jwks",profileUrl: "[ProfileURL]",profile(profile,tokens) {
  return {
          id: profile.id,name: profile.name,email: profile.email
         };
 },clientId: process.env.QUOT_ID,clientSecret: process.env.QUOT_SECRET,}