Node.js 애플리케이션에 Google Oauth 통합

Google Oauth는 사용자 및 개발자가 사용자 데이터를 저장하기 위해 쉽게 로그인 할 수 있도록하는 Google의 인증 API입니다.

가입 / 로그인 프로세스를 훨씬 더 쉽게 만들기 위해 여러 사이트에서 Google 인증을 사용하는 방법이 궁금했습니다. 글쎄, Google Oauth는 이것을 달성하기 위해 사용하는 것입니다.

Passport.Js 및 Express.Js를 사용하여 Node.Js 애플리케이션에이를 적용하는 방법에 대해 단계별로 진행할 것입니다.

우선 루트에서 직접 app.js 파일을 만들고 Express.Js 및 mongoose를 사용하여 서버를 시작하여 MongoDB 데이터베이스에 연결합니다. 이렇게하려면 모든 npm 종속성을 설치해야합니다. 프로젝트에서 'npm'을 초기화하려면 터미널에서 사용하십시오.

워크 플로우

https://phppot.com

프로젝트 초기화

npm init

터미널에서 이와 같은 것을 볼 수 있어야합니다.

이 NodeJ로 작업을 마치면 모든 종속성과 해당 버전이 표시되어야하는 package.json 파일이 생성됩니다.

그 사용 후

npm i express mongoose body-parser dotenv

App.js 초기화

아래 코드를 사용하여 Express 서버와 MongoDB를 초기화하십시오.

const express = require(“express”);
const mongoose = require(“mongoose”);
const bodyParser = require(“body-parser”);
require(“dotenv”).config();
const app = express();
const dbURI = process.env.dbURI; //Add your database URL string here
mongoose
.connect(dbURI, {
useNewUrlParser: true,
useCreateIndex: true,
useUnifiedTopology: true,
}).then(() => console.log(“Database Connected”))
.catch((err) => console.log(err));
mongoose.Promise = global.Promise;
//route not found
app.use((req, res, next) => {
const error = new Error(“Route not found”);
error.status = 404;
next(error);
});
app.use((error, req, res, next) => {
res.status(error.status || 500);
res.json({
error: {
message: error.message,
},
});
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Listening on port ${PORT}`);
});

node app.js

다음 코드가있는 Google Oauth를 사용하여 앱에 로그인 할 사용자 모델을 루트 디렉토리 내부의 모델 폴더에 만들어야합니다.

사용자 모델

const mongoose = require(“mongoose”);
const userSchema= mongoose.Schema({
_id: mongoose.Schema.Types.ObjectId,
googleId: {type: String,},
name: { type: String },
email: {
type: String,
match: /[a-z0–9!#$%&’*+/=?^_`{|}~-]+(?:\.[a-z0–9!#$%&’*+/=?^_`{|}~-]+)*@(?:[a-z0–9](?:[a-z0–9-]*[a-z0–9])?\.)+[a-z0–9](?:[a-z0–9-]*[a-z0–9])?/,
}
});
module.exports = mongoose.model(“User”, userSchema);

라우터 모델을 만들고 여기에 user.js 및 auth.js 파일을 추가하면 디렉토리가 다음과 같이 표시됩니다.

모델 생성을 마치면 Google Oauth API를 살펴볼 차례입니다.

이동

console.developers.google.com

Google API 설정

프로젝트 생성 및 API 활성화

console.google.developers.com

프로젝트 선택을 클릭하고 새 프로젝트를 만듭니다.

console.developers.google.com

프로젝트 이름과 조직 이름을 입력하십시오.

console.developers.google.com

이제 API 및 서비스 활성화

console.developers.google.com

이제 Google+를 검색하고 Google+ API를 선택하고 활성화하십시오.

console.developers.google.com

이와 같은 페이지로 이동하여 자격 증명 생성을 클릭하십시오.

console.developers.google.com

양식에서 Google+ API를 선택하고 어딘가에 액세스 키를 저장합니다.

자격 증명 구성 및 생성

그런 다음 이와 같은 페이지로 리디렉션되고 동의 화면 구성을 클릭합니다.

선택 외부를 프로젝트 이름을 변경하여 그림과 같이 당신은 모든 Google 사용자가 제휴 프로그램에 가입하고 다음 페이지를 채울 수 있도록하려면

console.developers.google.com
console.developers.google.com

성공적으로 저장 한 후 자격 증명 페이지로 이동하여 자격 증명 만들기를 클릭 하고 OAuth 클라이언트 ID를 선택합니다.

console.developers.google.com

이제이 양식이 열릴 것입니다. 애플리케이션 유형을 선택 하고 애플리케이션 이름을 입력합니다 . 이제 제가 한대로 URL을 입력하면됩니다.

console.developers.google.com
console.developers.google.com

이와 같은 대화 상자가 자격 증명과 함께 발생해야합니다. 자격 증명을 어딘가에 저장해야합니다.

console.developers.google.com

이제 Google 개발자 콘솔에서 모두 설정되었으며 이제 VScode로 돌아가 Passport를 설정합니다.

루트 디렉토리에 config 폴더를 만들고이 폴더에 passport-setup.js 파일을 추가하십시오.

npm i passport-google-oauth20

이제 passport-setup.js 파일 안에이 코드 스 니펫을 추가하십시오.

const passport = require('passport');
const GoogleStrategy = require('passport-google-oauth20').Strategy;
const User = require('../models/user');
const mongoose = require('mongoose');
passport.serializeUser((user, done) => {
done(null, user.id);
});
passport.deserializeUser((id, done) => {
User.findById(id).then((user) => {
done(null, user);
});
});
passport.use(
new GoogleStrategy({
// options for google strategy
clientID: /* your clientID*/"" ,
clientSecret:/*your clienSecret*/"",
callbackURL: '/auth/google/redirect'
}, (accessToken, refreshToken, profile, done) => {
// check if user already exists in our own db
User.findOne({googleId: profile.id}).then((currentUser) => {
if(currentUser){
// already have this user
console.log('user is: ', currentUser);
done(null, currentUser);
} else {
// if not, create user in our db
new User({
_id: new mongoose.Types.ObjectId(),
googleId: profile.id,
name: profile.displayName,
email:profile._json.email
}).save().then((newUser) => {
console.log('created new user: ', newUser);
done(null, newUser);
});
}
});
})
);

callbackURL 은 무엇입니까? — Google에서 사용자가 성공적으로 로그인 / 로그인 한 후 리디렉션하는 URL입니다. 액세스 토큰은 Google에서 생성 한 토큰으로 사용자를 인증하기 위해 자동으로 콜백 함수에 입력됩니다. 로그인하면 refreshTokens는 오프라인 앱에 사용됩니다. 프로필은 Google에서 반환 된 사용자의 전체 데이터를 포함하는 것입니다. 저는 내 사용자 모델에 필요한 데이터 ( googleId, 이름 및 이메일) 만 가져 왔습니다.

console.log(profile)

serializeUser 및 deserializeUser 함수 는 쿠키를 생성하고 사용자가 로그인 할 때 실제로 사용자 데이터를 가져 와서 인증을 받고 데이터를 추가로 처리 할 수 ​​있도록하는 데 사용됩니다.

경로 및 최종 설정

인증 경로

이제 /routers/auth.js에 다음 코드를 추가하십시오.

const express = require("express");
const mongoose = require("mongoose");
const passport = require("passport");
const router = express.Router();
router.get("/google",passport.authenticate("google", {
scope: ["profile", "email"],
})
);
///Callback route for google to redirect
router.get("/google/redirect", passport.authenticate('google'),(req, res, next) => {
user = req.user
res.send(user)
});
module.exports = router;

passport-setup.js의 GoogleStrategy 함수에있는 callbackURL에 추가 했으므로 / auth / Google / redirect로 자동 리디렉션됩니다.

App.js 최종 추가

이제 app.js에서 mongoose.connect () 함수를 호출하기 전에 다음 코드 스 니펫을 추가하십시오.

const passportSetup = require(".config/passport-setup");
const passport = require("passport");
const authRoutes = require(".routers/auth");
// initialize passport
app.use(passport.initialize());
app.use(passport.session());
app.use("/auth", authRoutes);

테스트 및 확인

이제 app.js 노드를 사용하여 앱을 실행하면 처음에 본 것과 동일한 console.log ()가 계속 표시됩니다. 이제 브라우저를 열고 이동 에 http : // localhost를 : 3000 / 인증 / 구글 , 그것은 구글 로그인 페이지로 리디렉션해야

accounts.google.com

계정을 선택하면 사용자의 데이터를 응답으로 전송 한 router.get ( '/ Google / redirect',… ..)으로 리디렉션되어야하며, res.redirect를 사용하여 거기에서 직접 리디렉션 할 수도 있습니다.

그러나 우리가 보관 한 것은 다음과 같은 출력 페이지를 표시해야합니다.

생성 한 데이터베이스에 이미 저장되어 있습니다.

nodejs 애플리케이션에 Google Oauth API를 성공적으로 통합했습니다.

Github 저장소 링크 :https://github.com/jugaldb/ Google-Oauth-Nodejs

Suggested posts

건강 식품과 Google의 관계는 무엇입니까?

"Google은 위장에서 시작합니다"

건강 식품과 Google의 관계는 무엇입니까?

Google은 인류가 정보에 액세스하는 방식을 영원히 바 꾸었습니다. 회사는 우리가 생각하는 것보다 더 많은 방식으로 우리에게 영향을 미쳤습니다.

깔끔한 코드를위한 10 가지 자바 스크립트 스 니펫

코드를 깔끔하고 간결하게 만드는 자바 스크립트 속기

깔끔한 코드를위한 10 가지 자바 스크립트 스 니펫

모든 JavaScript 프로그래머를 위해 가장 멋지고 유용한 속기 / 스 니펫 목록을 수집했습니다. 코드를보다 전문적으로 보이게하려면이를 사용하십시오.

Related posts

성능 최적화 된 A / B 테스트 솔루션

성능 최적화 된 A / B 테스트 솔루션

의제 : 소개 : TL;하지만 읽을 수 있습니다. A / B 테스트, CloudFront 및 Lamba @ edge에 대해 이미 알고있는 경우 AWS Lambda @ edge를 사용한 A / B 테스트로 직접 이동하십시오. A / B 테스트 란 무엇입니까? A / B 테스트는 웹 사이트의 두 가지 버전에 대한 사용자의 참여를 비교하는 데 초점을 맞춘 UX 연구 방법론입니다.

fp-ts (Typescript)에서 Option 및 둘 중 하나 사용

저는 함수형 프로그래밍을 좋아합니다. 몇 년 동안 실수를하거나 토끼 구멍을 뚫는 것으로부터 저를 몇 번 구해 주었기 때문입니다. 동일한 입력이 주어지면 출력이 항상 동일하다는 것을 알면 안심입니다.

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드는 하나 이상의 파일, 이미지, 문서, 오디오, 비디오 및 기타 파일을 서버에 업로드하기위한 구성 요소입니다. 여러 파일 선택, 진행률 표시 줄, 자동 업로드, 끌어서 놓기, 폴더 (디렉터리) 업로드, 파일을 포함하는 다양한 기능을 갖춘 HTML5 업로드 구성 요소 (<input type =”file”>)의 확장 버전입니다. 검증 등.

6 React 개발자로서 후회

내가 일찍했으면하는 것

6 React 개발자로서 후회

React는 배울 수있는 훌륭한 도구입니다. 그것은 우리가 우리 자신의 방식으로 일을 할 수있게합니다.