如何使用JSON Web令牌从Chrome扩展程序验证POST请求到我的应用程序？
Ani*_*ita 27 javascript authentication oauth google-chrome-extension jwt
上下文
我的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扩展中的步骤(并指出问题出在哪里):
问题
所以我的问题是:是否有另一种或更好的方法将我的应用程序上创建的JWT存储到我的Chrome扩展程序中？
希望我的解释清楚
您可以使用 localStorage 从 Web 应用程序保存 jwt，然后，如果您的扩展在同一域上运行，您可以通过注入该页面的内容脚本访问 localStorage 中保存的信息。您可以使用 Chrome 扩展程序的消息传递 API 与弹出窗口进行通信。
这种方法的问题在于，出于安全考虑，保存诸如用户信息（在 jwt 中编码）之类的敏感信息是不受欢迎的。
理想情况下，您应该有一个服务器来处理来回身份验证、保存信息并为其客户端发出会话令牌，然后您可以根据需要将其保存在 localStorage 中。
如果您希望 popup.html 包含一个允许用户打开的链接（在您的模型中指向 OAuth Google），那么您需要的工作比简单的锚链接更多。
您需要将事件侦听器添加到链接并使用chrome.tabs.create。
这是一个演示代码：
弹出窗口.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>
| 归档时间： |
|
| 查看次数： |
2454 次 |
| 最近记录： |