자격 증명

개요

자격 증명 제공자를 사용하면 사용자 이름과 비밀번호, 도메인, 이중 인증, 하드웨어 장치(예: YubiKey U2F / FIDO)와 같은 임의 자격 증명으로 로그인을 처리할 수 있습니다.

사용자를 인증해야 하는 기존 시스템이 있는 경우를 지원합니다.

이 방식으로 인증된 사용자는 데이터베이스에 저장되지 않습니다. 그리고 결과적으로 세션에 대해 JSON 웹 토큰이 활성화된 경우에만 자격 증명 제공자를 사용할 수 있다는 제약이 있습니다.

위험

자격 증명 기반 인증에 제공되는 기능은 비밀번호 사용을 막기 위해 의도적으로 제한됩니다. 이는 비밀번호와 관련된 고유한 보안 위험, 사용자 이름 및 비밀번호 지원과 관련된 추가 복잡성 때문입니다.

옵션

자격 증명 제공자는 기본 옵션 세트와 함께 제공됩니다.

자격 증명 제공자 옵션

자신의 사용 사례에 맞게 옵션을 재정의할 수 있습니다.

예시

사용자 이름과 비밀번호

자격 증명 제공자는 다른 제공자와 거의 유사합니다. HTTP POST로 제출된 자격 증명을 입력으로 받고 다음 중 하나를 반환하는 authorize() 처리기를 정의해야 한다는 점만 다릅니다.

자격 증명이 유효함을 나타내는 user 객체

이후에 객체를 거부하는 사용자 정의 signIn() 콜백이 설정되지 않았다면, 해당 객체는 JSON 웹 토큰에 저장되고 사용자가 로그인됩니다.

null을 반환하면 사용자에게 세부 정보를 확인하라는 오류가 표시됨
오류가 발생하면 사용자는 오류 메시지가 질의 매개변수로 포함되어 오류 페이지로 전송됨

자격 증명 제공자의 authorize() 메서드는 두 번째 매개변수로 요청 객체를 제공합니다. 다음 예시를 참고하세요.

pages/api/auth/[...nextauth].js
js
import CredentialsProvider from "next-auth/providers/credentials";
...
providers: [
  CredentialsProvider({
    // 로그인 양식에 표시할 이름 (예: '...로 로그인')
    name: "Credentials",
    // 자격 증명은 로그인 페이지에서 적절한 양식을 생성하는 데 사용됩니다.
    // 제출할 것으로 예상되는 필드를 지정할 수 있습니다.
    // 예: 도메인, 사용자 이름, 비밀번호, 2FA 토큰 등
    // 객체를 통해 HTML 속성을 <input> 태그로 전달할 수 있습니다.
    credentials: {
      username: { label: "Username", type: "text", placeholder: "jsmith" },
      password: { label: "Password", type: "password" }
    },
    async authorize(credentials, req) {
      // 제공된 자격 증명에서 사용자를 조회하는 논리를 여기에 추가합니다.
      const user = { id: '1', name: "J Smith", email: "jsmith@example.com" }
      if (user) {
        // 반환된 모든 객체는 JWT의 user 프로퍼티에 저장됩니다.
        return user
      } else {
        // null을 반환하면 사용자에게 세부 정보를 확인하라는 오류가 표시됩니다.
        return null
        // 오류와 함께 이 콜백을 거부할 수도 있으며 사용자는 오류 메시지가 질의 매개변수로 포함된 오류 페이지로 전송됩니다.
      }
    }
  })
]
...

pages/api/auth/[...nextauth].js
js
import CredentialsProvider from "next-auth/providers/credentials";
...
providers: [
  CredentialsProvider({
    // 로그인 양식에 표시할 이름 (예: '...로 로그인')
    name: "Credentials",
    // 자격 증명은 로그인 페이지에서 적절한 양식을 생성하는 데 사용됩니다.
    // 제출할 것으로 예상되는 필드를 지정할 수 있습니다.
    // 예: 도메인, 사용자 이름, 비밀번호, 2FA 토큰 등
    // 객체를 통해 HTML 속성을 <input> 태그로 전달할 수 있습니다.
    credentials: {
      username: { label: "Username", type: "text", placeholder: "jsmith" },
      password: { label: "Password", type: "password" }
    },
    async authorize(credentials, req) {
      // 제공된 자격 증명에서 사용자를 조회하는 논리를 여기에 추가합니다.
      const user = { id: '1', name: "J Smith", email: "jsmith@example.com" }
      if (user) {
        // 반환된 모든 객체는 JWT의 user 프로퍼티에 저장됩니다.
        return user
      } else {
        // null을 반환하면 사용자에게 세부 정보를 확인하라는 오류가 표시됩니다.
        return null
        // 오류와 함께 이 콜백을 거부할 수도 있으며 사용자는 오류 메시지가 질의 매개변수로 포함된 오류 페이지로 전송됩니다.
      }
    }
  })
]
...

토큰과 상호 작용하는 방법에 대한 내용은 콜백 문서를 참조하세요.

Web3와 이더리움으로 로그인

자격 증명 제공자를 사용하여 이더리움으로 로그인 같은 서비스와 통합할 수 있습니다.

자세한 내용은 다음 링크를 확인하세요.

복수의 제공자

각 자격 증명 제공자에 고유한 id를 지정하여 여러 개의 자격 증명 제공자를 지정할 수 있습니다.

다른 제공자 옵션과 함께 사용할 수도 있습니다.

다른 모든 제공자와 마찬가지로 지정 순서는 로그인 페이지에 표시되는 순서입니다.

js
providers: [
  CredentialsProvider({
    id: "domain-login",
    name: "Domain Account",
    async authorize(credentials, req) {
      const user = {
        /* 사용자를 얻는 함수 추가 */
      }
      return user
    },
    credentials: {
      domain: {
        label: "Domain",
        type: "text ",
        placeholder: "CORPNET",
        value: "CORPNET",
      },
      username: { label: "Username", type: "text ", placeholder: "jsmith" },
      password: { label: "Password", type: "password" },
    },
  }),
  CredentialsProvider({
    id: "intranet-credentials",
    name: "Two Factor Auth",
    async authorize(credentials, req) {
      const user = {
        /* 사용자를 얻는 함수 추가 */
      }
      return user
    },
    credentials: {
      email: { label: "Username", type: "text ", placeholder: "jsmith" },
      "2fa-key": { label: "2FA Key" },
    },
  }),
  /* ... 추가 제공자 ... */

js
providers: [
  CredentialsProvider({
    id: "domain-login",
    name: "Domain Account",
    async authorize(credentials, req) {
      const user = {
        /* 사용자를 얻는 함수 추가 */
      }
      return user
    },
    credentials: {
      domain: {
        label: "Domain",
        type: "text ",
        placeholder: "CORPNET",
        value: "CORPNET",
      },
      username: { label: "Username", type: "text ", placeholder: "jsmith" },
      password: { label: "Password", type: "password" },
    },
  }),
  CredentialsProvider({
    id: "intranet-credentials",
    name: "Two Factor Auth",
    async authorize(credentials, req) {
      const user = {
        /* 사용자를 얻는 함수 추가 */
      }
      return user
    },
    credentials: {
      email: { label: "Username", type: "text ", placeholder: "jsmith" },
      "2fa-key": { label: "2FA Key" },
    },
  }),
  /* ... 추가 제공자 ... */

자격 증명

개요​

옵션​

예시​

사용자 이름과 비밀번호​

Web3와 이더리움으로 로그인​

복수의 제공자​

개요

옵션

예시

사용자 이름과 비밀번호

Web3와 이더리움으로 로그인

복수의 제공자