Basic Authentication - Provide sign-in information



  • 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?



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



  • 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.



  • 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?



  • Yes, that could work.



  • Thank you



  • 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?


  • administrators

    @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



  • @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.


  • administrators

    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.


Log in to reply
 

Looks like your connection to jsreport forum was lost, please wait while we try to reconnect.