Thream/socketio-jwt
Archived
2
1
Fork 0
Code Issues Pull Requests Releases Activity

Merge pull request #65 from Annyv2/seed-project

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
example/socketsio-auth0-sample/README.md
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

5
example/socketsio-auth0-sample/auth0-variables.js
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);

90
example/socketsio-auth0-sample/index.html
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>

31
example/socketsio-auth0-sample/index.js
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){
@ -25,6 +28,16 @@ io
});
});
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');
});

11
example/socketsio-auth0-sample/package.json
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"
}

10
example/socketsio-auth0-sample/public/stylesheets/style.css Normal file
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);}

68
example/socketsio-auth0-sample/views/index.jade Normal file
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
})
};

7
example/socketsio-auth0-sample/views/layout.jade Normal file
View File

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