Umbraco 14 equivalent to contentResource api servi...
# help-with-umbraco
a
What is the new way of calling the umbraco api (contentResource) to fetch data, is there none? Do devs need to create their own controllers to fetch data from Umbraco? I'm in need of fetching node content from Umbraco to verify it is valid, and I'm not seeing any kind of backoffice api for fetching content.
r
Content will now come from the Content Delivery API (https://docs.umbraco.com/umbraco-cms/reference/content-delivery-api) and most backoffice API calls will go through the Management API (https://docs.umbraco.com/umbraco-cms/reference/management-api). Both have Swagger endpoints so you can test them out before calling them in code
a
thanks, just found this myself, the replacement is the management api.
@rickbutterfield are there any articles on how to consume such an api? I'm used to doing authorization on the session cookie.
My purpose is to create a management api, not a public api. I don't intend to request logged-in users to have to log in again. I've tried using the decorator [Authorize(Policy = AuthorizationPolicies.BackOfficeAccess)] and reading an injected backOfficeSecurityAccessor. I always get a 401 or find _backOfficeSecurityAccessor.BackOfficeSecurity?.CurrentUser to be null. I must be misunderstaning how to call an authorized url, or it is an umbraco 14 bug.
w
Have you tried the Swagger endpoint ?
a
Yes. Swagger is great for showing api details, but doesn’t show how to actually consume secured apis. I think I might understand now. In the past, you could just inherit from umbracoAuthorizedApiController. Now umbraco expects you as a developer to gather and send an oauth request.
if I am correct, we need to now utilize a package such as openapi-ts to generate a typescript interface for the oauth api endpoint, then we can send data to it.
c
> Yes. Swagger is great for showing api details, but doesn’t show how to actually consume secured apis.
The swagger/openai is a spec that is produced, the UI is just autogenerated based on that spec
r
@Aaron Sawyer yes, if you are wanting to use the Management API or your own API in a new backoffice package, your best bet would be to generate a client with
openapi-ts
and then authenticate like this: https://dev.to/kevinjump/umbraco-early-adopter-gotcha-authing-requests-4m63
https://dev.to/kevinjump/series/26248
Umbraco's tool of choice is now @hey-api\now openapi-ts
just some things I came across.. not used in anger as yet.
n
Depending on what you need to do with the content, you can always use the CMS' generated services, rather than creating your own API endpoint. Import it into your component, wrap the call in
tryExecuteAndNotify
, and Bob's your mother's brother.
a
lol. What do you mean by the CMS generated services, I'm guessing you mean the existing management api? Also, I'm not intending on making a package, just adding custom backoffice functionality for a single site (I assume this really doesn't make a difference, the same steps need to be taken).
w
Well depends what you are doing. Do you just need to fetch a piece of content or do you need some really custom JSON response for your needs?
a
I need custom json. This is a very common occurrence for us, we build some backoffice button for example, it calls a c# controller, and returns json. Naturally we want to lock down that c# controller to only backoffice users. This isn't a package, it is only for a single website installation. I'm not 100% sure I'm doing this the right way. I am following the early adopter's guide by kevin jump, and I'm currently attempting to run the openapi-ts command, so I can get the interface, to call my controller with the proper umbraco oauth authentication. Seems like a lot for just calling a single controller endpoint to do some custom thing on click.
w
Well you dont need to have a strongly typed TypeScript client for your custom API MGMT controller.
But it does have a couple of perks as it will handle the oAuth stuff needed to talk to the API that Rick mentioned.
But in theory you could do some JS request from the button with a simple JS fetch and pass the correct params to the API endpoint as needed
a
Thanks Warren. I don't fully understand the need for repositories, contexts, and services and how thery relate, but I'll look into it. In the meantime I was able to get what I needed working rather easily. import { UMB_AUTH_CONTEXT } from '@umbraco-cms/backoffice/auth'; ... this.consumeContext(UMB_AUTH_CONTEXT, async (auth) => { if (!auth) return; const umbOpenApi = auth.getOpenApiConfiguration(); await umbOpenApi.token().then(function (authToken) { //execute oauth 2 secured endpoint fetch('/my-api/v1/get-stuff/?guidkey=' + guidKey + '&culturecode=' + cultureCode, { method: 'GET', headers: { 'Authorization': 'Bearer ' + authToken, 'Accept': 'application/json' } }).then(function (resp) { resp.json().then(function (result) { //have json data console.log(data); }); }); }); });
w
Yep the repo and store is overkill in most cases IMO
Unless you really have a need for it
a
what I was missing was understanding where to get the token from. it's easy to get the token from UMB_AUTH_CONTEXT
w
Yep
That is the glue that’s missing
So you can do it with a simple fetch like you are
Or go for a typed server response to help you when coding maybe bigger projects
a
I see, and that is the benefit of using the openapi-ts generated data?
w
Yep with your api defined as OpenAPI spec
Typescript with give you completions and tell you the shape of your JSON response/object coming back
Making less typos
a
ok, thanks. This has been very helpful
w
So means you catch early on whilst in your code editor
78 Views