chrome 扩展从网站获取会话数据答案

【问题标题】：chrome extension getting session data from websitechrome 扩展从网站获取会话数据
【发布时间】：2019-09-16 09:53:27
【问题描述】：

在我的 django 项目中，我有一个设置了 login_required 的 url，因为我需要其中的 request.user 变量来处理一些数据，

我还创建了一个简单的 chrome 扩展，我将不得不向该 django 项目 url 发送请求。

我不想使用扩展中的用户名和密码来登录和发送请求

我想：

安装扩展后将用户重定向到我的网站
他们将登录，
该扩展程序将知道用户已登录，它会获取（并保存）一个密钥，我可能会在登录成功后将其注入页面
密钥可以在请求中用作查询参数，以便在没有任何用户名和密码的情况下识别用户

如果这似乎是一个愚蠢的问题，我很抱歉，但我对如何做到这一点感到非常困惑

PS：我已经有一个系统，用户可以使用密钥在不登录的情况下发出请求，我只需要一种在安装扩展程序时打开选项卡的方法，然后登录然后获取密钥（登录后在页面中注入），并将其保存以供以后在扩展程序中使用。

【问题讨论】：

这似乎不是一个愚蠢的问题，但它过于宽泛和模糊。根据站点处理登录的方式，您可以使用 XMLHttpRequest 之类的琐碎内容或专用的 chrome.identity.launchWebAuthFlow。
@wOxxOm 网站上的登录很简单，我正在发送带有用户名和密码的发布请求，并返回包含 login_success 属性（true 或 false）的 json，我正在尝试要做的，是在网站中（第一次安装扩展程序）进行身份验证（仅一次）后，能够在扩展程序内部进行请求
这可能确实非常简单，在这种情况下，您会在阅读扩展文档中的overview 后立即看到自己，但我仍然不知道您到底在做什么那里以及似乎是什么问题。

标签： django api google-chrome session google-chrome-extension

【解决方案1】：

第一次打开扩展程序时，我向用户显示了一个登录页面。登录页面将用户名和密码发送到对其进行身份验证的 API。如果信息正确，则返回所需的用户信息（主要是 API 密钥）。然后将信息保存到本地存储。

var username = document.querySelector('[name="username"]');
var password = document.querySelector('[name="password"]');

$.ajax({
    URL : 'https://example.com/api/extension-auth/',
    type: 'POST',
    crossDomain: true,
    data: JSON.stringify({
        'username': username.value.trim(),
        'password': password.value.trim(),
    }),
    success: res => {
        if (res.api_key) {
            browser.storage.sync.set({ 'user_data': {'api_key': api_key} }, () => {
                // show extension main logged in page
            });
        }
        else {
            // show invalid login information alert
        }
    },
    error: function (err) {
        // show server error aler 
    },
});

每次打开扩展时都会检查本地存储

browser.storage.sync.get('user_data', data => {
    if (data.user_data) {
        if (valid_api_key(data.user_data.api_key)) {
            // show extension main logged in page
        }
        else {
            // show login page
        }
    }
    else {
        // show login page
    }
});

valid_api_key 函数随机调用 API 以检查是否存在身份验证错误。

然后，我使用本地存储中保存的 API 密钥来执行 API 请求。

【讨论】：