Using MS Graph API driveItem: preview driveItem: preview to edit word document online.
Displaying the MS Word web URL in iframe:
<iframe id="imagepgframe" src="https://purushothamchowdary-my.sharepoint.com/personal/purushotham_purushothamchowdary_onmicrosoft_com/_layouts/15/PreAuth.aspx?sourcedoc={289e7b7a-e5d3-43dc-957a-5564ca9faeb9}&action=edit#access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsIng1dCI6IkcydDJKYzlkMVZ6RkdjdzZUZy02YUhZVXk2VSJ9%2EeyJhdWQiOiJ3b3BpL3B1cnVzaG90aGFtY2hvd2RhcnktbXkuc2hhcmVwb2ludC5jb21AZTZmMjQ4NWYtYTY4My00MzZlLThmZmEtMWQ3OWVkMjFmYWQwIiwiaXNzIjoiMDAwMDAwMDMtMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDAwQDkwMTQwMTIyLTg1MTYtMTFlMS04ZWZmLTQ5MzA0OTI0MDE5YiIsIm5iZiI6IjE2MTE5MDM0NDQiLCJleHAiOiIxNjExOTAzNzQ0IiwibmFtZWlkIjoiMTAwMzIwMDEwYTNiNGM0MyIsIm5paSI6InVybjpmZWRlcmF0aW9uOm1pY3Jvc29mdG9ubGluZSIsImNhY2hla2V5IjoiMGguZnxtZW1iZXJzaGlwfDEwMDMyMDAxMGEzYjRjNDNAbGl2ZS5jb20iLCJpc3VzZXIiOiJ0cnVlIiwiYWNycyI6IltcInVybjp1c2VyOnJlZ2lzdGVyc2VjdXJpdHlpbmZvXCIsXCJ1cm46bWljcm9zb2Z0OnJlcTFcIixcInVybjptaWNyb3NvZnQ6cmVxMlwiLFwidXJuOm1pY3Jvc29mdDpyZXEzXCIsXCJjMVwiLFwiYzJcIixcImMzXCIsXCJjNFwiLFwiYzVcIixcImM2XCIsXCJjN1wiLFwiYzhcIixcImM5XCIsXCJjMTBcIixcImMxMVwiLFwiYzEyXCIsXCJjMTNcIixcImMxNFwiLFwiYzE1XCIsXCJjMTZcIixcImMxN1wiLFwiYzE4XCIsXCJjMTlcIixcImMyMFwiLFwiYzIxXCIsXCJjMjJcIixcImMyM1wiLFwiYzI0XCIsXCJjMjVcIl0iLCJhcHBpZCI6IjNhODhmMmUzLTY4NjktNDA4YS1hZTAzLTE2YjQ0OTdlMWQxNyIsInRpZCI6ImU2ZjI0ODVmLWE2ODMtNDM2ZS04ZmZhLTFkNzllZDIxZmFkMCIsImlwYWRkciI6IjE1Ny40MS4xNDIuMTQ2Iiwid29waV9hcCI6ImFsbGZpbGVzLndyaXRlIiwid29waV90dCI6IlByZUF1dGhUb2tlbiIsImFwcGN0eCI6IjI4OWU3YjdhZTVkMzQzZGM5NTdhNTU2NGNhOWZhZWI5O3ZYam1GZUVqbHNqeE0xWnkzMU9mRVZpSkFFMD07RGVmYXVsdDs7MTAyQjAzQzIzOTJFRjtUcnVlOzszYTg4ZjJlMy02ODY5LTQwOGEtYWUwMy0xNmI0NDk3ZTFkMTc7Njg7YjJmZWY4MTYtMTE4YS00N2I4LWFlMTItMTA2NzJhMDA2ZGRiIn0%2EOjcVqrRRrFrG6YNacnl2h32Hd1exc30YMGhrTdhJ2nSxhciaYqrMWkhLUMz7hDxyONMtgHVUzBty%2DNP2WUtDibf%2DKzOCTTW9aF01ytp%5FQTqIikpdDLUkyXQwDuJQzKuZh8vjxSXF5jfYtoK7JyqUNXZfllozebrqXe80arK%2DTNvvqAk3tOqF5yBedEYW0KrIIyFlyPNXNMyxdGBNEvRjMpMBqzE0Pn3wBiWeh6q4Bx8qSCYE9HwObPDUNtw%2DtCZh%2DFx6suS%5F3kuntWjyxKOqYRfYWpt%5FrWwFCxbFvWwThG5JcT1RUWHi0vdvA9%2DVGn%5FMUqxuKr9BQjUaQC9SFIhaMw"></iframe>
The word document file is getting uploaded to OneDrive. In application getting the web URL to open the word document in browser.
Preview Link :
https://graph.microsoft.com/beta/me/drive/items/01ZPAXLBD2POPCRU7F3RBZK6SVMTFJ7LVZ/preview
Issue:
If user remains idle in the web page for few minutes and access any link in the web page, System displaying
`{"error_description":"Invalid JWT token. The token is expired."}` instead of word editor embedded in `iframe`
The official document has stated it clear:
This action allows you to obtain short-lived embeddable URLs for an item in order to render a temporary preview.
If you want to obtain long-lived embeddable links, use the createLink API instead.
This endpoint only provides a short-lived embeddable URL.
We can find that there is an access_token in the returned link (getUrl):
https://tenant-my.sharepoint.com/personal/allenwu_tenant_onmicrosoft_com/_layouts/15/embed.aspx?uniqueId=ef*****c-e100-4dcd-a47c-f9c2c*****88&access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJ***
If you decode it in https://jwt.io, you will get the exp claim which means the expiration time of the access token. Copy the value of exp and convert it to date in this link: https://timestamp.online/. Then we can see the actual lifetime of this access token is about 5 minutes.
So user remains idle and then get Invalid JWT token. The token is expired. error. It is expected.
If you want to get long-lived embeddable links, use the createLink API instead as the document suggested.