Basic Authentication - Provide sign-in information

MarioSchrattenecker

With the Basic Authentication activated we create a set of templates and other entites on jsReport Server start up, including an additional user, that is intended to be used by the client when accessing the report studio to create their own templates.

The intention was, since we already would know the credetials for the pre-created user, to eliminate the need for a sign on when we send them over to the reporting studio from our UI.

Is there a built in way to achieve this using the Basic Authentication?
Or is there absolutely no way to avoid the login prompt?

MarioSchrattenecker

Is there no one who can give a definite answer here?

jan_blaha

Theoretically, you could try to do the same HTTP post the jsreport login page does.

However, the proper solution would be to have an authorization server in place and use a single sign-on.
Unfortunately, jsreport doesn't support the single sign-on to the studio yet, but we are working on it at this moment.
It could be ready until the final jsreport v3 which should be release likely in a month.

MarioSchrattenecker

Hello,

thank you very much for the outlook on a possible solution for this.

The HTTP post as far as I can tell requires one to send form data with the login information (username =user&password=pw) and a cookie in the request header to the URL "http://yourAddress/jsreport/login?returnUrl=%2Fjsreport%2F".

Returning a Set-Cookie in the Response header that should then allow me by just sending one over to the jsReport Url to skip the login.

Is that it?

jan_blaha

Yes, that could work.

MarioSchrattenecker

Thank you

MarioSchrattenecker

Good day,

I have now tried to emulate the http request and as far as I can tell it should meet the requirements.
The server responds with a set-cookie in the header and it gets set. Though when I than navigate to the jsReport studio site, it still requires me to enter user and pw.

General:
Request URL: http://localhost:5488/jsreport/login?returnUrl=%2Fjsreport%2F
Request Method: POST
Status Code: 302 Found
Remote Address: [::1]:5488
Referrer Policy: strict-origin-when-cross-origin

Response Headers:
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: *
Connection: keep-alive
Content-Length: 57
Content-Type: text/plain; charset=utf-8
Date: Thu, 30 Sep 2021 15:27:12 GMT
Keep-Alive: timeout=5
Location: /jsreport/?returnUrl=%2Fjsreport%2F
Set-Cookie: session=ZIeNVp5FFqhSw7w1bAz2MA.6PaXendFvu6P9LXlmGSJkKLEGVwOAl8oS8eti5Ub4gw.1633015632346.315360000000.isWZJvgAS3TA_-NQ5vf31oBVpg6WaZcMpY4rMeJ5rko; path=/; expires=Sun, 28 Sep 2031 15:27:13 GMT; httponly
Vary: Accept
X-Powered-By: Express

Request Headers:
Accept: application/json, text/plain, /
Accept-Encoding: gzip, deflate, br
Accept-Language: de-DE,de;q=0.9,en-US;q=0.8,en;q=0.7
Connection: keep-alive
Content-Length: 246
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryOGA7OFWVzhRKc5t4
Host: localhost:5488
Origin: http://localhost:8080
Referer: http://localhost:8080/
sec-ch-ua: "Google Chrome";v="93", " Not;A Brand";v="99", "Chromium";v="93"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36

Query String Parameters:
returnUrl: %2Fjsreport%2F

Form Data:
username: report
password: report

Am I maybe still missing something for it work?

bjrmatos

@MarioSchrattenecker how are you executing the http post? are you using fetch, xhr, or form post? the easiest way is to do it in the browser with a form and a standard submit, this is some code you can use to test the login.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Test login</title>
</head>
<body>
  <button id="fire">Do login</button>
  <form id="loginForm" method="POST" action="http://localhost:5488/login?returnUrl=%2F">
    <input type="text" id="username" name="username" placeholder="username" value="admin" />
    <input type="password" name="password" type="password" placeholder="password" value="password" autocomplete="off" />
  </form>
  <script>
    const btn = document.getElementById('fire')
    const form = document.getElementById('loginForm')
    
    btn.addEventListener('click', () => {
      form.submit()
    })
  </script>
</body>
</html>

after the click to "Do login" you will be redirected to the jsreport studio page and you will be authenticated

MarioSchrattenecker

@bjrmatos We are using vue-resource in the background, though below is the function I use in the store for authentication.

async fetchCookie ({ commit }) {
    commit('startLoading', {})

    try {
      const formData = new FormData()
      formData.append('username', 'report')
      formData.append('password', 'report')

      const res = await VueInstance.$jsReport.cookie(formData)

      window.open(res.url.slice(0, res.url.lastIndexOf('/')))

    } catch (err) {
      VueInstance.$handleHttpError(err, false)
    } finally {
      commit('stopLoading', {})
    }
  }

Following the used part of the vue-resource code:

Vue.prototype.$jsReport = Vue.resource(`${host}/jsreport`, options, {
  assets: {
    method: 'GET',
    url: `${host}/jsreport/odata/assets`
  },
  cookie: {
    method: 'POST',
    url: `${host}/jsreport/login?returnUrl=%2Fjsreport`
  },
  data: ...
})

Your example is working flawlessly if I just use it as-is in a new html file and go from there, though it is not really usable in exactly that way for us since we want to explicilty avoid to prompt the user for a username and password and are using vuetify, vue-resource and vuex in the project.

bjrmatos

Your example is working flawlessly if I just use it as-is in a new html file and go from there, though it is not really usable in exactly that way for us since we want to explicilty avoid to prompt the user for a username and password and are using vuetify, vue-resource and vuex in the project

in the example I gave, you don't prompt the user, the form is already filled with username and password, the example requires you to click a button but that was just a demo, you can easily change that to fill the username and password (you mentioned your app already has the credentials) in hidden inputs, and do the form.submit() on page load, in this way that user does not need to do anything, you will start the flow by redirecting the user to this html page and the page will authenticate without asking anything the user will see just a standard redirect.

i don't have vue experience so i am lost here about how to achieve this with vue related methods but what i am describing is the standard way to achieve the automatic login without prompt from your app, as far i can tell you just need to open a new browser tab in your page that loads this page, this page will do the automatic login without prompt and in the end redirect to studio.