dckat

지도 띄우기 구현

This diff is collapsed. Click to expand it.
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
3 "version": "0.0.0", 3 "version": "0.0.0",
4 "private": true, 4 "private": true,
5 "scripts": { 5 "scripts": {
6 - "start": "node ./bin/www" 6 + "start": "nodemon ./bin/www"
7 }, 7 },
8 "dependencies": { 8 "dependencies": {
9 "cookie-parser": "~1.4.4", 9 "cookie-parser": "~1.4.4",
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
14 "google-auth-library": "^7.0.4", 14 "google-auth-library": "^7.0.4",
15 "http-errors": "~1.6.3", 15 "http-errors": "~1.6.3",
16 "morgan": "~1.9.1", 16 "morgan": "~1.9.1",
17 + "nodemon": "^2.0.7",
17 "session-file-store": "^1.5.0" 18 "session-file-store": "^1.5.0"
18 } 19 }
19 } 20 }
......
1 -var express = require('express'); 1 +var express = require("express");
2 var router = express.Router(); 2 var router = express.Router();
3 -var {OAuth2Client} = require('google-auth-library'); 3 +var { OAuth2Client } = require("google-auth-library");
4 -var CLIENT_ID = "94679084723-s5f0686p2porp9mkakrp1p89a48n24nj.apps.googleusercontent.com" 4 +var CLIENT_ID =
5 -var client= new OAuth2Client(CLIENT_ID); 5 + "94679084723-s5f0686p2porp9mkakrp1p89a48n24nj.apps.googleusercontent.com";
6 -var session =require('express-session'); 6 +var client = new OAuth2Client(CLIENT_ID);
7 -var FileStore=require('session-file-store')(session); 7 +var session = require("express-session");
8 -router.use(session({ 8 +var FileStore = require("session-file-store")(session);
9 - secret: '209', // 암호화 9 +router.use(
10 + session({
11 + secret: "209", // 암호화
10 resave: false, 12 resave: false,
11 saveUninitialized: true, 13 saveUninitialized: true,
12 - store: new FileStore() 14 + store: new FileStore(),
13 -})) 15 + })
16 +);
14 17
15 /* GET home page. */ 18 /* GET home page. */
16 -router.get('/', function(req, res, next) { 19 +router.get("/", function (req, res, next) {
17 - res.render('index', { d: "94679084723-s5f0686p2porp9mkakrp1p89a48n24nj.apps.googleusercontent.com" }); 20 + res.render("index", {
21 + d: "94679084723-s5f0686p2porp9mkakrp1p89a48n24nj.apps.googleusercontent.com",
22 + });
18 }); 23 });
19 -router.get('/index', function(req, res, next) { 24 +router.get("/index", function (req, res, next) {
20 - res.render('index', { d: "94679084723-s5f0686p2porp9mkakrp1p89a48n24nj.apps.googleusercontent.com" }); 25 + res.render("index", {
26 + d: "94679084723-s5f0686p2porp9mkakrp1p89a48n24nj.apps.googleusercontent.com",
27 + });
21 }); 28 });
22 29
23 -router.post('/index', (req, res) => { 30 +router.post("/index", (req, res) => {
24 - let token=req.body.token; 31 + let token = req.body.token;
25 async function verify() { 32 async function verify() {
26 const ticket = await client.verifyIdToken({ 33 const ticket = await client.verifyIdToken({
27 idToken: token, 34 idToken: token,
28 - audience: CLIENT_ID, // Specify the CLIENT_ID of the app that accesses the backend 35 + audience: CLIENT_ID, // Specify the CLIENT_ID of the app that accesses the backend
29 }); 36 });
30 } 37 }
31 verify() 38 verify()
32 - .then(()=>{ 39 + .then(() => {
33 - res.cookie('session-token', token); 40 + res.cookie("session-token", token);
34 - res.send('success') 41 + res.send("success");
35 - }) 42 + })
36 - .catch(console.error); 43 + .catch(console.error);
37 }); 44 });
38 45
39 -router.get('/login', checkAuthenticated, (req,res )=>{ 46 +router.get("/login", checkAuthenticated, (req, res) => {
40 - let user=req.user; 47 + let user = req.user;
41 - req.session.user=user; 48 + req.session.user = user;
42 - res.render('login', {user:req.session.user}) 49 + res.render("login", { user: req.session.user });
43 }); 50 });
44 51
45 -router.post('/login' ,(req, res)=>{ 52 +router.post("/login", (req, res) => {
46 - 53 + console.log(req.body.nickname);
47 - console.log(req.body.nickname); 54 + console.log(req.body.age);
48 - console.log(req.body.age); 55 + console.log(req.body.gender);
49 - console.log(req.body.gender); 56 + return res.render("login", { user: req.session.user });
50 - return res.render('login', {user:req.session.user})
51 }); 57 });
52 module.exports = router; 58 module.exports = router;
53 59
54 - 60 +function checkAuthenticated(req, res, next) {
55 - 61 + let token = req.cookies["session-token"];
56 -function checkAuthenticated(req, res, next){
57 -
58 - let token = req.cookies['session-token'];
59 62
60 let user = {}; 63 let user = {};
61 async function verify() { 64 async function verify() {
62 const ticket = await client.verifyIdToken({ 65 const ticket = await client.verifyIdToken({
63 idToken: token, 66 idToken: token,
64 - audience: CLIENT_ID, // Specify the CLIENT_ID of the app that accesses the backend 67 + audience: CLIENT_ID, // Specify the CLIENT_ID of the app that accesses the backend
65 }); 68 });
66 const payload = ticket.getPayload(); 69 const payload = ticket.getPayload();
67 user.name = payload.name; 70 user.name = payload.name;
...@@ -70,12 +73,15 @@ function checkAuthenticated(req, res, next){ ...@@ -70,12 +73,15 @@ function checkAuthenticated(req, res, next){
70 console.log(user.name); 73 console.log(user.name);
71 } 74 }
72 verify() 75 verify()
73 - .then(()=>{ 76 + .then(() => {
74 - req.user = user; 77 + req.user = user;
75 - next(); 78 + next();
76 - }) 79 + })
77 - .catch(err=>{ 80 + .catch((err) => {
78 - res.redirect('/index') 81 + res.redirect("/index");
79 - }) 82 + });
83 +}
80 84
81 -}
...\ No newline at end of file ...\ No newline at end of file
85 +router.get("/map", (req, res) => {
86 + res.render("map");
87 +});
......
1 +{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1620820123092,"user":{"name":"‍김대철[학생](소프트웨어융합대학 컴퓨터공학과)","email":"kdc9619@khu.ac.kr","picture":"https://lh3.googleusercontent.com/a/AATXAJyP14ipRboJZ8T5-oNS3sRp4CG8wKCEwVABQ5G_=s96-c"}}
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html>
3 + <head>
4 + <title>KaKao Map</title>
5 + <link rel="stylesheet" href="/stylesheets/style.css" />
6 + </head>
7 + <body>
8 + <div id="map" style="width: 100%; height: 575px"></div>
9 +
10 + <script
11 + type="text/javascript"
12 + src="//dapi.kakao.com/v2/maps/sdk.js?appkey=68cbccbcd6f0fef0a213e62ad37393ee"
13 + ></script>
14 + <script>
15 + const mapContainer = document.getElementById("map"),
16 + mapOption = {
17 + center: new kakao.maps.LatLng(37.2477502, 127.078164),
18 + level: 3,
19 + };
20 +
21 + const map = new kakao.maps.Map(mapContainer, mapOption);
22 + </script>
23 + </body>
24 +</html>