The logic flow:
1: client oauth authentication
2: browser redirect back to a predefined URL with client' code
3: server handle the code in the get method and acquire the client's data
what I want to achieve:
after acquiring the oauth data, the server send back the data to the client, then the client's browser can handle the data and make some changes accordingly.
app.get('/callback', function (req, res, next) {
client.getUser(openid, function (err, result) {
var userInfo = result; //this is client's userInfo
//now how can I send back the userInfo object back to the client?
//If I use res.send() the client's page will be nothing but just the data
//I cannot use socket.io here
//I am not sure If I can use ajax here because usually client does not send a request in the first place
})
})
Is there a way to send back data without changing the client's page? It seems to be a pretty easy solved problem But I have been scratching my head without coming up with nothing!
If Ajax is not what you want, you can put userInfo as a response parameter and render it in page's html code as JavaScript value. When page is opened in browser, parse this JavaScript value and store it to the global variable (window).
Put userInfo as a response parameter:
app.get('/callback', function (req, res, next) {
client.getUser(openid, function (err, result) {
var userInfo = result; //this is client's userInfo, assume it is JSON.
res.locals.userInfoString = JSON.stringify(userInfo);
})
})
Render it in page's html code, and parse it when page is loaded (assume nunjucks template is used, but any other template technology will support the same function):
<html>
<head>
...
<script type="text/javascript">
var userInfoString = '{{userInfoString}}';
window.userInfo = JSON.parse(userInfoString);
</script>
</head>
...
</html>
In this way, you can visit window.userInfo in your JavaScript code to get the userInfo object.
For Ajax solution, you can send an Ajax request once the page is loaded, fetching userInfo data from server. When the userInfo data is retrieved, change related DOM with jQuery or native JavaScript.
Send Ajax request once page is loaded, fetching data and change DOM:
<html>
<head>
...
<script type="text/javascript" src="./js/jQuery.js"></script>
<script type="text/javascript">
$(function() {
$.get('/userInfo', function(data) {
// change DOM with data.
});
});
</script>
</head>
...
</html>
When /callback is visited, get userInfo and save it in Database, then return page:
app.get('/callback', function (req, res, next) {
client.getUser(openid, function (err, result) {
var userInfo = result;
// save userInfo into Database.
res.render('callback_page');
})
});
When /userInfo is visited, get the openid and read userInfo data from database:
app.get('/userInfo', function (req, res, next) {
// get openid from req
// get userInfo from database by openid
res.json(userInfo);
});