Forum Discussion
Obtaing access token in a Web Part
Hi ,
We have a website with a game that uses Azure AD to authenticate the users.
One of our clients has decided to put the website inside their Sharepoint and now they want avoid the "relogin" against their Azure AD. If they are logged in their Sharepoint, they want be logged in my website at the same time.
Our doubt is simple. We have developed a Sharepoint Web Part. Inside this Web Part we have an iframe to render our website that login against Azure AD. Our client don' t want to relogin in our website and prefers that the login will be automatic according to the access token of the session Sharepoint.
We need to know the way to obtain the Sharepoint access token to pass it to our website
-----------------------------------------------------------------------------------------------------------------
import { Version } from '@microsoft/sp-core-library';
import {
IPropertyPaneConfiguration,
PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';
import styles from './TestwebpartWebPart.module.scss';
import * as strings from 'TestwebpartWebPartStrings';
export interface ITestwebpartWebPartProps {
description: string;
}
export default class TestwebpartWebPart extends BaseClientSideWebPart <ITestwebpartWebPartProps> {
public render(): void {
var access_token = ¿¿??
this.domElement.innerHTML = `
<iframe src='https://ourapp.es/?token=${access_token}'/>`;
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('description', {
label: strings.DescriptionFieldLabel
})
]
}
]
}
]
};
}
}
3 Replies
vcima How is authentication handled in your application?
I would avoid passing an authentication token in the way you are describing. If you've implemented authentication correctly in the other application (for example, OWIN for authentication), you would have no problem authenticating without re-logging in to the iframe.Hi Beau Cameron
And, If I have something like this, How is the best way to obtain the user token?
public render(): void {
...
let request = this.getRequest(param1);
...
}protected getRequest(param1: string): Promise<any> {
let loginURL = this.properties.url+"/admin/api/v2/list";
let body = '{"param":"'+param1+'"}';
let requestHeaders: Headers = new Headers(); requestHeaders.append("Accept-Tos", "true"); requestHeaders.append("Content-Type", "application/json"); requestHeaders.append("respondWithObject", "true");
**requestHeaders.append('Authorization', 'Bearer <TOKEN>'); ????**let httpClientOptions: IHttpClientOptions = { body: body, headers: requestHeaders
};return this.context.httpClient.post( loginURL,
HttpClient.configurations.v1, httpClientOptions)
.then((response: HttpClientResponse): any => {
return response.json();
});
}vcima The Url this.properties + /admin/api/v2/list" is to your custom API?
You need to register this API in Azure AD as a Registered Application. From there, you would use the AADHttpClient instead of the HttpClient you are using, to send requests to that API. This is outlined in the SPFx documentation.
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/use-aadhttpclient
