문제 설명
JSON 웹 토큰을 사용하여 Chrome 확장 프로그램에서 내 앱으로 POST 요청을 인증하는 방법은 무엇입니까? (How to authenticate a POST request from a chrome extension to my app with JSON web tokens?)
컨텍스트
내 HapiJS 웹 애플리케이션은 현재 OAuth 2.0을 사용하여 Google API에 액세스하고 있습니다. 사용자가 앱에서 인증하면 서버는 클라이언트에 저장되고 후속 요청의 Authorization 헤더로 다시 전송되는 JSON 웹 토큰(JWT)을 생성합니다.
내가 달성하고 싶은 것
이제 Google Chrome 확장 프로그램을 통해 동일한 단계(승인 + JWT 생성)를 사용하여 데이터를 다시 앱으로 동기화하고 싶습니다. REST 끝점.
현재 생각
내 아이디어는 JWT를 생성한 다음 저장하기 위해 내 애플리케이션에 있는 것과 동일한 OAuth 인증을 사용하는 것입니다. JWT를 Chrome 확장 프로그램에 추가합니다.
참조 솔루션
방법 1:
You can use your localStorage to save your jwt from the web app, then, if your extension runs on the same domain, you can access saved information from the localStorage through a content script, that gets injected in that page. You can communicate with your popup using the Message Passing API for Chrome extensions.
The problem with this approach comes with the fact that saving sensible information like user info (which is encoded in the jwt) is frowned upon due to security concerns.
Ideally, you should have a server which handles the authentication back and forth, saves the information and emits a session token for its clients, which then you can save in the localStorage if you wish.
방법 2:
If you want your popup.html to contain a link to allow users to open (leading to OAuth Google in your model), you need more work than a simple anchor link.
You will need to add event listeners to the link and use chrome.tabs.create.
Here is a demo code:
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>
(by Anita、Avram Tudor、Joseph Shih)