我正在将 NextJs 与 Auth.Js 版本 5 结合使用,如何在登录时检索 access_token 以便进行进一步的 API 调用

问题描述 投票:0回答:1

在 NextAuth.Js v5 中使用自定义凭据提供程序成功登录后,获取 access_token 进行进一步 API 调用将失败。仅返回令牌的子集,显然是为了提高安全性。但是如果没有 access_token,我该如何进行在标头中需要它的 API 调用呢?我使用的是版本 5 而不是 4

v5 文档指出使用回调将 access_token 存储在会话中。这是 auth.ts,console.logs 不会在回调中输出访问令牌。

我使用此资源作为 v5 的进一步说明 文字

import type { NextAuthConfig } from 'next-auth';
import NextAuth from 'next-auth';
import CredentialsProvider from 'next-auth/providers/credentials';

const credentialsConfig = CredentialsProvider({
  name: 'Credentials',
  credentials: {
    username: {
      label: 'Username or Account Number',
    },
    password: {
      label: 'password',
      type: 'password',
    },
  },
  async authorize(credentials) {
    const postdata = {
      userName: credentials.username,
      password: credentials.password,
    };
    let base64encodedData = process.env.LOGIN_BASE64;

    const authResponse = await fetch(
      'https://my-login-endpoint.com',
      {
        method: 'POST',
        headers: {
          Authorization: `Basic ${base64encodedData}`,
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(postdata),
      },
    );

    if (!authResponse.ok) {
      return null;
    }

    const user = await authResponse.json();

    if (user) {
      console.log('USER', user); // access_token is displayed here ok!
      return user;
    }

    return null;
  },
});

const config = {
  providers: [credentialsConfig],
  trustHost: true,
  debug: process.env.NODE_ENV !== 'production',
  session: {
    strategy: 'jwt',
  },
  async session({ session, user, token }) {
      if (token.access_token) {
        session.access_token = token.access_token; // Put the provider's access token in the session so that we can access it client-side and server-side with `auth()`
      }
      console.log(`Auth Sess = ${JSON.stringify(session)}`); // Auth Sess = {"user":{},"expires":"2024-04-12T09:27:58.960Z"}
      console.log(`User = ${JSON.stringify(user)}`); // Undefined
      console.log(`Auth Tok = ${JSON.stringify(token)}`); // {"sub":"12345678-1234-4567-1234-123456789111","iat":yyyyyyyyyy,"exp":1712914043,"jti":"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"}

      return session;
    },
    async jwt({ token, user, account, profile, isNewUser }) {
      console.log(`Auth JWT Tok = ${JSON.stringify(token)}`); // {"sub":"12345678-1234-4567-1234-123456789111","iat":yyyyyyyyyy,"exp":1712914043,"jti":"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"}
      console.log(`USER JWT account = ${JSON.stringify(user)}`); // UNDEFINED
      console.log(`Router Auth JWT account = ${JSON.stringify(account)}`); // UNDEFINED

      if (account) {
        token.accessToken = account.access_token;
      }

      return token;
    },

    authorized({ auth, request: { nextUrl } }) {
      const { pathname } = nextUrl;
      if (pathname === '/middlewareProtected') return !!auth; // return by converting the auth session to a boolean
      return true;
    },
  },
} satisfies NextAuthConfig;

export const { handlers, auth, signIn, signOut } = NextAuth(config);

这是一个服务器页面

import { H3, UnauthorisedMessage } from '@repo/ui';
import { auth } from 'auth';
import React from 'react';

const Page = async () => {
  const session = await auth();

  if (!session || !session.user) {
    return <UnauthorisedMessage />;
  }
  return (
    <>
      <H3>Server page must be protected</H3>
      <p>{`${JSON.stringify(session)}`}</p>
    </>
  );
};

export default Page;
reactjs next.js access-token credentials next-auth
1个回答
0
投票

您可以在服务器页面使用

getServerSession

import { getServerSession } from 'next-auth';
import { H3, UnauthorisedMessage } from '@repo/ui';
import { authOptions } from './path/to/your/authOptions';

const Page = async () => {
  const session = await getServerSession(authOptions);

  if (!session || !session.user) {
    return <UnauthorisedMessage />;
  }
  return (
    <>
      <H3>Server page must be protected</H3>
      <p>{`${JSON.stringify(session)}`}</p>
    </>
  );
};

export default Page;

显然你必须将

./path/to/your/authOptions
替换为 authOptions 的路径。请查看此处以获取更多文档。

© www.soinside.com 2019 - 2024. All rights reserved.