タイトルで述べたように、私は Node.js + Passport.JS と MySQL.js を使用しています。すべてがインストールされ、ほとんどの部分で適切に動作していますが、理解できない問題がいくつか発生しています。
私の profile.ejs ページは user.x 変数にアクセスできますが、ほとんどのスクリプトでこれらの変数にアクセスできません。easyrtcid をログイン ユーザーのメール アドレスに設定したいと思います。
現時点では、passport-session が機能していないようです。同じユーザー ID とパスを使用して、2 つの異なるブラウザーからログインできます。
profile.ejs
<!doctype html>
<html>
<head>
<title>Node Authentication</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/easyrtc/easyrtc.css" />
<script src="http://localhost:8080/socket.io/socket.io.js"></script>
<script type="text/javascript" src="http://localhost:8080/easyrtc/easyrtc.js"></script>
<script type="text/javascript" src="E:/PortableApps/nodejs/app/config/demo_audio_video_simple.js"></script>
<script type="text/javascript" src="E:/PortableApps/nodejs/app/config/jquery-2.1.1.min.js"></script>
<style>
/* Header styles */
.row {
float:left;
position:relative;
width:250px;
text-align:center;
}
.well,
.hidden {
float:left;
position:relative;
padding:0 0 1em 0;
overflow:hidden;
}
#otherClients {
height:200px;
overflow-y:scroll;
}
#selfVideo {
height:225px;
width:300px;
float:left;
border:1px solid gray;
margin-left:10px;
}
#callerVideo {
height:225px;
width:300px;
border:1px solid gray;
margin-left:10px;
}
#well {
position:relative;
}
#connectControls {
float:left;
width:250px;
text-align:center;
}
/*#acceptCallBox {
display:none;
z-index:2;
position:absolute;
top:100px;
left:400px;
border:red solid 2px;
background-color:pink;
padding:15px;
}
</style>
<script>
//var socket = io.connect('http://localhost');
var selfEasyrtcid = "";
var haveSelfVideo = false;
//console.log(user);
// easyrtc.enableDebug(true);
// display globals in console
//for(var b in window) {
//if(window.hasOwnProperty(b)) console.log(b);
// }
function disable(domId) {
console.log("about to try disabling " + domId);
document.getElementById(domId).disabled = "disabled";
}
function enable(domId) {
console.log("about to try enabling " + domId);
document.getElementById(domId).disabled = "";
}
function connect() {
console.log("Initializing connection");
easyrtc.enableAudio(document.getElementById('shareAudio').checked);
easyrtc.enableVideo(document.getElementById('shareVideo').checked);
easyrtc.setRoomOccupantListener(convertListToButtons);
easyrtc.connect("easyrtc.audioVideo", loginSuccess, loginFailure);
console.log("connection complete");
}
function hangup() {
easyrtc.hangupAll();
disable('hangupButton');
console.log("hangup");
}
function clearConnectList() {
var otherClientDiv = document.getElementById('otherClients');
while (otherClientDiv.hasChildNodes()) {
otherClientDiv.removeChild(otherClientDiv.lastChild);
}
}
function convertListToButtons (roomName, data, isPrimary) {
console.log("convert list to buttons");
console.log(JSON.stringify(data));
console.dir(data);
clearConnectList();
var otherClientDiv = document.getElementById('otherClients');
for(var easyrtcid in data) {
var button = document.createElement('button');
button.onclick = function(easyrtcid) {
return function() {
performCall(easyrtcid);
};
}(easyrtcid);
var label = document.createTextNode(easyrtc.idToName(easyrtcid));
button.appendChild(label);
otherClientDiv.appendChild(button);
}
}
function setUpMirror() {
if( !haveSelfVideo) {
var selfVideo = document.getElementById("selfVideo");
easyrtc.setVideoObjectSrc(selfVideo, easyrtc.getLocalStream());
selfVideo.muted = true;
haveSelfVideo = true;
}
}
function performCall(otherEasyrtcid) {
easyrtc.hangupAll();
console.log("calling" + otherEasyrtcid);
var acceptedCB = function(accepted, easyrtcid) {
if( !accepted ) {
easyrtc.showError("CALL-REJECTED", "Sorry, your call to " + easyrtc.idToName(easyrtcid) + " was rejected");
enable('otherClients');
}
};
var successCB = function(easyrtcid) {
setUpMirror();
console.log("call accepted by " + easyrtc.idToName(easyrtcid));
enable('hangupButton');
};
var failureCB = function(otherEasyrtcid) {
console.log("call to " + easyrtc.idToName(otherEasyrtcid) + " failed:" + errMessage);
enable('otherClients');
};
easyrtc.call(otherEasyrtcid, successCB, failureCB, acceptedCB);
enable('hangupButton');
}
function loginSuccess(easyrtcid) {
console.log(easyrtcid);
selfEasyrtcid = easyrtcid;
disable("connectButton");
// enable("disconnectButton");
enable('otherClients');
// console.log(data);
document.getElementById("iam").innerHTML = "I am " + easyrtc.cleanId(easyrtcid);
}
function loginFailure(errorCode, message) {
easyrtc.showError(errorCode, message);
}
function disconnect() {
console.log("disconnect");
document.getElementById("iam").innerHTML = "logged out";
easyrtc.disconnect();
enable("connectButton");
// disable("disconnectButton");
clearConnectList();
easyrtc.setVideoObjectSrc(document.getElementById('selfVideo'), "");
}
easyrtc.setStreamAcceptor( function(easyrtcid, stream) {
setUpMirror();
var video = document.getElementById('callerVideo');
easyrtc.setVideoObjectSrc(video,stream);
console.log("saw video from " + easyrtcid);
enable("hangupButton");
});
easyrtc.setOnStreamClosed( function (easyrtcid) {
easyrtc.setVideoObjectSrc(document.getElementById('callerVideo'), "");
disable("hangupButton");
});
var callerPending = null;
easyrtc.setCallCancelled( function(easyrtcid){
if( easyrtcid === callerPending) {
document.getElementById('acceptCallBox').style.display = "none";
callerPending = false;
}
});
easyrtc.setAcceptChecker(function(easyrtcid, callback) {
document.getElementById('acceptCallBox').style.display = "block";
callerPending = easyrtcid;
if( easyrtc.getConnectionCount() > 0 ) {
console.log(easyrtcid + "has" + easyrtc.getConnectionCount() + " peer connections");
document.getElementById('acceptCallLabel').innerHTML = "Drop current call and accept new from " + easyrtc.idToName(easyrtcid) + " ?";
}
else {
document.getElementById('acceptCallLabel').innerHTML = "Accept incoming call from " + easyrtc.idToName(easyrtcid) + " ?";
}
var acceptTheCall = function(wasAccepted) {
document.getElementById('acceptCallBox').style.display = "none";
if( wasAccepted && easyrtc.getConnectionCount() > 0 ) {
easyrtc.hangupAll();
}
callback(wasAccepted);
callerPending = null;
};
document.getElementById("callAcceptButton").onclick = function() {
acceptTheCall(true);
};
document.getElementById("callRejectButton").onclick =function() {
acceptTheCall(false);
};
} );
</script>
</head>
<body>
<div class="container">
<div class="page-header text-center">
<h1><span class="fa fa-anchor"> </span> Profile Page</h1>
<a href="/logout" class="btn btn-default btn-sm">Logout</a>
</div>
<div class="row">
<!-- LOCAL INFORMATION -->
<div class="well">
<h3><span class="fa fa-user"> </span> Local</h3>
<div id="connectControls">
<input type="checkbox" checked="checked" id="shareAudio" />Share audio
<input type="checkbox" checked="checked" id="shareVideo" />Share video <br />
<button id="connectButton" onclick="connect()">Connect</button>
<button id="hangupButton" disabled="disabled" onclick="hangup()">Hangup</button>
<div id="iam">Not yet connected...</div>
<strong>id</strong>: <%= user.id %><br>
<strong>email</strong>: <%= user.email%><br>
<strong>password</strong>: <%= user.password %>
<br />
<strong>Connected users:</strong>
<div id="otherClients"> </div>
</div>
<div id="videos">
<video autoplay="autoplay" id="selfVideo" class="easyrtcMirror" muted="muted" volume="0"> </video>
<video autoplay="autoplay" id="callerVideo"> </video>
<div id="acceptCallBox"> <!-- Should be initially hidden using CSS -->
<div id="acceptCallLabel"> </div>
<button id="callAcceptButton" >Accept</button> <button id="callRejectButton">Reject</button>
</div>
</div>
<div id="hidden"> </div>
<!--hide-->
<br style="clear:both;" />
<hr />
</div>
</div>
</div>
</body>
</html>
パスポート.js
// config/passport.js
// load all the things we need
var LocalStrategy = require('passport-local').Strategy;
// load up the user model
var User = require('../models/user');
var mysql = require('mysql');
//Database connection details
var connection = mysql.createConnection({
host : '127.0.0.1',
user : 'root',
password : ''
});
connection.query('USE nodejsmysql');
// expose this function to our app using module.exports
module.exports = function(passport) {
// =========================================================================
// passport session setup ==================================================
// =========================================================================
// required for persistent login sessions
// passport needs ability to serialize and unserialize users out of session
// used to serialize the user for the session
passport.serializeUser(function(user, done) {
console.log("serialize");
done(null, user.id);
});
// used to deserialize the user
passport.deserializeUser(function(id, done) {
console.log("deserialize");
connection.query("select * from users where id = "+id,function(err,rows){
done(err, rows[0]);
});
});
// =========================================================================
// LOCAL SIGNUP ============================================================
// =========================================================================
// we are using named strategies since we have one for login and one for signup
// by default, if there was no name, it would just be called 'local'
passport.use('local-signup', new LocalStrategy({
// by default, local strategy uses username and password, we will override with email
usernameField : 'email',
passwordField : 'password',
passReqToCallback : true // allows us to pass back the entire request to the callback
},
function(req, email, password, done) {
// find a user whose email is the same as the forms email
// we are checking to see if the user trying to login already exists
connection.query("select * from users where email = '"+email+"'",function(err,rows){
// console.log(rows);
if (err) // error connecting to database
return done(err);
if (rows.length) { // user exists
return done(null, false, req.flash('signupMessage', 'That email is already taken.'));
} else {
// if there is no user with that email
// create the user
var newUserMysql = new Object();
newUserMysql.email = email;
newUserMysql.password = password; // use the generateHash function in our user model
var insertQuery = "INSERT INTO users ( email, password ) values ('" + email +"','"+ password +"')";
connection.query(insertQuery,function(err,rows){
newUserMysql.id = rows.insertId;
return done(null, newUserMysql);
});
}
});
}));
// =========================================================================
// LOCAL LOGIN =============================================================
// =========================================================================
// we are using named strategies since we have one for login and one for signup
// by default, if there was no name, it would just be called 'local'
passport.use('local-login', new LocalStrategy({
// by default, local strategy uses username and password, we will override with email
usernameField : 'email',
passwordField : 'password',
passReqToCallback : true // allows us to pass back the entire request to the callback
},
function(req, email, password, done) { // callback with email and password from our form
connection.query("select * from users where email = '"+email+"'",function(err,rows){
if (err)
return done(err);
if (!rows.length) {
return done(null, false, req.flash('loginMessage', 'No user found.')); // req.flash is the way to set flashdata using connect-flash
}
// if the user is found but the password is wrong
if (!( rows[0].password == password))
return done(null, false, req.flash('loginMessage', 'Oops! Wrong password.')); // create the loginMessage and save it to session as flashdata
// all is well, return successful user
return done(null, rows[0]);
});
}));
};