OneDrive File Picker JavaScript SDK v7.2 action download does not work

Question

OneDrive File Picker JavaScript SDK v7.2 action download does not work

Preeti Jain 16

I am using OneDrive File Picker JavaScript SDK v7.2, with download action, to select files from sharepoint

My picker options are as follows:

   const options = {  
        clientId: "<my client id>",  
        action: "download",  
        multiSelect: false,  
        advanced: {  
            endpointHint: "https://<my tenant>.sharepoint.com/sites/<sitename>/Shared%20Documents/",  
            accessToken: <oAuth token>,  
        },  
        success:  function() {   
            console.log(JSON.stringify(files));  
         },   
        cancel: function() {   
            //  
         },  
        error: function(error) { /* error handler */ }  
      }

I am able to load the file picker and select a file. But after selecting the a file I am getting the following error in the response:

response
:
"{\"error\":{\"code\":\"unauthenticated\",\"innerError\":{\"code\":\"invalidAudienceUri\"},\"message\":\"Invalid audience Uri '00000003-0000-0000-c000-000000000000'.\"}}"

I have used Microsoft Graph API to get the access token.

CarlZhao-MSFT 46,371 Reputation points

2022-10-18T07:25:57.19+00:00

The audience of your token and the API endpoint you are accessing do not match, which is the cause of the problem.

2 answers

Your answer

CarlZhao-MSFT 46,371 Reputation points

2022-10-18T07:25:57.19+00:00

The audience of your token and the API endpoint you are accessing do not match, which is the cause of the problem.

Answer 1

CarlZhao-MSFT 46,371

Hi @Preeti Jain

You should use the SharePoint API instead of the Graph API to get tokens, change your scope to: https://<my tenant>.sharepoint.com/.default.

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Preeti Jain 16 Reputation points

2022-10-18T07:34:55.347+00:00

Can I use Graph API in the file picker, instead? My backend application uses Graph API to get the tokens and I am using this token in the file picker.
CarlZhao-MSFT 46,371 Reputation points

2022-10-18T07:38:49.53+00:00

Yes, sure!
CarlZhao-MSFT 46,371 Reputation points

2022-10-18T07:42:15.44+00:00

Then you just need to change the SharePoint api in the script to the graph api endpoint you want to call.
Preeti Jain 16 Reputation points

2022-10-18T07:46:49.983+00:00

Thank you.

If I have to use the graph API, what should be the URL format if I have to access shared documents?

endpointHint : https://graph.microsoft.com/sites/<sitename>/Shared%20Documents/
CarlZhao-MSFT 46,371 Reputation points

2022-10-18T09:01:43.197+00:00

Refer to my latest answer :)

Answer 2

CarlZhao-MSFT 46,371

Hi @Preeti Jain

If you must use the Graph API to access shared documents in the site, simply change the SharePoint API endpoint in the script to the Graph API endpoint.

endpointHint: https://graph.microsoft.com/v1.0/sites/{site id}/drive/root/children

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

CarlZhao-MSFT 46,371 Reputation points

2022-10-19T02:10:44.017+00:00

Hi @Preeti Jain
Would you please provide us with an update on the status of your issue?
Preeti Jain 16 Reputation points

2022-10-19T03:56:40.08+00:00

Thank you! Let me try with this.
Preeti Jain 16 Reputation points

2022-10-19T06:51:27.907+00:00

Hi @CarlZhao-MSFT

I tried with the endpointHint mentioned by you earlier. But it does not work, although I am providing the correct auth token.

{"error":{"code":"InvalidAuthenticationToken","message":"Access token is empty.","innerError":{"date":"2022-10-19T06:43:07","request-id":"3b0b935a-5814-4b18-968b-893beedfd97b","client-request-id":"3b0b935a-5814-4b18-968b-893beedfd97b"}}}

However, If the run the same endpoint through postman it works.

Do I need to provide any additional parameter in the script?

const options = {
clientId: "<my client id>",
action: "download",
multiSelect: false,
advanced: {
endpointHint: "https://graph.microsoft.com/v1.0/sites/{my site id}/drive/root/children/",
accessToken: <my oAuth token fetched using microsoft graph api>,
},
success: function() {
console.log(JSON.stringify(files));
},
cancel: function() {
//
},
error: function(error) { /* error handler */ }
}
CarlZhao-MSFT 46,371 Reputation points

2022-10-19T06:59:36.223+00:00

Hi @Preeti Jain
Strangely, your error message says that the access token is empty, can you output the access token in the script?
Preeti Jain 16 Reputation points

2022-10-19T07:26:33.23+00:00

"accessToken":"eyJ0eXAiOiJKV1QiLCJub25jZSI6IlMweXZ4T1lnQS0xNFc5aDVBazFLTGRrUFN4Unh6UC1wbTBmajhPeWpDSkUiLCJhbGciOiJSUzI1NiIsIng1dCI6IjJaUXBKM1VwYmpBWVhZR2FYRUpsOGxWMFRPSSIsImtpZCI6IjJaUXBKM1VwYmpBWVhZR2FYRUpsOGxWMFRPSSJ9.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTAwMDAtYzAwMC0wMDAwMDAwMDAwMDAiLCJpc3MiOiJodHRwczovL3N0cy53aW5kb3dzLm5ldC80NzAyZmIwNS0yMWQxLTRkMGItOTkzOS01MWI1YTg4YmYzMmIvIiwiaWF0IjoxNjY2MTYxMjQwLCJuYmYiOjE2NjYxNjEyNDAsImV4cCI6MTY2NjE2NTk0NCwiYWNjdCI6MCwiYWNyIjoiMSIsImFpbyI6IkFWUUFxLzhUQUFBQWEzWGYwMGdWYWxGdEgveWtRUUlNdzMyajdaWGlNSnZhZzVlWVpPcmM5NDZ0QTFBc1ErR0YwOE9DbTlGbHdGc3VCNDQ4TFJtYUw2bWI4VHQ3cldHWFU1YmxNUFNVc0lDQmtNaVEzanA5MTRzPSIsImFtciI6WyJwd2QiLCJtZmEiXSwiYXBwX2Rpc3BsYXluYW1lIjoiS3Vtb3dpekFwcCIsImFwcGlkIjoiZTcxNzA5OTctNWU2Mi00MDcwLWFiZjYtNWY5Yjg1N2ExNGJiIiwiYXBwaWRhY3IiOiIxIiwiZmFtaWx5X25hbWUiOiJKYWluIiwiZ2l2ZW5fbmFtZSI6IlByZWV0aSIsImlkdHlwIjoidXNlciIsImlwYWRkciI6IjEwMy4yMDguNzEuMTc1IiwibmFtZSI6IlByZWV0aSBKYWluIiwib2lkIjoiNjdmNGMwNDEtYzUwMC00YWQ5LTllMmUtMTk0ZmRjN2IzNjI3IiwicGxhdGYiOiIzIiwicHVpZCI6IjEwMDMyMDAyMkZEQTc5RkIiLCJyaCI6IjAuQVZZQUJmc0NSOUVoQzAyWk9WRzFxSXZ6S3dNQUFBQUFBQUFBd0FBQUFBQUFBQUNmQU84LiIsInNjcCI6IkZpbGVzLlJlYWQuQWxsIEZpbGVzLlJlYWQuU2VsZWN0ZWQgRmlsZXMuUmVhZFdyaXRlLkFsbCBGaWxlcy5SZWFkV3JpdGUuQXBwRm9sZGVyIE1haWwuUmVhZCBvcGVuaWQgcHJvZmlsZSBTaXRlcy5SZWFkV3JpdGUuQWxsIFVzZXIuUmVhZCBVc2VyLlJlYWRXcml0ZSBVc2VyLlJlYWRXcml0ZS5BbGwgZW1haWwiLCJza.......
Preeti Jain 16 Reputation points

2022-10-19T07:29:00.687+00:00

Shared the partial access token above.

Although the message says access token is empty I am passing the access token
CarlZhao-MSFT 46,371 Reputation points

2022-10-19T07:32:56.197+00:00

This looks like a problem with the script, let me researching it.

CarlZhao-MSFT 46,371

Hi @Preeti Jain

Try changing your script to:

  advanced: {  
    endpointHint: "https://graph.microsoft.com/v1.0/sites/{my site id}/drive/root/children/",  
    accessToken "INSERT-ACCESS-TOKEN-HERE"  
  },

Preeti Jain 16 Reputation points

2022-10-19T10:24:03.713+00:00

Hi @CarlZhao-MSFT

That is exactly what I have done earlier.

const options = {
clientId: "<my client id>",
action: "download",
multiSelect: false,
advanced: {
endpointHint: "https://graph.microsoft.com/v1.0/sites/{my site id}/drive/root/children/",
accessToken: <my oAuth token fetched using microsoft graph api>,
},
success: function() {
console.log(JSON.stringify(files));
},
cancel: function() {
//
},
error: function(error) { / error handler / }
}
CarlZhao-MSFT 46,371 Reputation points

2022-10-25T08:32:57.853+00:00
Hi @Preeti Jain
Your token seems fine, as a solution you might be able to call the api endpoint using the Microsoft Graph JavaScript client library:

const options = { authProvider, }; const client = Client.init(options); let children = await client.api('/sites/{site id}/drive/root/children') .get();

Share via

OneDrive File Picker JavaScript SDK v7.2 action download does not work

2 answers

Your answer