8時-ソーシャル・ログイン(20.11.18)

21729 ワード
テキストリンク

始める前に...


git reset --hard 251ff3d0ce25bb2f9490ea226355b43a54088dc9
今日の内容は前回作成したTodolistプロジェクトに続きます.

今日の目標


今日はパスポートjsを使用してソーシャルログインを実現する練習をしましょう.

ココア開発者のWebサイトで設定



KACA開発者のWebサイトでアプリケーションを作成してログインをアクティブにし、Redirect URLを設定します.

ログイン画面の作成


git reset --hard d0c2809a7878805bde19d8715da2e83745134272
羽バニラで見る
まず、開くejsにログイン画面を接続する必要があります.
--> routes/index.js

router.get('/login', function(req, res, next) {
  res.render('login');
});
--> views/login.ejs

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>소셜로그인</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel='stylesheet' href='/stylesheets/bootstrap-social.css' />
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
.login-form {
    width: 340px;
    margin: 50px auto;
  	font-size: 15px;
}
.login-form form {
    margin-bottom: 15px;
    background: #f7f7f7;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    padding: 30px;
}
.login-form h2 {
    margin: 0 0 15px;
}
.form-control, .btn {
    min-height: 38px;
    border-radius: 2px;
}
.btn {        
    font-size: 15px;
    font-weight: bold;
}
</style>
</head>
<body>
<div class="login-form">
	<form>
		<h2 class="text-center">Log in</h2>   
		<div class="form-group">
			<a href="login/kakao">
				<img src="/images/kakaoLogin.jpg" width="280"/>
			</a>
			<a href="login/naver">
				<img src="/images/naverLogin.jpg" width="280"/>
			</a>
		</div>     
	</form>
</div>
</body>
</html>

必要なモジュールのインストール


今日の実験に必要なモジュールをインストールしましょう.npm i passport passport-kakao express-session

KACAログインの実施


KaKaoStrategyを設定し、ログインロジックを作成します.
--> routes/index.js

const express = require('express');
const router = express.Router();
const passport = require('passport');
const KakaoStrategy = require('passport-kakao').Strategy;

/*로그인 성공시 사용자 정보를 Session에 저장한다*/
passport.serializeUser(function (user, done) {
  done(null, user)
});

/*인증 후, 페이지 접근시 마다 사용자 정보를 Session에서 읽어옴.*/
passport.deserializeUser(function (user, done) {
  done(null, user);
});

// 로그인 판단 로직
const authenticateUser = (req, res, next) => {
  if (req.isAuthenticated()) next();
  else res.redirect('/login');
};

// 로그인 처리 - 카카오
passport.use('login-kakao', new KakaoStrategy({
		clientID : '11648f24758196fb487c9f669f287019',
		callbackURL : 'http://localhost:3000/login/kakao/callback' // 카카오 개발자 사이트에서 지정한 리다이렉트 URL 
	},
	function(accessToken, refreshToken, profile, done) {
		console.log(profile);
		return done(null, profile);
	}
));

/* GET home page. */
router.get('/', authenticateUser, function(req, res, next) {
  res.render('index');
});

router.get('/login', function(req, res, next) {
  res.render('login');
});

router.get('/login/kakao', passport.authenticate('login-kakao'));

router.get('/login/kakao/callback', passport.authenticate('login-kakao', {
    successRedirect: '/',
    failureRedirect: '/login'
}));


module.exports = router;

セッションの設定


[06.24]HTTP/ネットワーク(1)
練習問題6-8空間構造UVa 806