Как аутентифицировать POST-запрос от расширения chrome для моего приложения с помощью токенов JSON?

контекст

В настоящее время мое веб-приложение HapiJS использует OAuth 2.0 для доступа к API Google. Как только пользователь аутентифицируется в приложении, сервер генерирует JNT Web Token (JWT), который хранится на клиенте и отправляется обратно в заголовок Authorization последующих запросов.

Что я хотел бы сделать

Теперь я хотел бы использовать те же шаги (авторизация + создание JWT) с моим расширением Google Chrome, которое синхронизирует данные с приложением через конечную точку REST.

Текущие мысли

Моя идея состоит в том, чтобы использовать ту же авторизацию OAuth, что и в моем приложении, для создания JWT, а затем для сохранения этого JWT в расширение Chrome. Затем этот JWT передается с каждым запросом из моего расширения chrome в мое приложение для проверки запроса.

К сожалению, кажется, что расширение Chrome использует собственную авторизацию через API удостоверений Chrome и не позволит мне использовать процесс аутентификации, который я имел в виду.

На приведенной ниже диаграмме описаны шаги, которые я предвижу, чтобы получить JWT, созданный в моем приложении, затем сохраненный на моем расширении chrome (а также указывает на то, где проблема):

Вопрос

Поэтому мой вопрос: есть ли другой или лучший способ хранения JWT, созданного в моем приложении, на моем расширении Chrome?

Надеюсь, мои объяснения достаточно ясны

Ответы

Ответ 1

Вы можете использовать свой localStorage для сохранения вашего jwt из веб-приложения, а затем, если ваше расширение работает в одном домене, вы можете получить доступ к сохраненной информации из localStorage через содержимое script, которое будет введено на этой странице. Вы можете общаться со своим всплывающим окном, используя API-интерфейс передачи сообщений для расширений Chrome.

Проблема с этим подходом заключается в том, что сохранение разумной информации, такой как информация пользователя (которая закодирована в jwt), неодобрительно из-за проблем с безопасностью.

В идеале у вас должен быть сервер, который обрабатывает аутентификацию взад и вперед, сохраняет информацию и испускает токен сеанса для своих клиентов, который затем вы можете сохранить в localStorage, если хотите.

Ответ 2

Если вы хотите, чтобы ваш 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>

Ответ 3

Я думаю, что вы могли бы использовать localStorage (или библиотеку, которая делает то же самое, но могла бы работать лучше для вашего кода)

Без кода, я не могу сделать лучше для тебя, братан, извини

Ответ 4

Вы пытались использовать localStorage?

Вы можете сохранить токен следующим образом:

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

и может извлекать

localStorage.getItem('token')

но информация будет потеряна при повторной загрузке страницы.