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

Eugen 1 Reputation point
2022-11-11T16:28:44.987+00:00

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

SharePoint
SharePoint
A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
10,240 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. RaytheonXie_MSFT 33,486 Reputation points Microsoft Vendor
    2022-11-14T06:41:53.093+00:00

    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.