Azure Question posted in
The official documentation to get you started can be found here.

Azure – why Showing Token Expired Message in Console Even If There is New Token generated in Immersive Reader Service which I have deployed in my flask app?

Task:
I am performing deployment of the Azure Immersive Reader service web app locally.

Problem:

  1. On clicking the immersive reader button, it is showing me the following error message.

enter image description here
2. after clicking the ok button it is showing error in my console where I found that it is showing me

enter image description here

So I can’t find any solution for it.

So, I am performing the deployment of app using python flask framework. Now, in that I have credential like endpoint and key (I have only access to the endpoint and key) with the use of it I am generating the token which is available for the 10 min and after generating token, with that token and the subdomain available from the endpoint I am launching the immersive reader. This is the whole process I am going through.

What I have:

  • app.py
    -.env
  • helper.js
  • index.html

Expected Output:
Whenever I click on the immersive reader button it should enable and read the content on the web page

Tags:

2

Answers


  1. 0

    after clicking the ok button it is showing error in my console where I found that it is showing me.

    Then above indicates that the Immersive Reader is not launched properly. It could be due to an incorrect token.

    • Generate a fresh token each time you launch the Immersive Reader. Check that it is fresh when launching.

    helper.js:

    document.getElementById('immersiveReaderButton').addEventListener('click', function() {
    fetch('/get_token')
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                console.error('Token generation error:', data.error);
                return;
            }
            const token = data.access_token; // Ensure this matches the structure of the response
            const subdomain = 'your-subdomain'; // Extract subdomain from your endpoint
            const content = document.getElementById('contentToRead').innerText;

            ImmersiveReader.launch({
                token: token,
                subdomain: subdomain,
                content: {
                    title: "Content Title",
                    chunks: [
                        {
                            content: content,
                            lang: "en"
                        }
                    ]
                }
            }).then(() => {
                console.log("Immersive Reader launched successfully.");
            }).catch(error => {
                console.error("Error launching Immersive Reader:", error);
            });
        })
        .catch(error => console.error('Error fetching token:', error));
});

    Azure Immersive reader service:

    enter image description here

    app.py: (Given for reference)

    from flask import Flask, render_template, jsonify
import requests
import os
from dotenv import load_dotenv

load_dotenv()

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/get_token', methods=['GET'])
def get_token():
    endpoint = os.getenv('ENDPOINT')
    key = os.getenv('KEY')
    headers = {
        'Ocp-Apim-Subscription-Key': key,
        'Content-Type': 'application/x-www-form-urlencoded'
    }
    token_url = f'{endpoint}/cognitiveservices/v1.0/token'
    response = requests.post(token_url, headers=headers)
    if response.status_code == 200:
        return jsonify({'access_token': response.text})  # Adjust this based on actual token structure
    else:
        return jsonify({'error': 'Failed to generate token'}), 500

if __name__ == '__main__':
    app.run(debug=True)

    index.html:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Immersive Reader</title>
    <script src="https://contentstorage.onenote.office.net/onenoteltir/immersive-reader-sdk/v1.0.0/immersive-reader-sdk.js"></script>
    <script src="helper.js"></script>
</head>
<body>
    <h1>Immersive Reader Demo</h1>
    <button id="immersiveReaderButton">Launch Immersive Reader</button>
    <p id="contentToRead">This is some text to be read by the Immersive Reader.</p>
</body>
</html>

    enter image description here

    Output:

    enter image description here

    Login or Signup to reply.
  2. 0

    please try your content with the official python code sample here

    and also make sure you are getting the token this way:

    please let us know if the issue persists

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search