尝试在 Electron 桌面应用程序中使用 oauth 流程（使用 spotify API）？

Question

我在 Electron 中有一个 React 应用程序，我正在尝试使用 spotify-web-api-node library. However, I'm not sure exactly how the oauth flow is meant to work inside of an Electron app... Firstly, for the redirect URL, I used 访问 spotify API 并向我的文件添加了一个 registerFileProtocol 调用。然后我添加了一个特定的 ipcMain.on 处理程序来接收来自页面的 spotify 登录调用，我已经确认它可以与控制台日志一起使用。但是，当我开始实际调用 authorizeURL 时，没有任何反应吗？

这是我的一部分 main.js:

app.whenReady().then(() => {
...
  protocol.registerFileProtocol(
    "oauthdesktop",
    (request, callback) => {
      console.log("oauthdesktop stuff: ", request, callback);
      //parse authorization code from request
    },
    (error) => {
      if (error) console.error("Failed to register protocol");
    }
  );
});

ipcMain.on("spotify-login", (e, arg) => {
  const credentials = {
    clientId: arg.spotifyClientId,
    clientSecret: arg.spotifySecret,
    redirectUri: "oauthdesktop://test",
  };

  const spotifyApi = new SpotifyWebApi(credentials);
  console.log("spapi: ", spotifyApi);

  const authorizeURL = spotifyApi.createAuthorizeURL(
    ["user-read-recently-played", "playlist-modify-private"],
    "waffles"
  );
  console.log("spurl: ", authorizeURL);

  axios.get(authorizeURL);
}

我希望出现典型的 Spotify 登录页面弹出窗口，但并没有出现。我也希望（可能） registerFileProtocol 回调记录一些东西，但它没有。我来这里做什么？ authorization guide 特别提到在 auth url 上执行 GET 请求，这就是我在这里所做的...

Answer 1

在桌面应用中，建议打开系统浏览器，Spotify 登录页面将在那里呈现，作为创建承诺的一部分。 opener library 可用于调用浏览器。

当用户完成登录后，技术是通过私有 URI 方案/文件协议接收响应，然后解析承诺，获取授权代码，然后将其交换为令牌。虽然这很棘手。

我的资源

我有一些关于此的博客文章，您可以从中借鉴一些想法，还有几个代码示例，您可以运行在您的 PC 上：

第二个是 React 应用程序，使用私有 URI 方案，因此与您的非常相似。我使用 AppAuth-JS library 而不是 Spotify。

尝试在 Electron 桌面应用程序中使用 oauth 流程（使用 spotify API）？

Trying to use oauth flow in Electron desktop app (with spotify API)?

oauth

node.js

oauth-2.0

electron