Question

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

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

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

但是，一旦收到访问/刷新令牌，我该在哪里安全存储？我认为我不能将它们放在localStorage中，因为据我所知，每个来源都有自己的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;
}

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

使用Google Chrome扩展程序存储OAuth 2.0访问/刷新令牌的最佳做法？

0 个答案: