How to get a user identity/access token in Sharepoint to pass to iframe?

Question

Hello,

We are embedding https://iframe.example.com in a SharePoint page: https://contoso.sharepoint.com/sites/xxx

We managed to include it and display it.

The app at iframe.example.com has it's own authentication implemented.

We want to allow users authenticated at the sharepoint page https://contoso.sharepoint.com/sites/xxx to this app.

What is the best way to achieve this integration ?

How should we convert the identity of Sharepoint users to our users?

My guess would be to use JS and fetch a user identity token then pass this token to a service / our service and validate the token on the app side. By token, in this context I understand a signed JWT token.

Initially asked https://answers.microsoft.com/en-us/msoffice/forum/msoffice_sharepoint-msoffice_unknown-mso_subother/how-to-get-a-user-identityaccess-token-in/6ecefa3e-923c-4a2c-bd4e-08811d0e6eda?messageId=92dfc095-fb8d-45f7-93cc-ac44dfea318a .

Regards,

Eugen

Answer 1

Hi @Eugen
You need to pass TenantID, Client ID, Client Secret and resource details to get the access token. Please refer to following code

$.ajax({  
    type: 'POST',  
    crossDomain: true,  
    url: 'https://accounts.accesscontrol.windows.net/<tenantID>/tokens/OAuth/2',  
    headers: {  
        "content-type": "application/x-www-form-urlencoded"  
    },  
    data: {  
        "grant_type": "client_credentials",  
        "client_id": "<ClientID>@<TenantID>",  
        "client_secret": "<ClientSecret>",  
        "resource": "00000003-0000-0ff1-ce00-000000000000/<sitename>.sharepoint.com@<TenantID>"  
    },  
    success: function(data) {  
        //data.token_type returns "Bearer"  
        //data.access_token returns < AccessToken >  
        var at = data.token_type + " " + data.access_token;  
      //caal the REST API with the at variable in header  
  
    },  
    error: function(data, errorThrown, status) {  
  
    }  
});  

Then you can use getElementbyId to pass values to iFrame like this

<script type="text/javascript">  
    var params = "xxxxxxxxxxxxxxxxxxxxx";  
    document.getElementById("myIframe").src = 'https://iframe.example.com/?' + params;  
</script>  
  
<iframe id="myIframe" src="https://iframe.example.com" width="80%"></iframe>  

---

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.

---