Edit link to backoffice in headless setup Umbraco #help-with-umbraco

Edit link to backoffice in headless setup

Bjarne Fyrstenborg

07/04/2024, 7:14 AM

I wonder if anyone has made an edit link shown in frontend when logged into backoffice, when it is a headless setup using Delivery API? E.g. similar to this in traditional MVC project: https://our.umbraco.com/packages/backoffice-extensions/ourumbracoeditlink/

Kaspar Boel Kjeldsen

07/04/2024, 8:17 AM

I don't have the complete solution yet, but we are cooking something up here, because we want to send the editors to our headless app when they click preview, and have the app swap to preview-mode for them, and also be able for them to disengage preview mode while browsing the headless app. Should be trivial then to add a "edit" button when in preview-mode as well. First we hijack the preview request in Umbraco

Copy code

csharp
private readonly RequestDelegate _next;
private readonly string? redirectPath;
private readonly string? secret;
public PreviewHijackingMiddleware(IConfiguration configuration, RequestDelegate next)
{
    redirectPath = configuration.GetValue<string>("App:Url");
    secret = configuration.GetValue<string>("App:Secret");
    _next = next;
}

public PreviewHijackingMiddleware(RequestDelegate next)
{
    _next = next;
}
public async Task InvokeAsync(HttpContext context)
{
    if (context.Request.Path.StartsWithSegments(new PathString("/umbraco/preview")))
    {
        // Add authorization header
        
        context.Response.Headers.Append("cms-preview-secret", secret);

        // Optionally, add a header to communicate the original path, if needed elsewhere
        context.Response.Headers.Append("Redirect", context.Request.Path.Value);

        // Perform the redirection
        if(context.Request.Path.Value!.EndsWith("/end"))
            context.Response.Redirect($"{redirectPath}/api/endpreview", permanent: false);
        else context.Response.Redirect($"{redirectPath}/api/preview", permanent: false);
        return;  // Ensure no further processing if redirecting
    }
    // Proceed with next middleware in the pipeline if no condition matched
    await _next(context);
}

Kaspar Boel Kjeldsen

07/04/2024, 8:18 AM

and add a secret to our request header to not just anything can active preview mode in our app In our app we then pretty much just set a cookie if the request is autherized in an api and currently sends to the frontpage (haven't written the part that makes sure they actually land on the correct page yet)

Copy code

js
import { type NextRequest } from "next/server";
import { cookies } from "next/headers";

export async function GET(request: NextRequest) {
  const authKey = process.env.CMS_PREVIEW_APIKEY;
  const authHeader = request.headers.get("cms-preview-secret");

  if (authHeader !== authKey) {
    return Response.error();
  }
  let redirect = request.headers.get("Redirect");

  // redirect should contain /umbraco/preview/{some integer id}
  const cookieStore = cookies();
  cookieStore.set("isPreview", "true");

  // todo - magic here to convert /umbraco/preview/id to actual path
  // we need an api in umbraco because it's too crazy to do in middleware...
  // for now we just redirect to frontpage

  redirect = "/";

  return Response.redirect(`${process.env.APP_URL}${redirect}`);
}

Don't know if you're looking for something like that ?

Bjarne Fyrstenborg

07/11/2024, 7:58 AM

Yeah, however we don't want it only when accessing preview, but more like if having the "edit link" if logged into backoffice in a different window/tab.

huwred

07/11/2024, 9:08 AM

There is a package Our.Umbraco.TagHelpers which gives you a taghelper that does this

Bjarne Fyrstenborg

07/17/2024, 3:10 PM

Yes, but it won't work in a headless setup, where frontend is separated from backend.

huwred

07/17/2024, 4:06 PM

No, but you may be able to look at what it generates for the link

7 Views

Previous Next