如何從 Blazor 服務器端應用程序中的 razor 頁面導航到 blazor 組件？

Question

我需要從 razor 頁面導航到 blazor 頁面，所以我嘗試這樣做：

public class LoginCallbackModel : PageModel
{
    private readonly NavigationManager navigationManager;

    public LoginCallbackModel(
        NavigationManager navigationManager)
    {
        this.navigationManager = navigationManager;
    }

    public async void OnGet()
    {
        if (User.Identity.IsAuthenticated)
        {
            var accessToken = await HttpContext.GetTokenAsync("access_token");
            var idToken = await HttpContext.GetTokenAsync("id_token");
        }

        navigationManager.NavigateTo("Dashboard");
    }
}

但我得到了這個例外：

RemoteNavigationManager' 尚未初始化

我也試過：

RedirectToPage("Dashboard");

但這也不起作用。

我需要使用 razor 頁面，因為我可以訪問 HttpContext。 那么如何從頁面導航到組件呢？

Answer 1

但是，我可能會遺漏一個步驟，我將創建一個單獨的問題。 這里的問題是如何從 razor 頁面重定向到 blazor 頁面。 我嘗試了不同風格的重定向，但都沒有奏效。

是的，創建一個單獨的問題。 與此同時，答案如下：

創建一個名為Login.cshtml.cs的文件。 應該從 Blazor (RedirectToLogin.razor) 調用此文件。

這是 RedirectToLogin.razor 的代碼

@inject NavigationManager NavigationManager

    @code{
    
        [Parameter]
        public string ReturnUrl { get; set; }
    
        protected override void OnInitialized()
        {
    
            NavigationManager.NavigateTo($"login?redirectUri={ReturnUrl}", forceLoad: true);
    
        }
    
    }

這是Login.cshtml.cs的代碼

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.AspNetCore.Authentication;
using Microsoft.AspNetCore.Authentication.OpenIdConnect;
using Microsoft.AspNetCore.Authentication.Cookies;
using Microsoft.IdentityModel.Tokens;


namespace <namespace of your app>.Pages
{
    public class LoginModel : PageModel
    {
       
        public async Task OnGet(string redirectUri)
        {
            await HttpContext.ChallengeAsync("oidc",
                   new AuthenticationProperties
                      {
                         RedirectUri = redirectUri,
                         IsPersistent = true,
                          ExpiresUtc = DateTimeOffset.UtcNow.AddHours(15)  
                                              // login expiration
                      });

        }
     
    }
}

上面的代碼對返回授權碼的授權服務器執行授權請求。 RedirectUri 將包含 url 以在授權請求返回時重定向到。 您可以將其設置為“儀表板”，而不是來自 ChallengeAsync，而是來自您的 RedirectToLogin 組件 (RedirectToLogin.razor)。 就這些...

再一次，流程是 RedirectToLogin (Blazor) => Login.cshtml.cs (當前代碼) => Auth server => Blazor(也許，“儀表板”)

當您到達“儀表板”時，如果您使用了我在第一個答案中提供的代碼，則訪問令牌應該存儲在您的本地存儲中。 如果你問怎么做，那么答案是：這段代碼很神奇：

var token = await HttpContext.GetTokenAsync("access_token");

此代碼指示 http 上下文獲取訪問令牌以換取授權代碼。 什么時候發生？ 當您的 Blazor 被“第一次”訪問時； 也就是說，在它被完全創建之前 - 這是 _Host.cshtml 履行其角色的時間，其中包括一個 Get 操作（請注意，它是由 Get 方法處理的 http 請求：

public async Task OnGetAsync()
        {
            var token = await HttpContext.GetTokenAsync("access_token");
            var idToken = await HttpContext.GetTokenAsync("id_token");
            AccessToken = token;
            IDToken  = idToken;
        }

這一切都在我的第一個答案中。