웹 응용 프로그램의 인증
61497 단어 nodejavascript
본고에서 mysql와next를 사용하여 웹 응용 프로그램에서 인증과 로그인의 지속성을 실현하는 방법을 보여 드리겠습니다.js.나는 네가 노드에 대해 약간의 기본적인 이해를 한 후에 반응을 한다고 가정한다.
설치 및 폴더 구조
좋아하는 코드 편집기를 열고 명령줄에 다음 코드를 입력합니다.
npx create-next-app hello-next
이것은 Hellonext라는 다음 프로그램을 만들 것입니다.
폴더 구조가 달라 보일 수도 있습니다.이 파일들을 삭제하고 그림에서 만든 것처럼 새 파일과 폴더를 만드는 것을 권장합니다.
다음에, 우선 데이터베이스 mysql를 설정할 것입니다.
MySQL
내 폴더 구조를 따르면 모델 폴더와 사용자를 만들었을 것입니다.js 파일.
나도 내 컴퓨터에 mysql를 설치했어. 너는 이 link.에서 설치할 수 있어.
하지만 구름을 설정할 수도 있습니다.선택권은 너에게 있다.
현재, 우리는 데이터베이스에 Schema을 만들 것이다.Schema이 무엇인지 모르는 사람들에게 이것은 데이터베이스에 있는 표의 구조로 어떻게 그리고 어떤 데이터가 데이터베이스에 저장되는지에 관한 것이다.Schema은 거의 모든 데이터베이스에서 그것을 사용한다.
mysql 데이터베이스에 대해 우리는 sequelize을 사용하여 모델을 만들 것이다.
npm install --save sequelize
우선, 우리는 sequelize와 데이터베이스를 연결해야 한다.hello next 폴더에utils라는 폴더를 만들고 dbConnect라는 파일을 만듭니다.js.
import { Sequelize } from "sequelize";
module.exports = new Sequelize('signup_test', 'root', 'mysql_root_password', {
host: 'localhost',
dialect: "mysql"
});
루트 암호를 사용하여 mysql_root_password을 삭제합니다.
이제 사용자로 이동합니다.js 파일.이 파일은 모델 폴더에 만들어진 것임을 기억하십시오.
const crypto = require("crypto");
const { v4: uuidv1 } = require("uuid")
const { DataTypes } = require("sequelize")
const db = require("../utils/dbConnect")
const User = db.define("User", {
fullname: {
type: DataTypes.STRING,
allowNull: false
},
email: {
type: DataTypes.STRING,
allowNull: false,
unique: true
},
salt: {
type: DataTypes.STRING,
get(){
return () => this.getDataValue('salt')
}
},
password: {
type: DataTypes.STRING,
get(){
return () => this.getDataValue('password')
}
}
},{
tableName: "Users"
})
User.generateSalt = function() {
return uuidv1()
}
User.encryptPassword = function(plainPassword, salt) {
return crypto.createHmac('sha256', salt).update(plainPassword).digest("hex");
}
const setSaltAndPassword = user => {
if(user.changed('password')) {
user.salt = User.generateSalt();
user.password = User.encryptPassword(user.password(), user.salt())
}
}
User.prototype.correctPassword = function(enteredPassword) {
return User.encryptPassword(enteredPassword, this.salt()) === this.password()
}
User.beforeCreate(setSaltAndPassword);
User.beforeUpdate(setSaltAndPassword);
module.exports = User
오류를 보았을 수도 있습니다. uid를 설치하지 않았습니다.
npm install uuid
알겠습니다. 우리가 위의 서류에서 무엇을 했는지 곧 알려 드리겠습니다.
우리는 사용자에게 등록된 세 개의 입력 값, 즉 전체 이름, 이메일과 비밀번호를 입력하도록 요구할 것이다.현재, 당신은 이 salt이 모드에서 무엇을 했는지 알고 싶을 것입니다.
소금.
Salt는 암호화 함수에 추가된 값으로 사용자의 암호를 암호화하는 데 사용되며 Salt만 암호를 해독할 수 있습니다.salt를 사용하는 의미는 우리가 암호를 암호화했지만 일부 해커들은 역방향 공정 방법을 통해 암호를 해독할 수 있다는 것이다.따라서 만약 우리가 소금을 첨가하기로 선택한다면 암호를 해독하는 것은 거의 불가능하다.
자, 이제 계속합시다.User.generateSalt 함수를 만드는 것은 새 사용자가 등록할 때마다 유일한 숫자 문자열을 만들기 위해서입니다.
User.encryptPassword = function(plainPassword, salt) {
return crypto.createHmac('sha256', salt).update(plainPassword).digest("hex");
}
이름에서 이 함수는 일반 암호를 수신하고 암호화하는 것을 똑똑히 볼 수 있다.자세한 내용은 link.을 참조하십시오.
const setSaltAndPassword = user => {
if(user.changed('password')) {
user.salt = User.generateSalt();
user.password = User.encryptPassword(user.password(), user.salt())
}
}
현재 암호화의 마지막 부분은 setSaltAndPassword입니다. 사용자가 전달한 암호와 암호화에 사용되는salt를 받아들입니다.
이 user.password() 방법으로 비밀번호를 얻을 수 있다는 것을 기억하십시오. 왜냐하면 우리는 비밀번호 필드에 이 get() 줄을 추가했기 때문입니다.
get(){
return () => this.getDataValue('password')
}
소금도 마찬가지다.
이 밖에 모든 기능을 실현하기 위해 우리도 이런 방법을 사용한다.그 전에 새로운 사용자 데이터를 만들면 이를 통해 전달됩니다.
User.beforeCreate(setSaltAndPassword);
User.beforeUpdate(setSaltAndPassword);
마지막으로 비밀번호가 정확한지 확인하기 위해 우리는 correctPassword 함수를 사용했다.이 함수는 사용자가 전달한 암호를 암호화하여 데이터베이스에 저장된 암호를 대조하여 검사한다.
이렇게 하면 우리는 원시 암호를 영원히 알 수 없을 것이다.
API - 등록.js, 로그인.js, 종료.js와db.js
api에서 이 파일들을 만들어야 한다는 것을 기억하십시오.
먼저 등록 문제를 처리합시다.js 파일.
const User = require("../../models/user")
export default (req, res) => {
User.create(req.body)
.then(data => {
return res.json(data)
})
.catch(err => {
if(err){
return res.status(400).json({
error: "Not able to save user in db"
})
}
})
}
사용자가 Post 방법으로 /api/signup/을 클릭할 때마다 새 사용자가 생성됩니다.
좋아, 이건 간단해.
로그인js
const User = require("../../models/user")
const jwt = require("jsonwebtoken")
export default (req, res) => {
const { email, password } = req.body;
User.findOne({ where: { email }})
.then(user => {
if(!user.correctPassword(password)){
return res.status(401).json({
error: "Email and Password is not correct"
})
}
//create token
const token = jwt.sign({id: user.id}, process.env.SECRET)
//send response to front
const { id, fullname, email } = user;
return res.status(200).json({
token, user: { id, fullname, email }
})
})
.catch(err => {
if(err){
return res.status(400).json({
error: "User email doesn't exist",
log: err
})
}
})
}
우선, npm install jsonwebtoken은 cli에서 이 명령을 실행합니다.
JsonWebToken（jwt）
Jwt에서 사용자에 로그인하는 데 도움을 주는 일회용 유일한 영패를 생성합니다.세션의 지속성을 유지합니다. 이 영패를 쿠키에 저장합니다. 사용자가 페이지를 새로 고치면, 그 영패는 로그인합니다.
JWT에 대한 자세한 내용은 link.을 참조하십시오.
우리는 사용자의 전자메일에 따라 사용자를 찾을 수 있는 findOne의 sequelize 방법을 사용하고 있습니다.이 모드에서는 e-메일과 중복되지 않도록 e-메일에 대해 unique: true 값을 설정합니다.
다음에 우리는 correctPassword 함수를 사용하여 사용자가 전달한 비밀번호가 정확한지 검사한다.
다음에, 우리는 사용자를 위해 영패를 생성하고, 전방에 사용자의 증빙서류와 영패를 보낼 것이다.
말소js
export default (req, res) => {
res.json({
message: "remove token and user is signed out"
})
}
로그아웃은 간단합니다. 저는 지금 메시지만 보낼 뿐입니다. 그러나 앞에서 쿠키를 삭제하면 사용자가 로그인하지 않습니다.
db.js
import db from "../../utils/dbConnect"
export default function(req, res) {
db.authenticate()
.then(res => console.log("DB CONNECTED"))
.catch(err => console.log("ERROR IN CONNECTING DB"))
res.json({
message: "db is connected"
})
}
이 파일은 데이터베이스와 우리의 응용 프로그램을 연결하는 데 사용됩니다.
신청하세요.js
네, 전단으로 돌아가서 등록을 만듭니다.js는 페이지 폴더에 있습니다.
import React,{ useState } from 'react'
import { useRouter } from "next/router"
export default function signup() {
const [signup, setSignup] = useState({
fullname: "",
email: "",
password: ""
})
const [message, setMessage ] = useState("");
const router = useRouter();
const { fullname, email, password } = signup;
const handleChange = (event) => {
const { name, value } = event.target;
setSignup({ ...signup, [name]: value })
}
const handleSubmit = (event) => {
event.preventDefault();
const data = { fullname, email, password };
fetch("/api/signup",{
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(data)
}).then(res => res.json())
.then(data => {
if(!data.error){
setMessage("Please Login, You are signuped for the app")
}
})
.catch(err => console.log(err))
setSignup({
fullname: "",
email: "",
password: ""
})
router.push("/login")
}
return (
<form onSubmit={handleSubmit}>
{message}
<input type="text" name="fullname" value={fullname} onChange={handleChange} placeholder="Full Name" />
<br/> <br/>
<input type="email" name="email" value={email} onChange={handleChange} placeholder='Email' />
<br/> <br/>
<input type="password" name="password" value={password} onChange={handleChange} placeholder="Password" />
<br/> <br/>
<input type="submit" value="Signup"/>
</form>
)
}
이 구성 요소에서, 나는 사용자로부터 전체 이름, 이메일, 비밀번호를 얻은 다음, 표에 저장된 데이터를 /api/signup/ 루트에 제출한다.
배경.
나는 여기에 배경을 설치했다. 왜냐하면 사실이 증명하기 때문에, 너는 다음 단계에 도구 구멍을 뚫을 수 없기 때문이다.js.
context 폴더에mainContext를 만듭니다.js.
import React,{ createContext, useState } from 'react';
export const MainContext = createContext();
export default function MainContextProvider(props) {
const [authenticated, setAuthenticated] = useState(null);
return (
<MainContext.Provider value={{ authenticated, setAuthenticated }}>
{props.children}
</MainContext.Provider>
)
}
지금은 응용 프로그램에서js, 코드 변경.
import MainContextProvider from "../context/mainContext"
import { CookiesProvider } from "react-cookie"
export default function App({ Component, pageProps }){
return (
<MainContextProvider>
<CookiesProvider>
<Component {...pageProps} />
</CookiesProvider>
</MainContextProvider>
)
}
보시다시피 react-cookie을 사용하고 있습니다. 이것은 응용 프로그램의 쿠키에 접근하는 데 도움을 줄 것입니다.
따라서 cli에서 npm install react-cookie을 입력합니다.
로그인js
이제 로그인을 만듭니다.페이지 폴더의 js 파일입니다.
import React,{ useContext, useState } from 'react'
import { useCookies } from "react-cookie"
import { useRouter } from "next/router"
import { MainContext } from '../context/mainContext';
export default function login() {
const [login, setLogin] = useState({
email: "",
password: ""
});
const [cookie, setCookie] = useCookies(["token"]);
const { setAuthenticated } = useContext(MainContext)
const { email, password } = login;
const router = useRouter();
const handleChange = (event) => {
const { name, value } = event.target;
setLogin({ ...login, [name]: value })
}
const handleSubmit = (event) => {
event.preventDefault();
const data = { email, password };
fetch("/api/login",{
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(data)
})
.then(response => response.json()).then(data => {
if(data.token){
setCookie("token", `Bearer ${data.token}`, {
path: "/",
maxAge: 3600, //expires in 1 hour
sameSite: true
})
if(typeof window !== undefined){
localStorage.setItem("jwt", JSON.stringify(data));
setAuthenticated(data)
}
}
})
.catch(err => console.log(err))
setLogin({
email: "",
password: ""
})
router.push("/")
}
return (
<form onSubmit={handleSubmit}>
<input type="email" name="email" value={email} onChange={handleChange} placeholder="Email" />
<br/> <br/>
<input type="password" name="password" value={password} onChange={handleChange} placeholder="Password" />
<br/> <br/>
<input type="submit" value="Login"/>
</form>
)
}
이 구성 요소에서 우리가 사용하는 것은 react-cookie이다. 이것은 우리에게 cookies 갈고리를 사용하는 기능을 제공하고 이 갈고리에서 세 가지를 되돌려준다.
npx create-next-app hello-next
내 폴더 구조를 따르면 모델 폴더와 사용자를 만들었을 것입니다.js 파일.
나도 내 컴퓨터에 mysql를 설치했어. 너는 이 link.에서 설치할 수 있어.
하지만 구름을 설정할 수도 있습니다.선택권은 너에게 있다.
현재, 우리는 데이터베이스에
Schema을 만들 것이다.Schema이 무엇인지 모르는 사람들에게 이것은 데이터베이스에 있는 표의 구조로 어떻게 그리고 어떤 데이터가 데이터베이스에 저장되는지에 관한 것이다.Schema은 거의 모든 데이터베이스에서 그것을 사용한다.mysql 데이터베이스에 대해 우리는
sequelize을 사용하여 모델을 만들 것이다.npm install --save sequelize
import { Sequelize } from "sequelize";
module.exports = new Sequelize('signup_test', 'root', 'mysql_root_password', {
host: 'localhost',
dialect: "mysql"
});
mysql_root_password을 삭제합니다.이제 사용자로 이동합니다.js 파일.이 파일은 모델 폴더에 만들어진 것임을 기억하십시오.
const crypto = require("crypto");
const { v4: uuidv1 } = require("uuid")
const { DataTypes } = require("sequelize")
const db = require("../utils/dbConnect")
const User = db.define("User", {
fullname: {
type: DataTypes.STRING,
allowNull: false
},
email: {
type: DataTypes.STRING,
allowNull: false,
unique: true
},
salt: {
type: DataTypes.STRING,
get(){
return () => this.getDataValue('salt')
}
},
password: {
type: DataTypes.STRING,
get(){
return () => this.getDataValue('password')
}
}
},{
tableName: "Users"
})
User.generateSalt = function() {
return uuidv1()
}
User.encryptPassword = function(plainPassword, salt) {
return crypto.createHmac('sha256', salt).update(plainPassword).digest("hex");
}
const setSaltAndPassword = user => {
if(user.changed('password')) {
user.salt = User.generateSalt();
user.password = User.encryptPassword(user.password(), user.salt())
}
}
User.prototype.correctPassword = function(enteredPassword) {
return User.encryptPassword(enteredPassword, this.salt()) === this.password()
}
User.beforeCreate(setSaltAndPassword);
User.beforeUpdate(setSaltAndPassword);
module.exports = User
npm install uuid
우리는 사용자에게 등록된 세 개의 입력 값, 즉 전체 이름, 이메일과 비밀번호를 입력하도록 요구할 것이다.현재, 당신은 이
salt이 모드에서 무엇을 했는지 알고 싶을 것입니다.소금.
Salt는 암호화 함수에 추가된 값으로 사용자의 암호를 암호화하는 데 사용되며 Salt만 암호를 해독할 수 있습니다.salt를 사용하는 의미는 우리가 암호를 암호화했지만 일부 해커들은 역방향 공정 방법을 통해 암호를 해독할 수 있다는 것이다.따라서 만약 우리가 소금을 첨가하기로 선택한다면 암호를 해독하는 것은 거의 불가능하다.
자, 이제 계속합시다.
User.generateSalt 함수를 만드는 것은 새 사용자가 등록할 때마다 유일한 숫자 문자열을 만들기 위해서입니다.User.encryptPassword = function(plainPassword, salt) {
return crypto.createHmac('sha256', salt).update(plainPassword).digest("hex");
}
const setSaltAndPassword = user => {
if(user.changed('password')) {
user.salt = User.generateSalt();
user.password = User.encryptPassword(user.password(), user.salt())
}
}
setSaltAndPassword입니다. 사용자가 전달한 암호와 암호화에 사용되는salt를 받아들입니다.이
user.password() 방법으로 비밀번호를 얻을 수 있다는 것을 기억하십시오. 왜냐하면 우리는 비밀번호 필드에 이 get() 줄을 추가했기 때문입니다.get(){
return () => this.getDataValue('password')
}
이 밖에 모든 기능을 실현하기 위해 우리도 이런 방법을 사용한다.그 전에 새로운 사용자 데이터를 만들면 이를 통해 전달됩니다.
User.beforeCreate(setSaltAndPassword);
User.beforeUpdate(setSaltAndPassword);
correctPassword 함수를 사용했다.이 함수는 사용자가 전달한 암호를 암호화하여 데이터베이스에 저장된 암호를 대조하여 검사한다.이렇게 하면 우리는 원시 암호를 영원히 알 수 없을 것이다.
API - 등록.js, 로그인.js, 종료.js와db.js
api에서 이 파일들을 만들어야 한다는 것을 기억하십시오.
먼저 등록 문제를 처리합시다.js 파일.
const User = require("../../models/user")
export default (req, res) => {
User.create(req.body)
.then(data => {
return res.json(data)
})
.catch(err => {
if(err){
return res.status(400).json({
error: "Not able to save user in db"
})
}
})
}
사용자가 Post 방법으로 /api/signup/을 클릭할 때마다 새 사용자가 생성됩니다.
좋아, 이건 간단해.
로그인js
const User = require("../../models/user")
const jwt = require("jsonwebtoken")
export default (req, res) => {
const { email, password } = req.body;
User.findOne({ where: { email }})
.then(user => {
if(!user.correctPassword(password)){
return res.status(401).json({
error: "Email and Password is not correct"
})
}
//create token
const token = jwt.sign({id: user.id}, process.env.SECRET)
//send response to front
const { id, fullname, email } = user;
return res.status(200).json({
token, user: { id, fullname, email }
})
})
.catch(err => {
if(err){
return res.status(400).json({
error: "User email doesn't exist",
log: err
})
}
})
}
우선, npm install jsonwebtoken은 cli에서 이 명령을 실행합니다.
JsonWebToken（jwt）
Jwt에서 사용자에 로그인하는 데 도움을 주는 일회용 유일한 영패를 생성합니다.세션의 지속성을 유지합니다. 이 영패를 쿠키에 저장합니다. 사용자가 페이지를 새로 고치면, 그 영패는 로그인합니다.
JWT에 대한 자세한 내용은 link.을 참조하십시오.
우리는 사용자의 전자메일에 따라 사용자를 찾을 수 있는 findOne의 sequelize 방법을 사용하고 있습니다.이 모드에서는 e-메일과 중복되지 않도록 e-메일에 대해 unique: true 값을 설정합니다.
다음에 우리는 correctPassword 함수를 사용하여 사용자가 전달한 비밀번호가 정확한지 검사한다.
다음에, 우리는 사용자를 위해 영패를 생성하고, 전방에 사용자의 증빙서류와 영패를 보낼 것이다.
말소js
export default (req, res) => {
res.json({
message: "remove token and user is signed out"
})
}
로그아웃은 간단합니다. 저는 지금 메시지만 보낼 뿐입니다. 그러나 앞에서 쿠키를 삭제하면 사용자가 로그인하지 않습니다.
db.js
import db from "../../utils/dbConnect"
export default function(req, res) {
db.authenticate()
.then(res => console.log("DB CONNECTED"))
.catch(err => console.log("ERROR IN CONNECTING DB"))
res.json({
message: "db is connected"
})
}
이 파일은 데이터베이스와 우리의 응용 프로그램을 연결하는 데 사용됩니다.
신청하세요.js
네, 전단으로 돌아가서 등록을 만듭니다.js는 페이지 폴더에 있습니다.
import React,{ useState } from 'react'
import { useRouter } from "next/router"
export default function signup() {
const [signup, setSignup] = useState({
fullname: "",
email: "",
password: ""
})
const [message, setMessage ] = useState("");
const router = useRouter();
const { fullname, email, password } = signup;
const handleChange = (event) => {
const { name, value } = event.target;
setSignup({ ...signup, [name]: value })
}
const handleSubmit = (event) => {
event.preventDefault();
const data = { fullname, email, password };
fetch("/api/signup",{
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(data)
}).then(res => res.json())
.then(data => {
if(!data.error){
setMessage("Please Login, You are signuped for the app")
}
})
.catch(err => console.log(err))
setSignup({
fullname: "",
email: "",
password: ""
})
router.push("/login")
}
return (
<form onSubmit={handleSubmit}>
{message}
<input type="text" name="fullname" value={fullname} onChange={handleChange} placeholder="Full Name" />
<br/> <br/>
<input type="email" name="email" value={email} onChange={handleChange} placeholder='Email' />
<br/> <br/>
<input type="password" name="password" value={password} onChange={handleChange} placeholder="Password" />
<br/> <br/>
<input type="submit" value="Signup"/>
</form>
)
}
이 구성 요소에서, 나는 사용자로부터 전체 이름, 이메일, 비밀번호를 얻은 다음, 표에 저장된 데이터를 /api/signup/ 루트에 제출한다.
배경.
나는 여기에 배경을 설치했다. 왜냐하면 사실이 증명하기 때문에, 너는 다음 단계에 도구 구멍을 뚫을 수 없기 때문이다.js.
context 폴더에mainContext를 만듭니다.js.
import React,{ createContext, useState } from 'react';
export const MainContext = createContext();
export default function MainContextProvider(props) {
const [authenticated, setAuthenticated] = useState(null);
return (
<MainContext.Provider value={{ authenticated, setAuthenticated }}>
{props.children}
</MainContext.Provider>
)
}
지금은 응용 프로그램에서js, 코드 변경.
import MainContextProvider from "../context/mainContext"
import { CookiesProvider } from "react-cookie"
export default function App({ Component, pageProps }){
return (
<MainContextProvider>
<CookiesProvider>
<Component {...pageProps} />
</CookiesProvider>
</MainContextProvider>
)
}
보시다시피 react-cookie을 사용하고 있습니다. 이것은 응용 프로그램의 쿠키에 접근하는 데 도움을 줄 것입니다.
따라서 cli에서 npm install react-cookie을 입력합니다.
로그인js
이제 로그인을 만듭니다.페이지 폴더의 js 파일입니다.
import React,{ useContext, useState } from 'react'
import { useCookies } from "react-cookie"
import { useRouter } from "next/router"
import { MainContext } from '../context/mainContext';
export default function login() {
const [login, setLogin] = useState({
email: "",
password: ""
});
const [cookie, setCookie] = useCookies(["token"]);
const { setAuthenticated } = useContext(MainContext)
const { email, password } = login;
const router = useRouter();
const handleChange = (event) => {
const { name, value } = event.target;
setLogin({ ...login, [name]: value })
}
const handleSubmit = (event) => {
event.preventDefault();
const data = { email, password };
fetch("/api/login",{
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(data)
})
.then(response => response.json()).then(data => {
if(data.token){
setCookie("token", `Bearer ${data.token}`, {
path: "/",
maxAge: 3600, //expires in 1 hour
sameSite: true
})
if(typeof window !== undefined){
localStorage.setItem("jwt", JSON.stringify(data));
setAuthenticated(data)
}
}
})
.catch(err => console.log(err))
setLogin({
email: "",
password: ""
})
router.push("/")
}
return (
<form onSubmit={handleSubmit}>
<input type="email" name="email" value={email} onChange={handleChange} placeholder="Email" />
<br/> <br/>
<input type="password" name="password" value={password} onChange={handleChange} placeholder="Password" />
<br/> <br/>
<input type="submit" value="Login"/>
</form>
)
}
이 구성 요소에서 우리가 사용하는 것은 react-cookie이다. 이것은 우리에게 cookies 갈고리를 사용하는 기능을 제공하고 이 갈고리에서 세 가지를 되돌려준다.
const User = require("../../models/user")
export default (req, res) => {
User.create(req.body)
.then(data => {
return res.json(data)
})
.catch(err => {
if(err){
return res.status(400).json({
error: "Not able to save user in db"
})
}
})
}
const User = require("../../models/user")
const jwt = require("jsonwebtoken")
export default (req, res) => {
const { email, password } = req.body;
User.findOne({ where: { email }})
.then(user => {
if(!user.correctPassword(password)){
return res.status(401).json({
error: "Email and Password is not correct"
})
}
//create token
const token = jwt.sign({id: user.id}, process.env.SECRET)
//send response to front
const { id, fullname, email } = user;
return res.status(200).json({
token, user: { id, fullname, email }
})
})
.catch(err => {
if(err){
return res.status(400).json({
error: "User email doesn't exist",
log: err
})
}
})
}
export default (req, res) => {
res.json({
message: "remove token and user is signed out"
})
}
import db from "../../utils/dbConnect"
export default function(req, res) {
db.authenticate()
.then(res => console.log("DB CONNECTED"))
.catch(err => console.log("ERROR IN CONNECTING DB"))
res.json({
message: "db is connected"
})
}
네, 전단으로 돌아가서 등록을 만듭니다.js는 페이지 폴더에 있습니다.
import React,{ useState } from 'react'
import { useRouter } from "next/router"
export default function signup() {
const [signup, setSignup] = useState({
fullname: "",
email: "",
password: ""
})
const [message, setMessage ] = useState("");
const router = useRouter();
const { fullname, email, password } = signup;
const handleChange = (event) => {
const { name, value } = event.target;
setSignup({ ...signup, [name]: value })
}
const handleSubmit = (event) => {
event.preventDefault();
const data = { fullname, email, password };
fetch("/api/signup",{
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(data)
}).then(res => res.json())
.then(data => {
if(!data.error){
setMessage("Please Login, You are signuped for the app")
}
})
.catch(err => console.log(err))
setSignup({
fullname: "",
email: "",
password: ""
})
router.push("/login")
}
return (
<form onSubmit={handleSubmit}>
{message}
<input type="text" name="fullname" value={fullname} onChange={handleChange} placeholder="Full Name" />
<br/> <br/>
<input type="email" name="email" value={email} onChange={handleChange} placeholder='Email' />
<br/> <br/>
<input type="password" name="password" value={password} onChange={handleChange} placeholder="Password" />
<br/> <br/>
<input type="submit" value="Signup"/>
</form>
)
}
/api/signup/ 루트에 제출한다.배경.
나는 여기에 배경을 설치했다. 왜냐하면 사실이 증명하기 때문에, 너는 다음 단계에 도구 구멍을 뚫을 수 없기 때문이다.js.
context 폴더에mainContext를 만듭니다.js.
import React,{ createContext, useState } from 'react';
export const MainContext = createContext();
export default function MainContextProvider(props) {
const [authenticated, setAuthenticated] = useState(null);
return (
<MainContext.Provider value={{ authenticated, setAuthenticated }}>
{props.children}
</MainContext.Provider>
)
}
지금은 응용 프로그램에서js, 코드 변경.
import MainContextProvider from "../context/mainContext"
import { CookiesProvider } from "react-cookie"
export default function App({ Component, pageProps }){
return (
<MainContextProvider>
<CookiesProvider>
<Component {...pageProps} />
</CookiesProvider>
</MainContextProvider>
)
}
보시다시피 react-cookie을 사용하고 있습니다. 이것은 응용 프로그램의 쿠키에 접근하는 데 도움을 줄 것입니다.
따라서 cli에서 npm install react-cookie을 입력합니다.
로그인js
이제 로그인을 만듭니다.페이지 폴더의 js 파일입니다.
import React,{ useContext, useState } from 'react'
import { useCookies } from "react-cookie"
import { useRouter } from "next/router"
import { MainContext } from '../context/mainContext';
export default function login() {
const [login, setLogin] = useState({
email: "",
password: ""
});
const [cookie, setCookie] = useCookies(["token"]);
const { setAuthenticated } = useContext(MainContext)
const { email, password } = login;
const router = useRouter();
const handleChange = (event) => {
const { name, value } = event.target;
setLogin({ ...login, [name]: value })
}
const handleSubmit = (event) => {
event.preventDefault();
const data = { email, password };
fetch("/api/login",{
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(data)
})
.then(response => response.json()).then(data => {
if(data.token){
setCookie("token", `Bearer ${data.token}`, {
path: "/",
maxAge: 3600, //expires in 1 hour
sameSite: true
})
if(typeof window !== undefined){
localStorage.setItem("jwt", JSON.stringify(data));
setAuthenticated(data)
}
}
})
.catch(err => console.log(err))
setLogin({
email: "",
password: ""
})
router.push("/")
}
return (
<form onSubmit={handleSubmit}>
<input type="email" name="email" value={email} onChange={handleChange} placeholder="Email" />
<br/> <br/>
<input type="password" name="password" value={password} onChange={handleChange} placeholder="Password" />
<br/> <br/>
<input type="submit" value="Login"/>
</form>
)
}
이 구성 요소에서 우리가 사용하는 것은 react-cookie이다. 이것은 우리에게 cookies 갈고리를 사용하는 기능을 제공하고 이 갈고리에서 세 가지를 되돌려준다.
import React,{ createContext, useState } from 'react';
export const MainContext = createContext();
export default function MainContextProvider(props) {
const [authenticated, setAuthenticated] = useState(null);
return (
<MainContext.Provider value={{ authenticated, setAuthenticated }}>
{props.children}
</MainContext.Provider>
)
}
import MainContextProvider from "../context/mainContext"
import { CookiesProvider } from "react-cookie"
export default function App({ Component, pageProps }){
return (
<MainContextProvider>
<CookiesProvider>
<Component {...pageProps} />
</CookiesProvider>
</MainContextProvider>
)
}
이제 로그인을 만듭니다.페이지 폴더의 js 파일입니다.
import React,{ useContext, useState } from 'react'
import { useCookies } from "react-cookie"
import { useRouter } from "next/router"
import { MainContext } from '../context/mainContext';
export default function login() {
const [login, setLogin] = useState({
email: "",
password: ""
});
const [cookie, setCookie] = useCookies(["token"]);
const { setAuthenticated } = useContext(MainContext)
const { email, password } = login;
const router = useRouter();
const handleChange = (event) => {
const { name, value } = event.target;
setLogin({ ...login, [name]: value })
}
const handleSubmit = (event) => {
event.preventDefault();
const data = { email, password };
fetch("/api/login",{
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(data)
})
.then(response => response.json()).then(data => {
if(data.token){
setCookie("token", `Bearer ${data.token}`, {
path: "/",
maxAge: 3600, //expires in 1 hour
sameSite: true
})
if(typeof window !== undefined){
localStorage.setItem("jwt", JSON.stringify(data));
setAuthenticated(data)
}
}
})
.catch(err => console.log(err))
setLogin({
email: "",
password: ""
})
router.push("/")
}
return (
<form onSubmit={handleSubmit}>
<input type="email" name="email" value={email} onChange={handleChange} placeholder="Email" />
<br/> <br/>
<input type="password" name="password" value={password} onChange={handleChange} placeholder="Password" />
<br/> <br/>
<input type="submit" value="Login"/>
</form>
)
}
react-cookie이다. 이것은 우리에게 cookies 갈고리를 사용하는 기능을 제공하고 이 갈고리에서 세 가지를 되돌려준다.removeCookie의 예시를 보실 수 있습니다.또한 나는 전자메일과 비밀번호를 사용자의 입력으로 하고, 폼 제출에
/api/login 루트를 사용하여 전자메일과 비밀번호를 검사한다.it의 성공적인 응답에서 저는 영패와 사용자 자격증을 얻었습니다. 그 중에서 setCookie를 사용하여 영패를 저장했습니다. setCookie는
maxAge을 사용했습니다. 이것은 쿠키가 언제 만료되는지, 이 예에서 1시간을 설명합니다.그 다음에 나는 데이터를localStorage와
autenticated 상태에 저장할 것이다.마지막으로, 성공적으로 완료되면 라우터가 "/"로 되돌려집니다.
색인js
이것은 응용 프로그램을 설치하는 주요 구성 요소입니다.
import { useEffect, Fragment, useContext } from "react"
import { useCookies } from "react-cookie"
import Link from "next/link"
import { MainContext } from "../context/mainContext";
export default function Home() {
const { authenticated, setAuthenticated } = useContext(MainContext);
const [cookie, setCookie, removeCookie] = useCookies(["token"]);
useEffect(() => {
dbCall()
}, [])
useEffect(() => {
if(!authenticated){
setAuthenticated(isAuthenticated())
}
},[authenticated])
const dbCall = async () => {
const response = await fetch("/api/db")
const data = await response.json();
console.log(data)
}
const handleSignout = () => {
fetch("/api/signout").then(response => response.json())
.then(data => {
if(data.message === "remove token and user is signed out"){
removeCookie("token")
setAuthenticated(null)
}
})
.catch(err => console.log(err))
}
const isAuthenticated = () => {
if(typeof window !== undefined){
if(localStorage.getItem("jwt") && cookie.token){
return JSON.parse(localStorage.getItem("jwt"));
}else{
return false
}
}
}
return (
<ul>
<li><Link href="/">Home</Link></li>
{
authenticated && authenticated.user ? (
<li onClick={handleSignout}>Signout</li>
) : (
<Fragment>
<li><Link href="/login">Login</Link></li>
<li><Link href="/signup">SignUp</Link></li>
</Fragment>
)
}
</ul>
)
}
이 구성 요소에는 두 가지 주요 기능인 isAuthenticated과 handleSignout이 있다.
isAuthenticated (): - 프로그램을 처음 불러올 때 이 함수를 호출합니다. 이 함수는 로컬 저장소와 쿠키 영패의 jwt 키가 있는지 확인하고 사용자를 인증하며 setAuthenticated 상태를 업데이트합니다.이에 따라 로그인, 등록, 취소는 사용자에게 선물이 될 것이다.
handleSignout (): signout을 눌렀을 때, 영패 쿠키를 삭제하고 Authenticated state를null로 설정합니다.
또한 이 구성 요소에서dbCall 함수로 데이터베이스를 연결합니다.
결론
현재 사용자의 지속적인 세션을 가진 인증된 프로그램이 있습니다.
만약 당신이 내가 무엇을 잘못 말했다고 생각한다면 언제든지 평론을 발표하세요.우리는 모두 이곳에서 공부한다.
시간을 내서 본문을 읽어 주셔서 감사합니다.
해피 코딩:)
Reference
이 문제에 관하여(웹 응용 프로그램의 인증), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/g4rry420/authentication-in-web-applications-476p
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
import { useEffect, Fragment, useContext } from "react"
import { useCookies } from "react-cookie"
import Link from "next/link"
import { MainContext } from "../context/mainContext";
export default function Home() {
const { authenticated, setAuthenticated } = useContext(MainContext);
const [cookie, setCookie, removeCookie] = useCookies(["token"]);
useEffect(() => {
dbCall()
}, [])
useEffect(() => {
if(!authenticated){
setAuthenticated(isAuthenticated())
}
},[authenticated])
const dbCall = async () => {
const response = await fetch("/api/db")
const data = await response.json();
console.log(data)
}
const handleSignout = () => {
fetch("/api/signout").then(response => response.json())
.then(data => {
if(data.message === "remove token and user is signed out"){
removeCookie("token")
setAuthenticated(null)
}
})
.catch(err => console.log(err))
}
const isAuthenticated = () => {
if(typeof window !== undefined){
if(localStorage.getItem("jwt") && cookie.token){
return JSON.parse(localStorage.getItem("jwt"));
}else{
return false
}
}
}
return (
<ul>
<li><Link href="/">Home</Link></li>
{
authenticated && authenticated.user ? (
<li onClick={handleSignout}>Signout</li>
) : (
<Fragment>
<li><Link href="/login">Login</Link></li>
<li><Link href="/signup">SignUp</Link></li>
</Fragment>
)
}
</ul>
)
}
현재 사용자의 지속적인 세션을 가진 인증된 프로그램이 있습니다.
만약 당신이 내가 무엇을 잘못 말했다고 생각한다면 언제든지 평론을 발표하세요.우리는 모두 이곳에서 공부한다.
시간을 내서 본문을 읽어 주셔서 감사합니다.
해피 코딩:)
Reference
이 문제에 관하여(웹 응용 프로그램의 인증), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/g4rry420/authentication-in-web-applications-476p텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
