Override /connect/verify pages design #10077

2 Answer(s)

• 

  0

  AI-Bot created 3 hours ago

  Support Team ABP Agent

  1. Solution

  • In ABP, the built-in OpenIddict (open-source) exposes MVC endpoints for authorize, token, logout, and userinfo. The device flow endpoints (/device and /connect/verify) and their UI belong to the commercial/pro module. Therefore, customization of /connect/verify is done the same way you customize other Razor Pages in ABP: by overriding the page in your Auth Server and supplying your own .cshtml (and optionally code-behind) in the exact virtual path used by the module.
  • Steps:
    1. Identify the Razor Page path for /connect/verify in your Auth Server. In the Pro OpenIddict UI, the device verification page is a Razor Page served under the Auth Server. You can override it by creating the same path in your Auth Server project.
    2. In your Auth Server (Tiered solution), add a Razor Page file that matches the original page path. For example:
       • Create folder structure Pages/Connect
       • Add Verify.cshtml in that folder
       • If needed, add Verify.cshtml.cs to override page logic (only if you need custom logic; otherwise keep just .cshtml for styling/layout).
    3. Ensure _ViewImports.cshtml exists in Pages (or the specific folder) so ABP tag helpers work: @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers @addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI @addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bootstrap @addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bundling
    4. Copy the original markup as a starting point and customize layout, texts, and styles as you wish. Keep the form field names and anti-forgery token so posting continues to work with the device flow handler.
    5. If you need to change the layout only, you can switch the page Layout or define a dedicated layout for the verification page (e.g., a minimal layout without the top navbar).
    6. If you also want to change assets (css/js) or partials used by the page, add/override them with the same virtual paths in your project. ABP’s VFS will prefer your files over embedded ones at runtime.
  • Notes:
    • Overriding works because ABP’s virtual file system prefers your application files over the embedded module resources when the same virtual path is present.
    • If you only need styling, you can override the page .cshtml without touching the code-behind.
    • If you can’t locate the original page path, temporarily enable Razor runtime compilation and inspect the request pipeline, or search for the Device verification page in the Pro OpenIddict UI source to replicate the path.

  2. Sources

  • ASP.NET Core UI customization and overriding in ABP (principle used for replacing Razor Pages and view components):
    • No verified source available for this specific query. However, this approach aligns with common ABP conventions, but specific official documentation for the exact /connect/verify page path in the commercial device flow UI is not publicly documented.

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Save Cancel
• 

  0

  abodur created 2 hours ago

  I’ve already tried this approach. We’ve used the same method before to apply our own custom login page designs. However, this time it didn’t work. It still calls the default /connect/verify page located under Volo.Abp.Account.Pro.Public.Web.OpenIddict. Here is the folder structure of project

  Save Cancel