최정민

FEAT : 구글로그인 api 추가

구글로그인api를 통해 1차 로그인을 구글로그인으로 구현함

-
This diff is collapsed. Click to expand it.
......@@ -10,6 +10,7 @@
"debug": "~2.6.9",
"ejs": "^3.1.6",
"express": "^4.16.4",
"google-auth-library": "^7.0.4",
"http-errors": "~1.6.3",
"morgan": "~1.9.1"
}
......
var express = require('express');
var router = express.Router();
var {OAuth2Client} = require('google-auth-library');
var CLIENT_ID = "94679084723-s5f0686p2porp9mkakrp1p89a48n24nj.apps.googleusercontent.com"
var client= new OAuth2Client(CLIENT_ID);
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
res.render('index', { d: "94679084723-s5f0686p2porp9mkakrp1p89a48n24nj.apps.googleusercontent.com" });
});
router.get('/index', function(req, res, next) {
res.render('index', { d: "94679084723-s5f0686p2porp9mkakrp1p89a48n24nj.apps.googleusercontent.com" });
});
router.post('/index', (req, res) => {
let token=req.body.token;
async function verify() {
const ticket = await client.verifyIdToken({
idToken: token,
audience: CLIENT_ID, // Specify the CLIENT_ID of the app that accesses the backend
});
}
verify()
.then(()=>{
res.cookie('session-token', token);
res.send('success')
})
.catch(console.error);
});
router.get('/login', checkAuthenticated, (req,res )=>{
let user=req.user;
res.render('login', {user})
});
module.exports = router;
function checkAuthenticated(req, res, next){
let token = req.cookies['session-token'];
let user = {};
async function verify() {
const ticket = await client.verifyIdToken({
idToken: token,
audience: CLIENT_ID, // Specify the CLIENT_ID of the app that accesses the backend
});
const payload = ticket.getPayload();
user.name = payload.name;
user.email = payload.email;
user.picture = payload.picture;
console.log(user.name);
}
verify()
.then(()=>{
req.user = user;
next();
})
.catch(err=>{
res.redirect('/login')
})
}
\ No newline at end of file
......
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content=<%=d%>>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= d%></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1>Login</h1>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
<a href="#" onclick="signOut();">Sign out</a>
</body>
<script>
function onSignIn(googleUser) {
var id_token = googleUser.getAuthResponse().id_token;
//console.log(id_token);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/index');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
console.log('Signed in as: ' + xhr.responseText);
if(xhr.responseText == 'success'){
signOut();
location.assign('/login')
}
};
xhr.send(JSON.stringify({token: id_token}));
}
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log('User signed out.');
});
}
</script>
</html>
......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>logined</title>
</head>
<body>
<a href="/index" onclick="signOut();">Sign Out</a>
<h1>Hi <%= user.name %></h1>
</body>
<script>
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log('User signed out.');
});
}
</script>
</html>
\ No newline at end of file