Skip to main content

Preview with JWT Token

  • February 21, 2024
  • 4 replies
  • 137 views
user190

Hi, I am trying to display file on a website simply using the preview like this:


    <div class="preview-container"></div>

    <script>

      var preview = new Box.Preview();

      preview.show("FILEID", "DEVELOPER_ACCESS_TOKE", {

        container: ".preview-container",

      });

    </script>

Using the developer access toke works great, but it has a 60minute ligfe span, so I found this page which is about creating a JWT, so I implemented it and it creates a code as $access_code but its super long and therefore doesn’t work with the previewer when using like this:


<div class="preview-container"></div>

<script>

var preview = new Box.Preview();

preview.show("FILEID", $access_token, {

container: ".preview-container",

});

</script>

Any idea what I am doing wrong?

    4 replies

    rbarbosa Box
    • rbarbosa Box
    • Developer Advocate
    • 553 replies
    • February 21, 2024

    Hi @user190 , welcome to the forum!



    At first glance, nothing, the length of the token shouldn’t be a factor here.


    Try playing with this CodePen and set the token using a variable to do some testing.


    On an unrelated subject, please note that you don’t want to use your all powerful JWT token directly in a UI Element. Typically we should downscope the token to limit its privileges.


    Let us know if this helps


    Cheers

    user190
    • user190
    • Author
    • New Participant
    • 2 replies
    • February 22, 2024

    Thanks for the reply. I have tested various options and whenever I use the token generated in $access_token, the preivewer shows ‘We’re sorry, the preview didn’t load. Please refresh the page.’. The saem error that shows if I put a random value as the token.


    This is making me think that the access token is not linked properly.


    I have a screenshot of the app settings in box.com. Can you see anythign that I have set wrong?

    Box Settings


    As mentioned I have followed the intsructions here and I don’t get errors and it gives me a code and the config.json is correct with the client id/secret etc.

    user190
    • user190
    • Author
    • New Participant
    • 2 replies
    • February 22, 2024

    Think I may have figured it out or atleast got further down the road. I used to have the files in the root of box.com, I created a folder and then created a group with the apps service account ID email as a mamber and the folder as viewable. It now loads the file 🙂

    rbarbosa Box
    • rbarbosa Box
    • Developer Advocate
    • 553 replies
    • February 22, 2024

    Awesome!


    Yes, a JWT app creates a service user, for which content needs to be shared.


    For future reference, you can also inspect your browser console, there should be more information there, about the error.


    Typically a reference to CORS, 403, 401, or 404


    Cheers

    Reply


    Most helpful members this week

    Terms & ConditionsCookie settings

    Cookie policy

    We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

     
    Cookie settings