Question

我正在尝试创建一个小扩展。我把它全部在扩展之外工作，我正在尝试迁移。

我得到的只是“Dropbox登录成功”但没有重定向或想法接下来会发生什么。

我使用以下内容进行身份验证（我不知道他们做了什么）。我一直在花时间理解manifest.json，我认为解决方案在别处。任何帮助表示赞赏！

chrome_oauth_receiver.html

<!doctype html>
<html>
<head>
    <script src="https://www.dropbox.com/static/api/dropbox-datastores-1.0-latest.js"></script>
    <script src="chrome_oauth_receiver.js"></script>
</head>
<body>
    <h1>Dropbox sign-in successful</h1>
    <p>Please close this window.</p>
</body>
</html>

chrome_oauth_receiver.js

Dropbox.AuthDriver.Chrome.oauthReceiver();

的manifest.json

{
    "manifest_version": 2,
    "name": "Dropbox",
    "description": "",
    "version": "1.0",

    "content_security_policy": "script-src 'self' https://www.dropbox.com/; object-src 'self'",
    "background" : {
        "scripts" : [
            "jquery.min.js",
            "dropbox-datastores.js",
            "markdown.min.js",
            "popup.js"
        ],
        "persistent" : false
    },

    "permissions": [
        "tabs",
        "storage",
        "https://*.dropbox.com/*"
    ],

    "web_accessible_resources": [
        "chrome_oauth_receiver.html"
    ],

    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    }
}

popup.html和popup.js基本上就是这里的代码：https://www.dropbox.com/developers/blog/71/writing-a-file-with-the-dropbox-javascript-sdk

Answer 1

使用当前dropbox-sdk-js v2，您需要获取 authUrl

const Dropbox = require('dropbox'),
      // your extension ID url + chrome oauth receiver
      fullReceiverPath = 'chrome-extension://imkoifkgjagghnncjkhggdhalmcnfklk/html/chrome_oauth_receiver.html',
      // App key from https://www.dropbox.com/developers/apps/ 
      APIKEY = 'k1ff2saf035rn7c';


let dbc = new Dropbox({clientId: APIKEY}),
    authToken = '',
    authUrl = dbc.getAuthenticationUrl(fullReceiverPath);
    // expected returned value - https://www.dropbox.com/oauth2/authorize?response_type=token&client_id=k1ff2saf035rn7c&redirect_uri=chrome-extension://imkoifkgjagghnncjkhggdhalmcnfklk

不要忘记在 manifest.json 中将 /html/chrome_oauth_receiver.html 列入白名单：

"web_accessible_resources": [ "html/chrome_oauth_receiver.html"]

为了更好地理解，红色 chrome documentation

最后，这是 chrome_oauth_receiver.html

的简单示例

<!DOCTYPE html>
<html lang="en">
<head>
   <script type="text/javascript">
   window.addEventListener('load', () => {
     var token = window.location.hash;
     chrome.runtime.sendMessage({type: 'dropboxConnectToken', content: token});
     window.location.hash = '';
     if (window.close) {
       return window.close();
     }
    });
  </script>
</head>
<body>
  <h1>Dropbox sign-in successful</h1>
  <p>Please close this window.</p>
</body>
</html>

现在，当您使用标准chrome-extension message passing时，您将获得带有令牌的URL哈希。它现在只是一个解析它的细节。

祝你好运！

Dropbox + Chrome扩展Oauth接收器

1 个答案: