获取oauth的信息后如何将数据发送回客户端

Question

逻辑流程：

1：客户端oauth认证

2：浏览器使用客户端代码

重定向回预定义的URL

3：服务端处理get方法中的代码，获取客户端的数据

我想达到的目标：

服务器端获取到oauth数据后，将数据发回给客户端，客户端的浏览器就可以对数据进行处理，并进行相应的修改。

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
           })

   })

有没有办法在不更改客户端页面的情况下发回数据？看起来是个很容易解决的问题，但一直摸不着头脑，一无所获！

Answer 1

如果 Ajax 不是您想要的，您可以将 userInfo 作为响应参数并在页面的 html 代码中将其呈现为 JavaScript 值。在浏览器中打开页面时，解析此 JavaScript 值并将其存储到全局变量 (window).

将userInfo作为响应参数:

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);
       })
})

在页面的 html 代码中渲染它，并在页面加载时解析它（假设使用 nunjucks 模板，但任何其他模板技术都将支持相同功能):

<html>
  <head>
  ...
  <script type="text/javascript">
    var userInfoString = '{{userInfoString}}';
    window.userInfo = JSON.parse(userInfoString);
  </script>
  </head>
  ...
</html>

这样，你就可以在你的JavaScript代码中访问window.userInfo获取userInfo对象了。

对于 Ajax 解决方案，您可以在页面加载后发送 Ajax 请求，从服务器获取 userInfo 数据。检索 userInfo 数据时，将相关 DOM 更改为 jQuery 或本机 JavaScript。

页面加载后发送Ajax请求，获取数据并更改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>

访问/callback时，获取userInfo并保存到数据库中，然后return页面：

app.get('/callback', function (req, res, next) {
  client.getUser(openid, function (err, result) {
     var userInfo = result;
     // save userInfo into Database.
     res.render('callback_page');
   })
});

访问/userInfo时，获取openid并从数据库读取userInfo数据：

app.get('/userInfo', function (req, res, next) {
  // get openid from req
  // get userInfo from database by openid
  res.json(userInfo);
});

获取oauth的信息后如何将数据发送回客户端

How to send data back to client, after acquiring the oauth's info

httprequest

node.js

oauth-2.0

express

wechat