NextJS 및 Passport로 Google 인증을 구현하는 방법.
18518 단어 nextjsjavascripttypescriptreact
소개
최근에 나는 프로젝트에서 NextJS을 사용하기로 결정했고 많은 반복 끝에 passport과 함께 Google 인증을 사용하기로 결정했습니다. 이 기사에서는 Passport Google 전략을 사용하여 NextJS 애플리케이션에서 인증을 설정하는 방법에 대한 단계별 가이드를 제공합니다.
골자
메인 코스를 시작하기 전에 알아야 하고 설정해야 할 몇 가지 사항이 있습니다.
이 기사에서는 패키지 관리자로
yarn
을 사용할 예정이며 원하는 경우 계속해서 npm
를 사용할 수 있습니다.먼저 컴퓨터에 NextJS 프로젝트를 설정해야 하므로 터미널로 이동하여 다음 명령을 실행합니다.
yarn create next-app --typescript
프로젝트 이름을 입력하라는 메시지가 표시되면 입력하고 Enter 키를 눌러 계속 진행합니다.
설정이 완료되면 다음 명령을 실행하여 새로 설정한 프로젝트로 디렉토리를 변경해야 합니다.
cd <your-project-name>
다음으로 다음을 포함하여 인증 구현을 성공적으로 완료하는 데 필요한 모든 종속성을 설치합니다.
설치하려면 터미널에서 다음 명령을 실행하십시오.
yarn add next-connect passport passport-google-oauth20 @types/passport @types/passport-google-oauth20
다음으로 env 파일에 몇 가지 자격 증명을 추가해야 합니다.
.env
라는 새 파일을 만들고 다음 값을 추가합니다.GOOGLE_CLIENT_ID: <your app client id>
GOOGLE_CLIENT_SECRET: <your app client secret>
그런 다음 이제 기본 코드를 작성할 수 있습니다.
이제 코딩을 시작합니다!
루트 디렉토리에서
lib
라는 새 폴더를 만듭니다. lib
폴더 안에 passport-google-auth.ts
라는 새 파일을 만듭니다.passport-google-auth.ts
파일에서 다음 코드를 사용하여 패스포트를 사용하여 Google 전략을 구성합니다.// /lib/passport-google-auth.ts
import { Profile, Strategy as GoogleStrategy } from "passport-google-oauth20";
import passport from "passport";
// logic to save your user or check if user exists in your record to proceed.
const saveUser = (user: Profile) => {
return new Promise((resolve, reject) => {
resolve("Successful");
});
};
passport.use(
new GoogleStrategy(
{
clientID: process.env.GOOGLE_CLIENT_ID as string,
clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
callbackURL: "/api/oauth2/redirect/google", // this is the endpoint you registered on google while creating your app. This endpoint would exist on your application for verifying the authentication
},
async (_accessToken, _refreshToken, profile, cb: any) => {
try {
await saveUser(profile);
return cb(null, profile);
} catch (e: any) {
throw new Error(e);
}
}
)
);
// passport.serializeUser stores user object passed in the cb method above in req.session.passport
passport.serializeUser((user, cb) => {
process.nextTick(function () {
return cb(null, user);
});
});
// passport.deserializeUser stores the user object in req.user
passport.deserializeUser(function (
user: any,
cb: (arg0: null, arg1: any) => any
) {
process.nextTick(function () {
return cb(null, user);
});
});
// for broader explanation of serializeUser and deserializeUser visit https://stackoverflow.com/questions/27637609/understanding-passport-serialize-deserialize
// An article that explains the concept of process.nextTick https://nodejs.dev/learn/understanding-process-nexttick
export default passport;
다음으로
/pages/api
라는 이름의 login.ts
폴더에 새 파일을 만듭니다.login.ts
파일 내에서 다음 코드를 추가하여 마지막 단계에서 passport로 구성한 google 전략 방법을 사용하는 get 요청을 생성합니다.// /pages/api/login.ts
import passport from "../../lib/passport-google-auth";
import nextConnect from "next-connect";
export default nextConnect()
.use(passport.initialize())
.get(
passport.authenticate("google", {
scope: ["profile", "email"],
})
);
이제 인증 확인을 위한 콜백 URL을 생성합니다.
api
의 pages
폴더로 이동하여 oauth2
라는 폴더를 만듭니다. oauth2
폴더 안에 redirect
라는 폴더를 만듭니다. redirect
폴더 안에 google.ts
라는 새 파일을 만듭니다.// /pages/api/oauth2/redirect/google.ts
import { NextApiRequest, NextApiResponse } from "next";
import nextConnect from "next-connect";
import passport from "../../../../lib/passport-google-auth";
export default nextConnect().get(
passport.authenticate("google"),
(req: NextApiRequest & { user: any }, res: NextApiResponse) => {
// you can save the user session here. to get access to authenticated user through req.user
res.redirect("/");
}
);
백엔드 구현을 완료했으므로 이제 프런트엔드에서 엔드포인트를 사용할 수 있습니다.
로그인 페이지를 생성합니다. 로그인 페이지에 다음 코드를 붙여넣을 수 있습니다.
import Link from "next/link";
const LoginPage = () => {
return (
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
height: "100%",
width: "100%",
textAlign: "center",
}}
>
<h1 style={{ fontSize: "2.5rem" }}>Login with Google</h1>
<Link href="/api/login" passHref>
<button
style={{
border: "1px solid black",
backgroundColor: "white",
borderRadius: "10px",
height: "50px",
width: "200px",
cursor: "pointer",
}}
>
Proceed
</button>
</Link>
</div>
);
};
export default LoginPage;
Voila, 이제 Google로 다음 앱을 인증할 수 있습니다.
결론
이 문서에서는 다음 앱에서 사용자를 인증하기 위해 Passport Google 전략을 활용하는 방법을 보여줍니다.
이 자습서에서 사용된 코드here에 액세스할 수 있습니다.
부인 성명
이것은 나의 첫 번째 기술 기사이며 주제에 대해 정의를 내리기를 바랍니다. 질문이나 피드백은 댓글로 남겨주시면 됩니다. 나를 팔로우하고 github
Reference
이 문제에 관하여(NextJS 및 Passport로 Google 인증을 구현하는 방법.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ayo_tech/how-to-implement-google-authentication-with-nextjs-and-passport-2gji텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)