Блог

Я просмотрел всю доступную информацию по этому вопросу, и документация мне не помогает.

У меня есть приложение Electron (React internals), где веб-страница должна отображаться в webview.

Домен, например, https://root.domain.com остается тем же, но остальная часть URL будет отличаться в зависимости от реквизитов, переданных компоненту, отображающему webview.

Здесь я нашел некоторый код, связанный с видеороликом Youtube от BuildingXwithJS по тестированию, который будет использовать BrowserWindow для разрешения входа пользователя в систему, а затем сохранить аутентифицированный cookie для использования в приложении.

   auth() {

    const remote = electron.remote;
    // Get a partitioned session to use with webview
    const ses = remote.session.fromPartition("myPartition");

    // create new electron browser window
    const BrowserWindow = remote.BrowserWindow;
    let win = new BrowserWindow({width: 800, height: 600});

    // cleanup on close
    win.on('closed', () => {
      win = null;
    });

    // wait for page to finish loading
    win.webContents.on('did-finish-load', () => {

      // if auth was succesful
      if (win.webContents.getURL() === 'https://root.domain.com/Home/') {

        // get all cookies
        win.webContents.session.cookies.get({}, async (error, cookies) => {

          if (error) {
            console.error('Error getting cookies:', error);
            return;
          }

          // store cookies
          cookies.forEach(c => {

           if(c.domain.includes('root.domain.com')){

            ses.cookies.set(c,(e) => e? console.log("Failed: %s",e.message):null})

           }

          // close window
          win.close();
        });
      }
    });

    // Load login page
    win.loadURL(loginURL);

  }
  

Теперь, когда я просматриваю страницу в webview в отдельном компоненте, подобном этому:

   <webview
    ref={a => (this.view = a)}
    partition="myPartition"
    src={`https://root.domain.com/${providedURL}`}
    style={{
      display: "flex",
      width: "100%",
      height: "100%"
    }}
  />
  

Я получаю страницу входа в систему.

Итак, я попытался установить файлы cookie в webview, когда он завершит загрузку, а затем перезагрузить:

   this.view.addEventListener("did-finish-load", e => {
    // Get partitioned session
    const ses = remote.session.fromPartition("myPartition");

    // Loop through cookies and add them to the webview
    ses.cookies.get({}, (error, cookies) => {

      cookies.forEach(cookie => {

        // this.view doesn't return the webview in here so I use the event
        e.target.getWebContents().session.cookies.set(cookie,(e)=> e? console.log(e):null);

      });

       // Reload with cookies
       e.target.getWebContents().reload();
    });
    this.setState({ loading: false, failure: false });
  });
  

Но все равно я каждый раз получаю страницу входа в систему!

Самое неприятное в этом то, что auth() функция, определенная выше (в другом компоненте оболочки), показывает экран входа в систему каждый раз, когда она запускается после того, как пользователь входит в систему один раз, поэтому сеанс входа активен, и cookie где-то хранится — но где? И как я могу заставить этот webview увидеть его? Было бы лучше использовать Iframe?? Мое требование показывать встроенный внешний URL-адрес является обязательным для моих заинтересованных сторон, поэтому мне нужен какой-то способ заставить его работать.

Я далек от опыта управления cookie, и управление сеансами в Electron мне непонятно, потому что существует несколько способов доступа к сеансам BrowserWindow.webContents().session или BrowserWindow.webContents().defaultSession или import { session } from "electron" .

Кроме того, когда я смотрю на вкладку приложения в devtools, эти конкретные cookie нигде не отображаются (но другие отображаются). Почему это?