Merge pull request #65 from Annyv2/seed-project

Update Seed Project
This commit is contained in:
Nathan Totten 2015-12-08 16:19:44 -08:00
commit c31764aac3
8 changed files with 125 additions and 108 deletions

View File

@ -4,7 +4,16 @@ This is the seed project you need to use if you're going to create a Socket.io s
### Configure your Auth0 credentials
First, you need to put your `AUTH0_DOMAIN` (example.auth0.com), your `AUTH0_CLIENT_ID` and your `AUTH0_CLIENT_SECRET` on the `auth0-variables.js` file . You can find this information in the Application Settings on your Auth0.com dashboard.
First, you need to set the ClientSecret, ClientId and Domain for your Auth0 app as environment variables with the following names respectively: `AUTH0_CLIENT_SECRET`, `AUTH0_CLIENT_ID` and `AUTH0_DOMAIN`. You can find this information in your Auth0 Dashboard.
So, create a file named `.env` in the directory and set the values like the following:
````bash
# .env file
AUTH0_CLIENT_SECRET=myCoolSecret
AUTH0_CLIENT_ID=myCoolClientId
AUTH0_DOMAIN=myCoolDomain
````
### Set up the Allowed Origin (CORS) in Auth0

View File

@ -1,5 +0,0 @@
(function (exports){
exports.AUTH0_DOMAIN = 'Your_Auth0_Domain';
exports.AUTH0_CLIENT_ID = 'Your_Auth0_Client_Id';
exports.AUTH0_CLIENT_SECRET = 'Your_Auth0_Client_Secret';
})(typeof exports === 'undefined' ? this['auth0Variables']={}: exports);

View File

@ -1,90 +0,0 @@
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
#login { width: 100%; padding: 10px }
#login button { width: 10%; padding: 8px; border: none; background: rgb(130, 255, 130);}
</style>
<!-- Auth0 lock script -->
<script src="//cdn.auth0.com/js/lock-7.12.min.js"></script>
<!-- Setting the right viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script src="auth0-variables.js"></script>
</head>
<body>
<div id="login">
<button>Login</button>
</div>
<div id="chat">
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$('#chat').hide();
var userProfile;
var userToken;
$('#login button').click(function(e){
e.preventDefault();
lock.show(function(err, profile, token) {
if (err) {
//Error callback
alert('There was an error');
alert(err);
} else {
//Success callback
userToken = token;
//Save the JWT token
localStorage.setItem('userToken', token);
//Save the profile
userProfile = profile;
openChat();
}
})
});
function openChat(){
var socket = io();
socket.on('connect', function () {
socket.on('authenticated', function () {
//Do
$('#login').hide();
$('#chat').show();
$('form').submit(function(event){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
console.log("msg");
$('#messages').append($('<li>').text(msg));
});
})
.emit('authenticate', {token: userToken}); // send the jwt
})
};
var lock = null;
$(document).ready(function() {
//These are set in auth0-variables.js
lock = new Auth0Lock(auth0Variables.AUTH0_CLIENT_ID, auth0Variables.AUTH0_DOMAIN);
});
</script>
</body>
</html>

View File

@ -1,20 +1,23 @@
var app = require('express')();
var express = require('express');
var app=express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var socketioJwt = require('socketio-jwt');
var auth0Variables = require('./auth0-variables');
var dotenv = require('dotenv');
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
dotenv.load();
app.get('/auth0-variables.js', function(req, res){
res.sendFile(__dirname + '/auth0-variables.js');
});
var env = {
AUTH0_CLIENT_ID: process.env.AUTH0_CLIENT_ID,
AUTH0_DOMAIN: process.env.AUTH0_DOMAIN,
}
app.set('views', __dirname + '/views')
app.set('view engine', 'jade');
io
.on('connection', socketioJwt.authorize({
secret: Buffer(auth0Variables.AUTH0_CLIENT_SECRET, 'base64'),
secret: Buffer(JSON.stringify(process.env.AUTH0_CLIENT_SECRET), 'base64'),
timeout: 15000 // 15 seconds to send the authentication message
}))
.on('authenticated', function(socket){
@ -24,7 +27,17 @@ io
io.emit('chat message', msg);
});
});
app.use(express.static(__dirname + '/public'));
app.get('/', function (req, res) {
res.render('index',
{ env: env }
)
})
http.listen(3001, function(){
console.log('listening on *:3001');
});

View File

@ -1,9 +1,14 @@
{
"name": "socket-chat-example",
"version": "0.0.1",
"description": "my first socket.io app",
"name": "socket-Auth0-chat-example",
"version": "1.0.0",
"description": "Auth0 + Socket.io seed",
"repository": "git://github.com/auth0/socketio-jwt",
"author": "Auth0",
"license": "MIT",
"dependencies": {
"dotenv": "^1.2.0",
"express": "^4.10.2",
"jade": "^1.11.0",
"socket.io": "^1.3.6",
"socketio-jwt": "^4.3.1"
}

View File

@ -0,0 +1,10 @@
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
#login { width: 100%; padding: 10px }
#login button { width: 10%; padding: 8px; border: none; background: rgb(130, 255, 130);}

View File

@ -0,0 +1,68 @@
extends layout
block content
script(src="https://cdn.auth0.com/js/lock-7.12.js")
script(src="/socket.io/socket.io.js")
script(src="http://code.jquery.com/jquery-1.11.1.js")
div#login
button.btn Login
div#chat
ul#messages
form(action="")
input(id="m" autocomplete="off")
button.btn Send
script.
var userProfile;
var userToken;
var lock = new Auth0Lock('#{env.AUTH0_CLIENT_ID}', '#{env.AUTH0_DOMAIN}');
$('#chat').hide();
$('#login button').click(function(e){
e.preventDefault();
lock.show(function(err, profile, token) {
if (err) {
//Error callback
alert('There was an error');
alert(err);
} else {
console.log('connected and authenticated');
//Success callback
userToken = token;
//Save the JWT token
localStorage.setItem('userToken', token);
//Save the profile
userProfile = profile;
openChat();
}
})
});
function openChat(){
var socket = io();
socket.on('connect', function () {
socket.on('authenticated', function () {
//Do
$('#login').hide();
$('#chat').show();
$('form').submit(function(event){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
console.log("msg");
$('#messages').append($('<li>').text(msg));
});
})
.emit('authenticate', {token: userToken}); // send the jwt
})
};

View File

@ -0,0 +1,7 @@
doctype html
html
head
link(rel='stylesheet', href='/stylesheets/style.css')
body
block content