题 如何使用JSON Web令牌从Chrome扩展程序验证POST请求到我的应用程序?


上下文 

我的HapiJS Web应用程序目前正在使用OAuth 2.0来访问Google API。一旦用户在应用程序中进行身份验证,服务器就会生成一个JSON Web令牌(JWT),该令牌存储在客户端上并在 Authorization 后续请求的标头。

我想要完成什么

我现在想要使用与我的谷歌浏览器扩展相同的步骤(授权+创建JWT),通过REST端点将数据同步回应用程序。

当前的想法 

我的想法是使用与我的应用程序相同的OAuth授权来生成JWT,然后将此JWT保存到Chrome扩展程序中。然后,此JWT将与我的chrome扩展程序的每个请求一起传递给我的应用程序以验证请求。

很遗憾,Chrome扩展程序似乎是通过Chrome Identity API使用自己的授权,并且不会让我使用我想到的身份验证过程。

下图描述了我想要在我的应用程序上创建JWT然后保存在我的chrome扩展中的步骤(并指出问题出在哪里): diagram 

问题

所以我的问题是:是否有另一种或更好的方法将我的应用程序上创建的JWT存储到我的Chrome扩展程序中?

希望我的解释很清楚,谢谢。


19
2017-11-23 15:49


起源


你有没有尝试过 storage API? developer.chrome.com/extensions/storage - Moin
显示尝试获取JWT的相关代码。 - wOxxOm
复制步骤/示例应用程序会很好我不清楚问题是将JWT送到扩展程序还是让扩展程序使用JWT - Number 9
chrome.identity.launchWebAuthFlow返回重定向url,可能是你的JWT。 - Steve Campbell
请查找代码示例 这里 我们正在认证分支上处理JWT问题。 - Anita


答案:


如果您希望popup.html包含允许用户打开的链接(在模型中导致OAuth Google),则需要比简单的锚链接更多的工作。

您需要向链接添加事件侦听器并使用 chrome.tabs.create

这是一个演示代码:

popup.html

<html>
    <body>
        <span class="link" data-href="https://www.google.com">link</span>
        <span class="link" data-href="https://www.bing.com">link</span>
        <span class="link" data-href="https://www.yahoo.com">link</span>

        <script>

            //get all links
            var links = document.getElementsByClassName('link');

            //loop through each link
            for (var ii = 0, nn = links.length; ii < nn; ii++)
            {
                //add listener
                links[ii].addEventListener('click', function(e)
                {
                    //grab link
                    var url = this.getAttribute('data-href');

                    //open link in new tab using chrome.tabs.create method
                    chrome.tabs.create({url:url});
                });
            }
        </script>
    </body>
</html>

0
2018-02-02 04:47





您可以使用localStorage从Web应用程序保存您的jwt,然后,如果您的扩展程序在同一个域上运行,您可以通过内容脚本从localStorage访问保存的信息,该脚本将被注入该页面。您可以使用适用于Chrome扩展程序的Message Passing API与您的弹出窗口进行通信。

这种方法的问题在于,由于安全问题,保存诸如用户信息(在jwt中编码)之类的敏感信息是不受欢迎的。

理想情况下,您应该有一个服务器来回处理身份验证,保存信息并为其客户端发出会话令牌,然后您可以根据需要保存在localStorage中。


0
2018-05-10 08:59





你尝试过使用localStorage吗?

您可以将令牌保存为:

localStorage.setItem('token', 'abcde')

并可以检索

localStorage.getItem('token')

但是如果重新加载页面,信息将会丢失。


-1
2018-05-11 22:22