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

Question

我在 Electron 中有一个 React 应用程序，我正在尝试使用 spotify-web-api-node 库访问 spotify API。但是，我不确定 oauth 流究竟是如何在 Electron 应用程序中工作的……首先，对于重定向 URL，我使用了 this question 并在我的文件中添加了一个 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 上运行的代码示例：

• Initial Desktop Sample
• Final Desktop Sample

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