Question

我正在尝试在Angular 2（Electron）应用程序中实现OAuth2身份验证。

我在用户点击“登录”按钮后调用弹出窗口的方式实现了这一点。

在弹出窗口用户输入他们的凭据并允许访问和确认代码被返回，我能够捕获重定向请求，这是我不能没有弹出窗口的。

这是有效的实现：

return Observable.create((observer: Observer<any>) => {


      let authWindow = new electron.remote.BrowserWindow({ show: false, webPreferences: {
      nodeIntegration: false
      } });

      authWindow.maximize();
        const authUrl = AUTHORIZATION_WITH_PROOF_KEY_URL
            + `?client_id=${CLIENT_ID}&response_type=code&scope=api_search&`
            + `redirect_uri=${REDIRECT_URL}&code_challenge=${challenge}&code_challenge_method=S256`;

      if (this.clearStorage) {
        authWindow.webContents.session.clearStorageData({}, () => {
          this.clearStorage = false;
          authWindow.loadURL(authUrl);
          authWindow.show();
        });
      } else {
        authWindow.loadURL(authUrl);
        authWindow.show();
      }

      authWindow.webContents.on('did-get-redirect-request', (event, oldUrl, newUrl) => {
        const code = this.getCode(newUrl, authWindow);

        if (!code) {
          this.clearStorage = true;
          return;
        }

        this.requestToken({
          grant_type: 'authorization_code',
          code: code,
          code_verifier: verifier,
          redirect_uri: REDIRECT_URL
        })
          .subscribe((response: { access_token: string, refresh_token: string }) => {
            observer.next(response);
          });
      });

      // Reset the authWindow on close
      authWindow.on('close', () => {
        authWindow = null;
      });
    });

正如您在上面的代码中看到的那样，我正在创建新的BrowserWindow：

new electron.remote.BrowserWindow({ show: false, webPreferences: {
      nodeIntegration: false
      } });

并且通过这种方法，我能够通过以下代码开头的代码块来追赶重定向请求：

authWindow.webContents.on('did-get-redirect-request', (event, oldUrl, newUrl) => {
       ....
    }

但是如果没有弹出窗口（模态）我就无法解决这个问题。

这是我的尝试：

return Observable.create((observer: Observer<any>) => {


      let authWindow = electron.remote.getCurrentWindow();

        const authUrl = AUTHORIZATION_WITH_PROOF_KEY_URL
            + `?client_id=${CLIENT_ID}&response_type=code&scope=api_search&`
            + `redirect_uri=${REDIRECT_URL}&code_challenge=${challenge}&code_challenge_method=S256`;

      if (this.clearStorage) {
        authWindow.webContents.session.clearStorageData({}, () => {
          this.clearStorage = false;
          authWindow.loadURL(authUrl);
        });
      } else {
        authWindow.loadURL(authUrl);
      }

      authWindow.webContents.on('did-get-redirect-request', (event, oldUrl, newUrl) => {
        debugger;
        // this is not called, I'm not able to catch up redirect request
      });

      // Reset the authWindow on close
      authWindow.on('close', () => {
        authWindow = null;
      });
    });

通过我的方法，我在当前窗口中从远程URL获取登录屏幕，但问题是我无法通过（'did-get-redirect-request'）事件捕获重定向请求。

我也试过'will-navigate'和其他许多人。

我们将不胜感激。

由于

Answer 1

虽然我没有直接回答，但我认为我会指向Google's AppAuth-JS libraries，其中包含基于OAuth的Electron Apps使用情况。

我的公司已经将AppAuth库用于移动案例，并且它们对我们非常有效，因此我们自己编写了较少的安全代码并避免了漏洞。

还有一个Electron Code Sample我希望能给你一些解决问题的提示。

当前窗口中电子应用中的OAuth2

1 个答案: