0

I need some help to resolve this issue.

Codebeamer is a secured server (production server in my Project). I am creating an Interface between Codebeamer and MS Project to sync tasks data through Office add-ins.i have a html screen where user can enter Username and password in MS Project so that connection can be established to codebeamer. Once the connection is successful, fetching the Taskdata and displaying the data in appropriate fields in MS Project (can think of one-way communication. data flow from Codebeamer to MS Project). The problem I am facing now is: when the user enters wrong credentials of Codebeamer to configure connection in MS Project which returns a 401 response. then browser is throwing authentication pop-up instead of executing my java script code for handling 401 response.

I am supposed to use Basic authentication as per guidebook. I tried writing "removeHeader" : WWW-Authenticate in fetch() API method, but this one didn't work. next solution I have read is: change the response from 401 to 400 from server side, so that my code gets executed instead of browsers popup. I am not sure if it is correct way or not (as codebeamer is production server, I am not supposed to affect it in any way) ?

So my queries:

  1. Is using the above mentioned solution affects server may be in configuring connection to other 3rd party application?

  2. Please suggest if any other good solutions for this issue?

Below is my current code:

async function clickBtnAuthenticationOk() {
    
  const userName = htmlClassInputUserId.value;
  const userPwd = htmlClassInputPassword.value;
  serverName = htmlClassCbServer.value;
  taskIDInput = htmlClassTaskID.value;

  // make sure data is entered
  if (userName === "" || userPwd === "" || serverName === "") {
    logError(`authentification data missing\n`);
    return;
  }

  // checking whether entered TaskID column name is valid or not.
  if (taskIDInput === "") {
    logError("Please enter field name of Task IDs.\n");
    return;
  }
  if (!Object.keys(Office.ProjectTaskFields).includes(taskIDInput)) {
    logError(
      `'${taskIDInput}' is not a valid column name. Please enter appropriate Field name in which Task IDs are present.\n`
    );
    return;
  }

  const apiUrl = `${serverName}/cb/rest/user/${userName}`;
  auth = "Basic " + btoa(`${userName}:${userPwd}`);

  logText(`making authentification request to ${apiUrl}\n`);
  try {
    const response = await fetch(apiUrl, {
      method: "GET",
      mode: "cors",
      cache: "no-store",
      credentials: "include",
      headers: {
        "Content-Type": "application/json",
        Authorization: auth,
      },
      redirect: "follow",
      referrerPolicy: "no-referrer",
    });

    logText(`res staus is: ${response.status}`);
    if (!response.ok) {
      if (response.status === 401) {
        logError("Please enter correct userName, password.");
        return;
      } else {
        throw new Error("something went wrong.\n");
      }
    }
    const responseData = await response.json();
    if (responseData.status === "Activated" || responseData.status === "Aktiv") {
      isAuthenticationSuccess = true;
    }
  } catch (error) {
    logError(`Authentication failed: ${error}`);
    isAuthenticationSuccess = false;
  } finally {
    logText(`isAuthenticationSuccess:: ${isAuthenticationSuccess}\n`);
    if (isAuthenticationSuccess) {
      // Invalidate password
      htmlClassInputPassword.value = "";
      showStandardUsageHtmlScreen();
    }
  }
}

I tried writing "removeHeader" : WWW-Authenticate in fetch() API method, but this one didn't work.

One more thing: WWW-Authenticate: "xBasic"; this one also didn't work either.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Usha
  • 1
  • You can use service workers to intercept & manipulate requests to certain extends, but I am not sure if you can actually suppress the credentials popup when a 401 status code is received that way. – CBroe Jun 02 '23 at 10:51
  • @CBore I want my code to gets executed if i get 401 response instead of Browser authentication popup.. One issue i observed is: though i enter correct credentials in the browser popup that appears after 401 response, popup is still keep on coming. I am not sure whether it is expected behavior of browser's authentication window. So i just want to get rid of it and execute java script code for handling 401 error. – Usha Jun 02 '23 at 12:25
  • _"though i enter correct credentials in the browser popup that appears after 401 response, popup is still keep on coming"_ - of course it does, because with your next fetch request, you are still sending the _wrong_ credentials you gave earlier. There is absolutely no connection between what you entered into the browser's own auth popup, and the form fields that you are reading the credentials that you are sending in your fetch request, from. – CBroe Jun 02 '23 at 12:32
  • @CBroe Thanks for your inputs. I understood now. So now is there any way to block browser's authentication pop-up and execute Java script code for 401 error. – Usha Jun 06 '23 at 09:03
  • As initially said, Service Workers can intercept and manipulate requests, but i don't know to what extent - you'd have to go look into whether they can actually help here or not, I don't know. (It might be that such a 401 response is "off limits", because it could have security implications.) – CBroe Jun 06 '23 at 09:10
  • The only other option I see is to make your request to some sort of "proxy" first - something on the server side, that passes on credentials provided by fetch to Codebeamer, and then based on whether it gets a 401 response or not, gives your client-side code feedback that does _not_ use the 401 status code to indicate invalid credentials. – CBroe Jun 06 '23 at 09:10
  • The reason behind this is that once the entire implementation is completed, we plan on utilizing Office 365 Admin Center for centralized deployment. This would allow our team members, particularly project managers, to utilize this feature. However, most of them are not familiar with the browser's authentication pop-up or the underlying code. Therefore, I would like to handle the 401 response through JavaScript in order to display an error message that provides meaningful message – Usha Jun 07 '23 at 09:18
  • Does this answer your question? [How can I suppress the browser's authentication dialog?](https://stackoverflow.com/questions/86105/how-can-i-suppress-the-browsers-authentication-dialog) – tevemadar Jul 07 '23 at 21:23
  • I am using fetch api method using JAVA script language. I have tried few solutions. My headers object is immutable, so can't remove WWW-Authenticate attribute. may be solution for me to use Service Workers. – Usha Jul 10 '23 at 09:47

0 Answers0