Integrate Oxygen XML Web Author with a File Storage Service with a Custom Plugin

To enable the file browsing from the browser, after implementing FileBrowsingConnection, the connector has to initialize the UrlChooser in the browser by executing the following code from a plugin.js file:

workspace.setUrlChooser(new sync.api.FileBrowsingDialog());

The part from plugin.xml where the "URLHandler" extension is declared may look like this:

  <extension type="URLHandler" 
    class="com.example.CustomUrlHandlerPluginExtension"/>

And the com.example.CustomUrlHandlerPluginExtension may look like this:

public class CustomUrlStreamHandlerPluginExtension implements URLStreamHandlerPluginExtension {
  @Override
  public URLStreamHandler getURLStreamHandler(String protocol) {
    if ("customprotocol".equals(protocol)) {
      return new CustomUrlStreamHandler(protocol);
    } else {
      return null;
    }
  }
}

And the CustomUrlStreamHandler may look like this:

public class CustomURLStreamHandlerWithContext extends URLStreamHandlerWithContext {
  @Override
  protected URLConnection openConnectionInContext(String contextId, URL oxyUri, Proxy proxy) throws IOException {
    return newCustomUrlConnection(contextId, oxyUri, proxy);
  }
}

And the CustomUrlConnection may look like this:

  public class CustomUrlConnection extends URLConnection implements FileBrowsingConnection {

    public CustomUrlConnection(String contextId, URL oxyUri, Proxy proxy) {
      super(oxyUri);
    }

    @Override
    public void connect() throws IOException {
      // TODO: implement me.
    }
    
    @Override
    public InputStream getInputStream() throws IOException {
      // TODO: implement me.
    }
    
    @Override
    public OutputStream getOutputStream() throws IOException {
      // TODO: implement me.
    }
    
    @Override
    public List<FolderEntryDescriptor> listFolder() throws IOException, UserActionRequiredException {
      // TODO: implement me.
    }
  }

If the File Storage Service rejects the request because of authentication, the URLConnection must signal this to Oxygen XML Web Author by throwing UserActionRequiredException with WebappMessage.MESSAGE_TYPE_CUSTOM like this:

throw new UserActionRequiredException(
        new WebappMessage(
          WebappMessage.MESSAGE_TYPE_CUSTOM,
          "Authentication Required",
          "Please authenticate.",
          true));

// Store authentication secret in the session store.
WebappPluginWorkspace pluginWorkspace = (WebappPluginWorkspace) pluginWorkspaceAccess;
SessionStore sessionStore = pluginWorkspace.getSessionStore();
sessionStore.put(sessionId, "custom-connector-auth", authenticationSecret);

// Get authentication secret from the session store.
WebappPluginWorkspace pluginWorkspace = (WebappPluginWorkspace) pluginWorkspaceAccess;
SessionStore sessionStore = pluginWorkspace.getSessionStore();
String authenticationSecret = sessionStore.get(contextId, "custom-connector-auth");

The client-side part of the connector can show a username-password form. For this, it has to use the JavaScript API and register a sync.api.FileServer implementation to sync.api.FileServersManager, somewhat like this:

/**
 * See sync.api.FileServer.
 */
class CustomFileServer {

  /** @override */
  login(serverUrl, loginCallback) {
    // Show a dialog with username and password inputs and 
sends them to the connector servlet.

    let loginDialog = workspace.createDialog();
    loginDialog.setTitle("Login");
    loginDialog.setPreferredSize(400, 500);

    loginDialog.getElement().innerHTML = `
      <label for="name">Username:</label>
      <input type="text" id="name" name="name"><br><br>
      
      <label for="password">Password:</label>
      <input type="password" id="password" name="password"><br><br>
    `;

    loginDialog.onSelect(key => {
      if (key === 'ok') {
        let username = containerElement.querySelector("#name");
        let password = containerElement.querySelector("#password");

        // Sent the credentials to the connector servlet.
        fetch('../plugins-dispatcher/custom-connector-auth', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          body: `username=${encodeURIComponent(username.getValue())}&password=
${encodeURIComponent(password.getValue())}`
        })
          .then(response => {
            if (response.ok) {
              loginDialog.setVisible(false);
              logoutCallback();
            } else {
              workspace.getNotificationManager().showError("Authentication failed");
            }
          })
          .catch(() => {
            workspace.getNotificationManager().showError("An error occurred");
          });
      }
    })

    loginDialog.show();
  }

  /** @override */
  logout(logoutCallback) {
    //TODO Implement me.
  }

  /** @override */
  getUserName() {
    //TODO Implement me.
  }

  /** @override */
  setUserChangedCallback(userChangedCallback) {
    //TODO Implement me.
  }

  /** @override */
  createRootUrlComponent(rootUrl, rootURLChangedCallback, readOnly) {
    //TODO Implement me.
  }

  /** @override */
  getUrlInfo(url, urlInfoCallback, showErrorMessageCallback) {
    //TODO Implement me.
  }
}

/** @type {sync.api.FileServer} */
let customFileServer = new CustomFileServer();

/** @type {sync.api.FileServerDescriptor} */
let customFileServerDescriptor =  {
  'id' : 'custom-connector',
  'name' : 'Custom Connector',
  'icon' : null,
  'matches' : function matches(url) {
    return url.match(/^customprotocol?:/);
  },
  'fileServer' : customFileServer
};
workspace.getFileServersManager().registerFileServerConnector(customFileServerDescriptor);

The sync.api.FileServer.login method is called when authentication is requested. The implementation can show a dialog box that displays a username-password form and then submits the credentials to the connector servlet. To show a dialog box in the browser, the workspace.createDialog API can be used.

The ServletPluginExtension that serves "/plugins-dispatcher/custom-connector-auth/" may look like this:

public class CustomConnectorAuthenticationServlet extends ServletPluginExtension {
  
  @Override
  public void doPost(HttpServletRequest httpRequest, HttpServletResponse httpResponse) throws 
ServletException, IOException {
    String sessionId = httpRequest.getSession().getId();
    
    String user = httpRequest.getParameter("user");
    String passwd = httpRequest.getParameter("password");
    
    if (areCredentialsValid(user, passwd)) {
      WebappPluginWorkspace pluginWorkspace = (WebappPluginWorkspace) 
PluginWorkspaceProvider.getPluginWorkspace();
      SessionStore sessionStore = pluginWorkspace.getSessionStore();
      sessionStore.put(sessionId, "custom-connector-auth", user + ":" + passwd);
    } else {
      httpResponse.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
    }
  }
      
  private boolean areCredentialsValid(String user, String passwd) {
    // TODO Implement me.
    return false;
  }

  @Override
  public String getPath() {
    return "custom-connector-auth";
  }
}