从Google Chrome浏览器扩展程序登录流星应用程序 [英] Log in to a meteor app from a Google chrome extension

问题描述

我有一个流星应用程序，它使用restop2软件包来发布数据。

restop2软件包提供了一种通过将用户/密码发送到特定URL ：

  curl --datapassword = PASSWORD& user = USERNAMEhttp：// localhost：3000 / api / login / 
  

它返回一个包含用户ID和访问令牌的JSON响应：

  {loginToken：TOKEN，userId：USERID，success：true} 
  
 
 
 
然后我可以通过在标头中发送用户ID和访问令牌来发布到api：
  curl -X POST -HX-Login-Token：TOKEN-HX-User-Id：USERID-HContent-Type：application / json -d'{title：我的标题，内容：我的内容}'http：// localhost：3000 / api / clip / add 
  
到目前为止，非常好。
 
 
 
现在我想从Google扩展程序登录到我的应用程序。我怎样才能做到这一点 ？我是否应该简单地在扩展的弹出窗口中实现登录表单，通过HTTPS将数据发布到我的网站，并在随后的请求中使用返回的标记？我应该在哪里存储这个令牌？
解决方案
经过一番挖掘，以下是我如何实现此目的：
 
 
 
从Chrome扩展程序向远程网址发送XHR请求时，域名中的cookies将与请求一起发送。
 
 
 
不幸的是，Meteor使用本地存储来代替cookies来存储用户ID和令牌。
 
 
 
因此，首先要做的是添加一种方法来识别使用cookie的用户。我使用了从方法之外访问Meteor.userId / publish 并修改它。
 
 
 
由于我们将使用cookie，因此我们不再需要restop2及其认证过程;我们将直接从cookie中检索登录令牌。
 
 
 
首先，在用户验证时设置cookie： 
 
 
  if（Meteor.isClient）{
 Deps.autorun（function（）{
 if（Accounts.loginServicesConfigured（）&& Meteor.userId（））{
 setCookie（meteor_userid，Meteor.userId（），30）; 
 setCookie（meteor_logintoken，localStorage.getItem（Meteor.loginToken），30）; 
} 
 }）; 
 
 $ / code> 
然后，添加一个路由作为您的端点，用户将从饼干。我发现登录标记在用于查询之前需要进行散列处理：
  this.route（'extension'， {
 path：'/ extension / post'，
其中：'server'，
 action：function（）{
 var userId = get_cookies（this.request）['meteor_userid ']; 
 var loginToken = get_cookies（this.request）['meteor_logintoken']; 
 var user = Meteor.users.findOne（{_ id：userId，services.resume.loginTokens.hashedToken： Accounts._hashLoginToken（loginToken）}）; 
 
 if（user）{
 var doc = this.request.body; //你应该在这里做一些消毒...... 
 Clips.insert（doc）; 
} 
} 
}）; 
  
然后，扩展名为：
 
 
 
首先，请确保您在manifest.json中设置了正确的权限： 
 
 
 permissions：[
http：/ / localhost：3000 /
，
  
最后，在popup.js中发送请求：
  var data = {...}; 
 var xhr = new XMLHttpRequest（）; 
 xhr.open（POST，http：// localhost：3000 / extension / post，true）; 
 xhr.setRequestHeader（'Content-Type'，'application / json; charset = UTF-8'）; 
 xhr.send（JSON.stringify（data））; 
  
瞧！
 
I have a meteor app that uses restop2 package to allow posting data.

The restop2 package provides a way to log in by sending user / password to a specific URL :
curl --data "password=PASSWORD&user=USERNAME" http://localhost:3000/api/login/
It returns a JSON response containing a user ID and an access token :
{"loginToken":"TOKEN","userId":"USERID","success":true}
I can then post to the api by sending the user ID and the access token in the header :
curl -X POST -H "X-Login-Token: TOKEN" -H "X-User-Id: USERID" -H "Content-Type: application/json" -d '{"title":"My title","content":"My content"}' http://localhost:3000/api/clip/add
So far, so good.

Now I'd like to log into my app from a Google extension. How can I do this ? Should I simply implement a login form in the extension's popup, post the data to my web site over HTTPS and use the returned token in subsequent requests ? And where should I store this token ?
解决方案
After some digging, here is how I achieved this :

When making an XHR request to a remote URL from a Chrome extension, cookies from the domain are sent along with the request.

Unfortunately, Meteor uses local storage instead of cookies to store user id and token.

So the first thing to do is to add a way to identify a user using cookies. I used the technique described in Access Meteor.userId from outside a method/publish and modified it a little.

Since we will use cookies, we don't need restop2 and its authentication process anymore; we will retrieve login token directly from the cookies.

First, set cookies when user authenticates :
if (Meteor.isClient) {
  Deps.autorun(function() {
    if(Accounts.loginServicesConfigured() && Meteor.userId()) {
        setCookie("meteor_userid", Meteor.userId(),30);
        setCookie("meteor_logintoken", localStorage.getItem("Meteor.loginToken"),30);
    }
  });
}
Then, add a route as your endpoint where the user will be retrieved from the cookies. I found out that the login token needs to be hashed before being used in the query :
this.route('extension', {
  path: '/extension/post',
  where: 'server',
  action: function() {
    var userId = get_cookies(this.request)['meteor_userid'];
    var loginToken = get_cookies(this.request)['meteor_logintoken'];
    var user = Meteor.users.findOne({_id:userId, "services.resume.loginTokens.hashedToken":Accounts._hashLoginToken(loginToken)});

    if (user) {
      var doc = this.request.body; // You should do some sanitization here...
      Clips.insert(doc);
    }
  }
});
Then, the extension :

First, ensure you have set the correct permissions in manifest.json :
"permissions": [
  "http://localhost:3000/"
],
Finally, send the request in popup.js :
var data = {...};
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://localhost:3000/extension/post", true);
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
xhr.send(JSON.stringify(data));
And voilà !

                        
这篇关于从Google Chrome浏览器扩展程序登录流星应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！