Blazor WebAssembly: builder.Services.AddMsalAuthentication выдает исключение => Невозможно прочитать свойство 'join' неопределенного - PullRequest
Новая
       38

Blazor WebAssembly: builder.Services.AddMsalAuthentication выдает исключение => Невозможно прочитать свойство 'join' неопределенного

0 голосов
/ 27 мая 2020

Моя первая попытка использовать авторизацию MSAL, но в Blazor она не удалась. Любые подсказки (это будет простой ответ, я думаю?)

Доступно небольшое репо здесь

Файл клиента: Program.cs 

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");

builder.Services.AddMsalAuthentication(options => //THROWS EXCEPTION!!!!!
{
    options.ProviderOptions.AdditionalScopesToConsent.Add($"https://graph.microsoft.com/User.Read");
});

var baseAddress = builder.HostEnvironment.BaseAddress;
builder.Services.AddHttpClient(baseAddress, client => client.BaseAddress = new Uri(baseAddress))
        .AddHttpMessageHandler<BaseAddressAuthorizationMessageHandler>();

Неожиданный результат: выброшено исключение

критический:

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer [100] Компонент визуализации необработанного исключения: невозможно прочитать свойство 'join' неопределенного TypeError: невозможно прочитать свойство 'join' неопределенного в Function.createUserManager (https://localhost: 44391 / _content / Microsoft.AspNetCore.Components.WebAssembly.Authentication / AuthenticationService. js: 1: 6020 ) в Function.initializeCore (https://localhost: 44391 / _content / Microsoft.AspNetCore.Components.WebAssembly.Authentication / AuthenticationService. js: 1: 5035 ) в Function.init (https://localhost: 44391 / _content / Microsoft.AspNetCore.Components.WebAssembly.Authentication / AuthenticationService. js: 1: 4575 ) в https://localhost: 44391 / _framework / blazor.webassembly. js: 1: 9873 в новом обещании () в Object.beginInvokeJSFromDo tNet (https://localhost: 44391 / _framework / blazor.webassembly. js: 1: 9841 ) в _mono_wasm_invoke_js_marshalled (* 1030 / *https://localhost: 44391 / _frame wasm / do tnet .3.2.0. js: 1: 171294 ) в do_icall (wasm-function [6049]: 0x10f8b1) в do_icall_wrapper (wasm-function [1896]: 0x50b6a) в interp_exec_method (wasm -функция [1120]: 0x2588e)

1 Ответ

0 голосов
/ 27 мая 2020

Попробуйте что-нибудь вроде этого ... 

builder.Services.AddMsalAuthentication(options =>
{
    ...

    options.ProviderOptions.AdditionalScopesToConsent.Add(
        "https://graph.microsoft.com/Mail.Send");
    options.ProviderOptions.AdditionalScopesToConsent.Add(
        "https://graph.microsoft.com/User.Read");
}

https://docs.microsoft.com/en-us/aspnet/core/security/blazor/webassembly/additional-scenarios?view=aspnetcore-3.1#request -additional-access-tokens

Надеюсь, это поможет!

EDIT 1: Мой клиент Program.cs

using System.Net.Http; using Microsoft.AspNetCore.Components.WebAssembly.Authentication;

Добавьте приведенную ниже ссылку на Index.html страницу 

<script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>

public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");

            builder.Services.AddHttpClient("BlazorWasmAADMsal.ServerAPI", client => client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress))
                .AddHttpMessageHandler<BaseAddressAuthorizationMessageHandler>();

            // Supply HttpClient instances that include access tokens when making requests to the server project
            builder.Services.AddTransient(sp => sp.GetRequiredService<IHttpClientFactory>().CreateClient("BlazorWasmAADMsal.ServerAPI"));

            builder.Services.AddMsalAuthentication(options =>
            {
                builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication);
                options.ProviderOptions.DefaultAccessTokenScopes.Add("api://XXXXXXXXXXXXXXXXXX/API.Access");
            });

            await builder.Build().RunAsync();
        }

РЕДАКТИРОВАТЬ 2: Внесены незначительные изменения. Рабочий проект загружен сюда . В ответ для справки добавлен снимок экрана успешного входа в систему. : -)

enter image description here

РЕДАКТИРОВАТЬ 3:

Azure Active Directory (AAD) Microsoft Graph API области требуются приложению для чтения пользовательских данных и отправки почты. После добавления разрешений API Microsoft Graph на портале Azure AAD дополнительные области настраиваются в клиентском приложении.

Последний раз, когда я пропустил включенные строки ниже, я включил их в Program.cs

  builder.Services.AddMsalAuthentication(options =>
       {
options.ProviderOptions.DefaultAccessTokenScopes.Add("https://graph.microsoft.com/User.Read");
     }

Это была странная ошибка, никогда не ожидал и не видел ее.

Ссылка на AuthenticationService. js в индексе. html не было верный. Я исправил это так, чтобы оно было ... 

<script src="_content/Microsoft.Authentication.WebAssembly.Msal/AuthenticationService.js"></script>

Я также загрузил последний код сюда

Метод IAccessTokenProvider.RequestToken обеспечивает перегрузку, которая позволяет приложению для предоставления токена доступа с заданным набором областей.

В компоненте Razor вы можете написать что-то вроде ниже: 

@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@inject IAccessTokenProvider TokenProvider

...

var tokenResult = await TokenProvider.RequestAccessToken(
    new AccessTokenRequestOptions
    {
        Scopes = new[] { "https://graph.microsoft.com/Mail.Send", 
            "https://graph.microsoft.com/User.Read" }
    });

if (tokenResult.TryGetToken(out var token))
{
    ...
}

AccessTokenResult.TryGetToken возвращает:

true с токеном для использования. false, если токен не получен.

Надеюсь, это вам поможет.

...