Рекомендации по хранению маркеров доступа / обновления OAuth 2.0 с помощью расширений Google Chrome? - PullRequest
Новая
       106

Рекомендации по хранению маркеров доступа / обновления OAuth 2.0 с помощью расширений Google Chrome?

0 голосов
/ 11 октября 2018

Я создаю расширение Google Chrome, которое добавляет кнопки загрузки к изображениям на страницах профиля Instagram.Служба, на которую будет загружаться расширение - Imgur.

Поскольку в конечном итоге я хочу, чтобы пользователи могли загружать в определенные альбомы Imgur свои учетные записи, мне необходимо получить токены доступа OAuth из API Imgur.

Для этого ямы сделали следующее.При щелчке значка расширения в браузере открывается новая вкладка (не всплывающее окно).Эта вкладка открывает index.html.Нажатие на кнопку входа на этой странице вызывает URL авторизации.

Но где я могу безопасно хранить токены доступа / обновления после их получения ?Я не думаю, что могу поместить их в localStorage, потому что, насколько я знаю, у каждого источника есть свой localStorage.

Каков наилучший способ хранения токенов доступа OAuth 2.0 и токенов обновления, когда речь идет о таких расширениях Chrome, как у меня?

// oauth.js
let loginStatus = false;

if (!loginStatus) {
    createElement("p", "You are not logged in to Imgur.", "login-status");
    createElement("button", "Login to Imgur", "login-status", loginToImgur);
} else {
    createElement("p", "You are successfully logged in to Imgur.", "login-status");
    createElement("button", "Signout of Imgur", "login-status", function() {
        alert("this is a placeholder");
    });
}

function createElement(type, text, parentId, onclick) {
    const element = document.createElement(type);
    const textNode = document.createTextNode(text);
    element.appendChild(textNode);

    if (onclick) {
        element.onclick = onclick;
    }

    document.getElementById(parentId)
        .appendChild(element);

    return element;
}

function loginToImgur() {
    const AUTH_URL = "https://api.imgur.com/oauth2/authorize?response_type=token&client_id=<INDIVIDUAL_CLIENT_ID>";
    chrome.identity.launchWebAuthFlow({
        url: AUTH_URL,                      // Opens a window to initiate Imgur OAuth authorization and obtain access token
        interactive: true
    }, function(responseUrl) {
        console.log(responseUrl);
        // The access token we want will be found in the response URL, somewhere after the # symbol.
        extractToken(responseUrl);
    });
}

function extractToken(responseURL) {
    const accessToken = responseURL.split("#")[1]
                                    .split("access_token=")[1]
                                    .split("&")[0];
    console.log(accessToken);

    return accessToken;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Instagram to Imgur</title>
    <link rel="stylesheet" href="styles/index.css">
</head>
<body>
<h1>Login page</h1>
<div id="login-status"></div>

</body>
<script src="scripts/content/oauth.js"></script>
</html>
...