How can I get the user token from the context in a Sharepoint WebPart?

%3CLINGO-SUB%20id%3D%22lingo-sub-1231154%22%20slang%3D%22es-ES%22%3EHow%20can%20I%20get%20the%20user%20token%20from%20the%20context%20in%20a%20Sharepoint%20WebPart%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1231154%22%20slang%3D%22es-ES%22%3E%3CP%3EI%20have%20been%20working%20in%20a%20Sharepoint%20Webpart%20with%20TypeScript.%20I%20would%20like%20to%20obtain%20the%20user%20token%20to%20pass%20it%20as%20a%20parameter%20in%20the%20headers.%20How%20can%20I%20do%20this%3F.%3C%2FP%3E%3CP%3E%3CBR%20%2F%3ESo%20far%2C%20I%20have%20something%20like%20this%3A%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%3CP%3Epublic%20render()%3A%3CBR%20%2F%3Evoid%20%3F%20...%20%3CBR%20%2F%3Elet%20request%20%3F%20this.getRequest(param1)%3B%20%3CBR%20%2F%3E...%20%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%3CP%3Eprotected%20getRequest(param1%3A%20string)%3A%20Promise%3CANY%3E%20%3F%3C%2FANY%3E%3C%2FP%3E%3CP%3Elet%20loginURL%20%3F%20this.properties.url%2B%22%2Fadmin%2Fapi%2Fv2%2Flist%22%3B%3C%2FP%3E%3CP%3Elet%20body%20s''param%22%3A%22'%2Bparam1%2B'%22'%3B%3C%2FP%3E%3CP%3Elet%20requestHeaders%3A%20Headers%20%3F%20new%20Headers()%3B%20requestHeaders.append(%22Accept-Tos%22%2C%20%22true%22)%3B%20requestHeaders.append(%22Content-Type%22%2C%20%22application%2Fjson%22)%3B%20requestHeaders.append(%22respondWithObject%22%2C%20%22true%22)%3B%20%3CBR%20%2F%3E**requestHeaders.append('Authorization'%2C%20%3CTOKEN%3E'Bearer')%3B%20%3F%3F%3F%3F%20**%3C%2FTOKEN%3E%3C%2FP%3E%3CP%3Elet%20httpClientOptions%3A%20IHttpClientOptions%20%3F%20body%3A%20body%2C%20headers%3A%20requestHeaders%3CBR%20%2F%3E%3F%3C%2FP%3E%3CP%3Ereturn%3CBR%20%2F%3Ethis.context.httpClient.post(%20loginURL%2C%20HttpClient.configurations.v1%2C%3CBR%20%2F%3EhttpClientOptions)%20.then((response%3A%20HttpClientResponse)%3A%20any%20.%26gt%3B%20%3F%3CBR%20%2F%3Ereturn%20response.json()%3B%3CBR%20%2F%3E%3F%20%3CBR%20%2F%3E%7D%3C%2FP%3E%3CP%3E%3CBR%20%2F%3ERegards%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1231154%22%20slang%3D%22es-ES%22%3E%3CLINGO-LABEL%3ESharepoint%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EToken%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3Etypescript%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EWebpart%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1231828%22%20slang%3D%22en-US%22%3ERe%3A%20How%20can%20I%20get%20the%20user%20token%20from%20the%20context%20in%20a%20Sharepoint%20WebPart%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1231828%22%20slang%3D%22en-US%22%3EHi%2C%3CBR%20%2F%3EI%20suggest%20you%20try%20to%20use%20PnP%20JS%20for%20SharePoint%20communication.%20It%20will%20take%20care%20of%20all%20the%20authentication%20and%20authorization%20part%20so%20that%20we%20can%20focus%20on%20the%20functionality.%20Please%20refer%20the%20below%20link%20for%20more%20info.%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fpnp.github.io%2Fpnpjs%2Fgetting-started%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fpnp.github.io%2Fpnpjs%2Fgetting-started%2F%3C%2FA%3E%3C%2FLINGO-BODY%3E
Highlighted
Contributor

I have been working in a Sharepoint Webpart with TypeScript. I would like to obtain the user token to pass it as a parameter in the headers. How can I do this?.


So far, I have something like this:

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();
});
}


Regards

 

1 Reply
Highlighted
Hi,
I suggest you try to use PnP JS for SharePoint communication. It will take care of all the authentication and authorization part so that we can focus on the functionality. Please refer the below link for more info.
https://pnp.github.io/pnpjs/getting-started/