从Chrome扩展程序登录到我的网站 [英] Log in to my web from a chrome extension

问题描述

我有一个网站，登录的用户可以填写表单发送信息。我希望我的用户也可以通过chrome扩展来完成此操作。我设法让表单传递信息的工作，但我只想登录用户能够做到这一点。这就像一个twitter或springpad扩展，当用户第一次打开扩展，它将不得不登录或注册。我在堆栈溢出中看到以下答案：使用chrome扩展名登录网站并从中获取数据

我试了一下，并将这段代码放在background.html中：

 函数login（）{
 $ .ajax（{
 url：http：// localhost / login ，输入：GET，dataType：html，成功：function（）{
 $ .ajax（{
 url：http：// localhost / login，type：POST，数据：{
email：[e-mail]，
密码：mypassword，
}，
 dataType：html，
成功：函数（数据）{
 //现在你可以解析你的报告屏幕
} 
}）; 
} 
}）; 
} 
  

在我的popup.html中，我放置了下面的代码：

  var bkg = chrome.extension.getBackgroundPage（）
 $（document）.ready（function（）{
 $（ '#pageGaffe'）。val（bkg.getBgText（））; 
 bkg.login（）; 
}）; 
  

在我的服务器上，它在node.js中，我有一个console.log当他登录时显示用户信息，所以我看到当我加载我的扩展时，它会登录。问题是我如何让用户自己登录，而不是手动将我的详细信息放入代码中，如何保持登录状态，并在提交表单时将用户的详细信息发送到网络。

我希望我能够正确解释自己。

谢谢。

解决方案

在回答这个问题之前，我想提醒您您可以从Chrome 13开始制作来自内容脚本的跨源xhr ，如果您已声明适当的权限。这是从页面摘录

版本说明：从Chrome 13开始，内容脚本可以将交叉源请求发送到与服务器相同的服务器其余的扩展。在Chrome 13之前，内容脚本无法直接发出请求;相反，它必须向其父扩展发送一条消息，要求扩展产生一个跨域请求。

即将到来的点。您只需从您的扩展（内容脚本或后台页面）向您的域创建一个XmlHttpRequest并等待响应。

在服务器上

阅读请求和会话cookie。如果会话有效，则发送正确的响应，否则发送错误代码。 401 或其他任何东西。

在客户端

如果响应是正确的显示它，否则显示一个登录链接指向您的网站的登录页面。

它是如何工作的：

如果启用了用户浏览器中的cookie，它将起作用。无论何时用户登录到您的网站，您的服务器都会设置驻留在用户浏览器中的会话Cookie。现在，浏览器向您的域发送的每个请求都会传输此cookie。即使请求来自Google Chrome扩展程序，也会传输此Cookie。

警告

确保您向用户显示适当的提示，表明他们已登录到您的应用程序。由于您的用户界面大部分位于扩展名内，因此用户可能不会意识到他们与您的网站的有效会话，并且他们可能会留下一个无人看管的活动会话，如果用户正在从公共互联网信息亭访问，可能会被滥用。 / p>

参考

您可以看看我用扩展名这里。

I've got a web where logged in users can fill out a form to send information. I wanted my users to do this from a chrome extension too. I managed to get the form to sen information working but I only want logged in users to be able to do that. It's like a twitter or springpad extension, when the user first opens up the extension, it would have to log in or register. I saw the following answer at stack overflow: Login to website with chrome extension and get data from it

I gave it a try and put this code in background.html:

function login() {
    $.ajax({
        url: "http://localhost/login", type: "GET", dataType: "html", success: function() {
            $.ajax({
                url: "http://localhost/login", type: "POST", data: {
                    "email": "[e-mail]",
                    "password": "mypassword",
                },
            dataType: "html",
            success: function(data) {
               //now you can parse your report screen
            }
            });
        }
    }); 
}

In my popup.html I put the following code:

var bkg = chrome.extension.getBackgroundPage()
$(document).ready(function() {
    $('#pageGaffe').val(bkg.getBgText());  
    bkg.login();        
});

And in my server, which is in node.js, I've got a console.log that shows user information when he logs in, so I saw that when I load my extension, it does log in. The problem is how can I get the user to log in by itself, instead of manually putting my details in the code, how to stay logged in in the extension and when submitting the form, sending the user's details to the web.

I hope I've managed to explain myself correctly.

Thanks.

解决方案

Before answering this question I would like to bring to your notice that you can make cross origin xhr from your content scripts as of Chrome 13 if you have declared proper permissions. Here is the extract from the page

Version note: As of Chrome 13, content scripts can make cross-origin requests to the same servers as the rest of the extension. Before Chrome 13, a content script couldn't directly make requests; instead, it had to send a message to its parent extension asking the extension to make a cross-origin request.

Coming to the point. You simply have to make an XmlHttpRequest to your domain from your extension (content script or background page) and wait for the response.

At Server

Read the request and session cookie. If session is valid send proper response, else send an error code. 401 or anything else.

At client

If response is proper display it, else display a login link directing to login page of your website.

How it works:

It will work if cookies in user's browser is enabled. Whenever user logs in to your website your server sets a session cookie which resides in user's browser. Now with every request that the browser sends to your domain, this cookie is transmitted. This cookie will be transmitted even if the request is from a Google Chrome Extension.

Caveat

Make sure you display proper cues to user indicating that they are logged in to your application. Since your UI will be mostly inside the extension, it is possible that user might not be aware of their valid session with your website and they might leave an active session unattended which might be abused if user is accessing it from a public internet kiosk.

Reference

You can take a look at a similar implementation that I have done with my extension here.

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