使用 Google Chrome 扩展存储 OAuth 2.0 访问/刷新令牌的最佳实践？

MA *_*Hye 5 local-storage google-chrome-extension access-token oauth-2.0 refresh-token

我正在创建一个 Google Chrome 扩展程序，它将上传按钮添加到 Instagram 个人资料页面上的图像。扩展程序将上传到的服务是 Imgur。

由于我最终希望用户能够上传到其帐户上的特定 Imgur 相册，因此我需要从 Imgur API 获取 OAuth 访问令牌。

为此，我做了以下工作。单击浏览器中的扩展图标时，它会打开一个新选项卡（而不是弹出窗口）。此选项卡将打开index.html。单击该页面上的登录按钮将调用授权 URL。

但是，一旦收到访问/刷新令牌，我应该在哪里安全地存储它们呢？我不认为我可以将它们放在localStorage中，因为据我所知，每个origin都有自己的localStorage。

对于像我这样的 Chrome 扩展，存储 OAuth 2.0 访问令牌和刷新令牌的最佳实践是什么？

// 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;
}

Run Code Online (Sandbox Code Playgroud)

<!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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年前
查看次数：	1249 次
最近记录：	7 年前