How to add the bearer token to your http request
# help-with-umbraco
a
Hello, can someone tell me (or better yet, send me the documentation) of how umbraco excepts me to add the bearer token to my http requests to my custom management API Controller?
k
Hi, If you use the Identiy Model nuget package (which umbraco are also using). you can authenticate against the umbraco site and attach the token to the HttpClient. https://github.com/Jumoo/uSync.CommandLine/blob/v15/main/uSync.Commands.Core/Http/HttpClientExtensions.cs
(this assumes you have created an API User on the site, and you have a client id and secret for that user)
a
Hi, My package is a custom dashboard in the backoffice, Do I still need an api user? shouldn't I use the user that is already logged in?
k
hi, so you want to access your controller from your dashboard (so the client?)
that's a bit diffrent, there are a few bits to it. 1. you need to expose your custom API via swagger 2. you needto generate a client to talk to the controller api 3. you need to add the authentication tokens to that client
a
Yes, that's what I want. Is that truly how it works? It seems to me a bit strange that I need to create an entire client and need to add the token my self if the request should come from the umbraco backoffice to an api that should only be available for that backoffice dashboard. I would expect umbraco to have an client-side helper function to do the http request with the bearer token already in localstorage.
k
You don't need to and you can get the token from umbraco in the
UMB_AUTH_CONTEXT
- but having something generate a client for you just removes the need for any browser request code etc. e.g (this is assigning the token to a local OpenAPI client, - but you can just grab the token)
Copy code
ts
_host.consumeContext(UMB_AUTH_CONTEXT, (_auth) => {
        const umbOpenApi = _auth.getOpenApiConfiguration();
        OpenAPI.TOKEN = umbOpenApi.token;
        OpenAPI.BASE = umbOpenApi.base;
        OpenAPI.WITH_CREDENTIALS = umbOpenApi.withCredentials;
});
I am not sure if there is something you can jump on in the umbraco core, because that too is generating a client library, for the requests to its own OpenAPI stuff, everything can be wrapped in tryExecuteAndNotify calls, but that really is error handling the results not the actual requests.
a
I see, is there any documentation on how I should generate the client If I add my api to swagger?
k
I thought there was now something in the umbraco docs but i can't find it 😞 this is for v14 - https://dev.to/kevinjump/series/26248 *but some of this has changed for v15! you can see how uSync does it here : https://github.com/KevinJump/uSync/tree/v15/dev/uSync.Backoffice.Management.Client/usync-assets principally on the client side: 1. it uses hey-api , to generate a typescript library using this config (https://github.com/KevinJump/uSync/blob/v15/dev/uSync.Backoffice.Management.Client/usync-assets/openapi-ts.config.ts) 2. this generates the code in the /src/api folder - (https://github.com/KevinJump/uSync/tree/v15/dev/uSync.Backoffice.Management.Client/usync-assets/src/api) 3. there are 'datasources' to then call the enpoints (!this is probibly over the top for what you actually need to do - just know you can do a
MyService.Method
call from any thing , controller, element, etc. (https://github.com/KevinJump/uSync/blob/v15/dev/uSync.Backoffice.Management.Client/usync-assets/src/repository/sources/SyncSettings.source.ts) on the server side (if you don't have swagger stuff yet) 1. the key thing is configuring swagger for your stuff to appear (https://github.com/KevinJump/uSync/blob/v15/dev/uSync.Backoffice.Management.Api/Configuration/ConfigSyncApiSwaggerGenOptions.cs) 2. you probably want to mark up your methods/controllers with the backoffice attributes to restrict them (like here https://dev.to/kevinjump/early-adopters-guide-to-umbraco-v14-packages-communicating-with-the-server-part-1-38lb)
a
I have enough information to proceed. Thank you so much for answering all my question!
j
In line with what Kevin wrote, I have been gathering some knowledge and different methods of doing authorization in Bellissima and been trying to write an article about it. It's not published yet, but maybe this will give you some info (it essentially covers what Kevin has linked to in his sources): https://dev.to/iovergaard/umbraco-15-and-bellissima-authentication-for-your-own-needs-27ea-temp-slug-9403756?preview=80848513f3d3deb2a6eb5b447f7858279bbcc34d91425a3a8ce860b491e3972f7a56aa56cbd6dcb15076c66ca7eb6a1cda9f0bce3987ca3aab0b5778
it might end up on UmbracoDocs instead - we'll see 🙂
Warren pointed me in this direction. There is a dotnet template with Umbraco 15 that sets up a client as well. You could use that with
dotnet new umbraco-extension
or check out its source: https://github.com/umbraco/Umbraco-CMS/blob/contrib/templates/UmbracoExtension/Client/src/entrypoints/entrypoint.ts#L14-L31
a
Thanks for the additional help and information!
45 Views