Nextjs: NextAuth를 사용한 Oauth 및 자격 증명 인증 - 2부

NextAuth를 사용하는 NextJs의 두 번째 부분에 오신 것을 환영합니다. 첫 번째 부분에서는 Oauth2 인증을 애플리케이션에 통합하는 방법을 살펴보았습니다. 아직 보지 못하셨다면 첫 번째 부분입니다.

Nextjs: NextAuth를 사용한 Oauth 및 자격 증명 인증

m0nm ・ 3월 21일 ・ 5분 읽기

#webdev #react #nextjs #beginners

오늘은 사용자 이름과 암호 인증을 구현하는 방법을 살펴보겠습니다. 시작하자!

NextAuth 공급자의 큰 목록을 살펴보면 Credentials 공급자가 있습니다. 자격 증명 공급자를 사용하면 사용자 이름 및 암호, 도메인, 이중 인증 또는 하드웨어 장치와 같은 자격 증명으로 로그인을 처리할 수 있습니다.

자격 증명 공급자는 인증하려는 백엔드 데이터베이스 설정이 있을 때 사용됩니다.

기본 단점은 인증된 사용자 세션이 데이터베이스에서 지속될 수 없다는 것입니다. (자격증명 공급자는 JWT 전략을 사용하기 때문에 데이터베이스 어댑터를 통해 다른 Oauth 공급자 세션만 저장할 수 있음)

시작하자

nextjs 앱을 만듭니다.
npx create-next-app credentials-auth
NextAuth 설치:
npm i next-auth
내부 pages/_app.js 추가 SessionProvider

import { SessionProvider } from "next-auth/react"

export default function App({ Component, pageProps: { session, ...pageProps }}) { 

    return (
        <SessionProvider session={session}> 
            <Component {...pageProps} />
        </SessionProvider> 
     )
    }

마지막으로 pages/api/auth/[...nextauth].js에 api 경로를 추가합니다.

자격 증명 공급자 설정

이제 자격 증명 공급자를 설정할 준비가 되었습니다. 내부에 [nextauth].js 다음을 추가합니다.

import NextAuth from "next-auth"
import CredentialsProvider from "next-auth/providers/credentials";

export default NextAuth({ 

    // any secret word like: "i am a stegosaurus"
    secret: process.env.SECRET,

    // enabe JWT
    session: {
        strategy: "jwt",
    },

    providers = [

        CredentialsProvider({ 
        // the button text displayed on the sign in form
            name: "Sign In With Credentials",
        })

    ]

})

자격 증명 필드 추가

이제 기본 로그인 양식에 표시될 입력 필드를 지정합니다.

사용자 지정 로그인 페이지도 사용할 수 있습니다.

    ...
        credentials: {

            username: { 
                            label: "Username", 
                            type: "text", 
                     placeholder:"Enter Your Username..." 
                   },

            password: { 
                            label: "Password", 
                            type: "password", 
                     placeholder:"Enter Your Password..." 
                   }
        }
    ...

양식은 다음과 같습니다.

권한 부여 기능

이제 승인 기능을 설정해야 합니다.

권한 부여 기능은 데이터베이스 레코드에 대해 사용자 입력의 유효성을 검사하는 곳입니다.

권한 부여 기능 내에서 인증 논리를 추가하여 사용자를 찾고 암호를 비교합니다...

예를 들어:

    ...
        async authorize(credentials, req) { 

            const res = await fetch('www.server.com', {
                method: "post",

                headers: {
                                "Content-Type": "application/json",
                            },

                body: JSON.stringify({
                        username: req.body.username
                        password: req.body.password
                })

            })
            // and then you may or may not get the user 
            const user = await res.json()

        }
    ...

이제 중요한 부분: 승인 기능에서 반환하는 데이터:

사용자 개체를 반환하는 경우

그런 다음 자격 증명이 유효함을 의미합니다. 반환된 개체는 JSON 웹 토큰에 유지되고 사용자는 로그인됩니다.

반품하는 경우 null
그런 다음 사용자에게 세부 정보를 확인하라고 알리는 오류가 표시됩니다.

오류를 던지면

사용자는 쿼리 매개변수로 오류 메시지와 함께 오류 페이지로 전송됩니다.

...

async authorize() {

    // if credentials are valid
    if (user) {  
        return user  
    } else {
        return null
    }
}
...

그리고 그게 다야!

전체 코드는 다음과 같습니다.

import NextAuth from "next-auth"
import CredentialsProvider from "next-auth/providers/credentials";

export default NextAuth({ 

    // any secret word like: "i am a stegosaurus"
    secret: process.env.SECRET,

    // enable JWT
    session: {
        strategy: "jwt",
    },

    providers: [

        CredentialsProvider({ 

            // the button text displayed on the sign in form
            // so this would be: sign in with Credentials
            name: "Credentials",

            // the input fields on the default sign in form
            // you can use your custom login page instead 
            credentials: {

                username: { 
                                label: "Username", 
                                type: "text", 
                         placeholder:"Enter Your Username..." 
                       },

                password: { 
                                label: "Password", 
                                type: "password", 
                         placeholder:"Enter Your Password..." 
                       }
            },

        // The authorize function is where we validate the user input 
        // against the database records
        async authorize(credentials, req) { 

            // Here you add authentication logic: 
            // look for the user, compare the passwords... 
            const res = await fetch('www.server.com', {
                method: "post",

                headers: {
                                "Content-Type": "application/json",
                            },

                body: JSON.stringify({
                        username: req.body.username,
                        password: req.body.password
                })

            })

            // and then you may or may not get the user 
            const user = await res.json()

            // if credentials are valid
            if (user) {  
                    return user  
                } 

            else {
                // if not
                return null;
                }
        }

    })

    ]
})

결론

이상으로 포스팅을 마칩니다, 도움이 되셨기를 바랍니다. 이 게시물이 마음에 드셨다면 저에게 ❤️를 주시는 것을 고려해보세요. 제 콘텐츠를 더 보고 싶다면 저를 팔로우하는 것을 잊지 마세요!

다음 시간까지 즐거운 코딩하세요!