我正在创建一个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>