xác thực chống lại một WebAPI sử dụng B2C xanh từ một spa (góc và adal.js)

Question

Tôi đang cố gắng để xác thực SPA của tôi (angular.js và adal.js (giống như ví dụ https://github.com/Azure-Samples/active-directory-angularjs-singlepageapp-dotnet-webapi)

AD của tôi là một xanh B2C preview thuê

tôi thành công có thể đăng nhập vào WebAPI tôi từ trang web của tôi, nhưng không phải từ SPA JS qua góc

cài đặt của tôi:.. WebAPI và chia sẻ cùng ClientID website (chỉ thực hiện dường như hoạt động theo cách này) SPA có clientid riêng, bởi vì nếu không tôi nhận được lỗi "phiên bản api không được hỗ trợ" khi cố gắng đăng nhập. Tôi đã bật oauth2AllowImplicitFlow cho tất cả các ứng dụng, được cấp quyền ứng dụng từ spa đến webapi. Cors được bật trên Webapi và SPA.

Tôi thậm chí dường như có thể nhận được mã thông báo sau khi hoàn tất đăng nhập, nhưng khi tôi cố gắng gọi api của mình, tôi nhận được quyền truy cập bị từ chối cho yêu cầu này.

Điều này có nghĩa vụ phải hoạt động theo cách này không? Tôi không thể tìm thấy một ví dụ về cách sử dụng b2c cùng với một spa và api chạy trên các máy chủ khác nhau.

Cảm ơn trước

Peter

Answer 1

Đây là not currently supported.

trang ứng dụng đơn (Javascript)

Nhiều ứng dụng hiện đại có một Single Page Application (SPA) front-end viết chủ yếu trong Javascript và thường sử dụng một SPA khuôn khổ như AngularJS, Ember.js, Durandal, vv Luồng này là chưa có trong bản xem trước Azure AD B2C.

Answer 2

Chính thức nó không được hỗ trợ bởi Microsoft, nhưng với một số sửa đổi của nhánh thử nghiệm trên github azure-activedirectory-library-for-js bạn có thể làm cho nó hoạt động.

Fix logout url để endpoint v2.0 của giao thức OAuth2 với tham số chính sách trong phương pháp logout của adal.js tại dòng 546:

var urlNavigate = this.instance + tenant + '/oauth2/v2.0/logout?' + logout + (this.config.extraQueryParameter ? '&' + this.config.extraQueryParameter : ''); 

Thuộc tính tên tài khoản không bao giờ đặt trong phương pháp _createUser của ADAL. js. Tên người dùng được sử dụng trong quá trình đổi mới thẻ, sửa chữa nó bằng cách thêm này ba dòng:

if (parsedJson.hasOwnProperty('emails')) { 
    user.userName = parsedJson.emails[0]; 
} 

Cuối cùng, trong ADAL-angular.js tại dòng 146, acquireTokenSilent được gọi với tham số kiểu sai. Phương pháp này chỉ chấp nhận kiểu mảng như phạm vi tham số, sửa chữa nó bằng cách đặt ClientId trong mảng:

_adal.acquireTokenSilent([_adal.config.clientId], null, function (error, tokenOut) { 

tôi đã kéo một yêu cầu trên github về vấn đề này, bạn có thể sử dụng nó như tài liệu tham khảo.

Khi bạn khởi tạo cung cấp ADAL trên góc đặt dấu B2C của bạn trong chính sách trong extraQueryParameter như thế này:

adalProvider.init({ 
    tenant: 'tenant.onmicrosoft.com', 
    clientId: 'clientid', 
    extraQueryParameter: "p=B2C_1_SignIn" 
}, $httpProvider); 

Answer 3

Trông giống như một kịch bản AzureAD B2C mẫu mã cho SPA đã vừa phát hành trên github. Xem nó here.

"Mẫu cho biết cách tạo ứng dụng web bằng cách sử dụng Hello.js thực hiện quản lý danh tính với Azure AD B2C. Ứng dụng là ứng dụng web đơn giản thực hiện chức năng đăng nhập, đăng ký và đăng xuất chính sách đăng nhập và đăng nhập cũng như chỉnh sửa tiểu sử bằng Chính sách Chỉnh sửa PDF. "

LƯU Ý: Tại thời điểm câu trả lời này chức năng vẫn còn trong "xem trước"