Node + Express + Passport でツイッター、Facebook ログイン認証後、ユーザー名を表記したい。
受付中
回答 1
投稿
- 評価
- クリップ 0
- VIEW 1,759
お世話になっております。
現在、Nodeを勉強している初学者です。
SNSログインを行った後、ユーザー名を
ページに表示したいのですが、うまくいきません。
以下に状況、ソースコードを記載させて頂きましたので
アドバイス頂ければ幸いです。
よろしくお願いいたします。
状況
ログイン取得し、コールバックURLまでは表示できたものの、
ユーザー情報が取得できない状態です。環境
expressを使用し、ログイン用ミドルウェアはpassportを使用
以下にソースコードを記載します。
(app.js)
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var users = require('./routes/users');
var oauth = require('./routes/oauth');
var app = express();
var fboauth = require('./routes/fboauth');
var login = require('./routes/login');
var passport = require('passport')
var TwitterStrategy = require('passport-twitter').Strategy;
var FacebookStrategy = require('passport-facebook').Strategy;
var GoogleStrategy = require('passport-google').Strategy;
var TWITTER_CONSUMER_KEY = "XXXXXXXXX";
var TWITTER_CONSUMER_SECRET = "XXXXXXXXX";
var FACEBOOK_APP_ID = "XXXXXXXXX";
var FACEBOOK_APP_SECRET = "XXXXXXXXX";
passport.use(new TwitterStrategy({
consumerKey: TWITTER_CONSUMER_KEY,
consumerSecret: TWITTER_CONSUMER_SECRET,
callbackURL: "http://127.0.0.1:3000/"
},
function(token, tokenSecret, profile, done) {
process.nextTick(function() {
return done(null, profile);
});
}
));
passport.use(new FacebookStrategy({
clientID: FACEBOOK_APP_ID,
clientSecret: FACEBOOK_APP_SECRET,
callbackURL: "http://myapp.jp:3000/",
enableProof: false
},
function(accessToken, refreshToken, profile, done) {
console.dir(profile);
process.nextTick(function () {
return done(null, profile);
});
}
));
passport.serializeUser(function(user, done){
done(null, user);
});
passport.deserializeUser(function(obj, done){
done(null, obj);
});
app.use(require('express-session')({
secret: 'keyboard cat',
resave: false,
saveUninitialized: false
}));
app.get('/auth', passport.authenticate('twitter'));
app.get('/auth/callback',
passport.authenticate('twitter',{failureRedirect: '/fail'}),
function(req, res) {
res.redirect('/');
}
);
app.get('/auth', passport.authenticate('facebook'));
app.get('/auth/callback',
passport.authenticate('facebook',{failureRedirect: '/fail'}),
function(req, res) {
res.redirect('/');
}
);
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: false
}));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/',routes);
app.get('/login',login);
app.use('/oauth', oauth);
app.use('/fboauth',fboauth);
app.use('/users', users);
app.use('/login', login);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
//oauth.js (ツイッター処理を記載)
//twitter ログイン処理を記述
var express = require('express');
var router = express.Router();
var passport = require('passport');
router.get('/', passport.authenticate('twitter'), function (req, res, next) {
console.log(req, res, next);
});
router.get('/callback',passport.authenticate('twitter', { failureRedirect: '/login' }), function(req, res) {
console.dir(res);
console.log(res);
res.redirect('/');
session: req.session.passport
});
module.exports = router;
//index.js
//リダイレクトした後、ユーザー情報を取得
var express = require('express');
var router = express.Router();
router.get('/',function(req,res){
res.render('login',{
title: req.session.passport
});
});
module.exports = router;
<!-- ファイル名:index.ejs
login画面 取得した情報を h1タグに表示 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" href="/stylesheets/reset.css">
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
<div class="form-wrapper">
<!-- 取得した情報を表示 -->
<h1><%=req.session.passport.displayName %></h1>
<form>
<div class="form-item">
<label for="email"></label>
<input type="email" name="email" required="required" placeholder="Email Address"></input>
</div>
<div class="form-item">
<label for="password"></label>
<input type="password" name="password" required="required" placeholder="Password"></input>
</div>
<div class="button-panel">
<a href="/oauth" class="btn-large waves-effect waves-light" style="text-transform: none;">Twitterでログイン</a>
<a href="/fboauth" class="btn-large waves-effect waves-light" style="text-transform: none;">facebookログイン</a>
<input type="submit" class="button button_login" title="Sign In" value="Sign In"></input>
<input type="submit" class="button button_facebook" title="Sign In" value="FACEBOOK"></input>
<input type="submit" class="button button_google" title="Sign In" value="GOOGLE"></input>
</div>
</form>
<div class="form-footer">
<p><a href="#">Create an account</a></p>
<p><a href="#">Forgot password?</a></p>
</div>
</div>
</body>
</html>
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.23%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2016/07/10 12:04
お恥ずかしい話ですが、サーバーサイドでの確認方法自体がよくわかっておりません。
2016/07/10 13:14
参考になるページで構いませんので