Praktyczny programista
Strona główna Programowanie Projekt Blazor Webassembly – Uwierzytelnianie Azure AD B2C i Google…

Projekt Blazor Webassembly – Uwierzytelnianie Azure AD B2C i Google…

przez Radek

Pisałem już wcześniej projekt z użyciem Blazor’a, ale po obejrzeniu ostatniej konferencji .NET Conf 2021 w głowie zaświtał mi pomysł aby spróbować się z tą technologią jeszcze raz, tym razem w nowej odsłonie w połączeniu z .NET 6.

Decyzję o tym co moja aplikacją będzie robić odłożyłem na później, na początku postanowiłem zacząć od zaimplementowania uwierzytelniania użytkowników oraz wybrania komponentów UI.

Wszystkim, którzy interesują się tematem Blazora polecam odwiedzenie strony Awesome Blazor

Podłączenie Azure AD B2C do aplikacji

Microsoft promuje aktualnie użycie usługi Azure Active Directory B2C do zarządzania użytkownikami.

Według ich zapewnień Azure AD B2C jest darmowe do 50000 użytkowników miesięcznie.

Nie będę teraz krok po kroku pokazywał rejestrowania aplikacji Blazor Webassembly w Azure Active Directory z kilku powodów:

Proponuję przejść przez to samemu. Moment kiedy zobaczymy następujący widok jest bardzo satysfakcjonujący 😉

Uwierzytelnianie przez konto Google

Google Developers Console

Aby umożliwić uwierzytelnianie za pomocą Google, musimy zarejestrować naszą aplikację w  Google Developers Console.

Aby to zrobić, należy otworzyć stronę Google Developers Console a następnie wybrać przycisk „Nowy projekt” z lewego-górnego rogu okna.

Nowy projekt

Ekran akceptacji OAuth

Gdy projekt jest utworzony to przechodzimy do zakładki „Ekran akceptacji OAuth” wybieramy „Zewnętrzny” i klikamy „Utwórz”.

W kolejnym etapie wypełniamy wymagane pola, takie jak nazwa aplikacji oraz adres email dewelopera.

W sekcji „Autoryzowane domeny” musimy dodać „b2clogin.com”.

Po zapisaniu danych przechodzimy do kolejnej sekcji „Dane logowania”.

Dane logowania

Gdzie musimy stworzyć „Identyfikator klienta OAuth”.

W następnym oknie należy wybrać „Aplikacja internetowa” jako typ aplikacji oraz wpisać nazwę.

W kolejnych krokach wypełniamy „Identyfikatory URI” w sekcjach:

  • Autoryzowane źródła JavaScriptu – gdzie wstawiamy „https://your-tenant-name.b2clogin.com”
  • Autoryzowane identyfikatory URI przekierowania – gdzie wstawiamy „https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/oauth2/authresp”

Oczywiście „your-tenant-name” należy zastąpić własną nazwą.

Podczas rejestracji URI w Google należy używać wszędzie małych liter, nawet jeśli nazwa tenant’a zawiera duże litery.

Pamiętaj, żeby po utworzeniu zapisać sobie „Identyfikator klienta” oraz „Sekret”!!!

Konfiguracja Google jako dostawcę tożsamości

Logujemy się ponownie w portalu Azure i przechodzimy do strony Azure AD B2C, gdzie następnie przełączamy się do widoku „Identity providers„.

Teraz dodajemy Google jako dostawcę tożsamości, wypełniamy wymagane pola danymi z Google’a.

Po naciśnięciu przycisku „Save” musimy zmodyfikować utworzony wcześniej B2C_1_BlazorTemplateSignUpSignIn „user flow”.

Na stronie ” B2C_1_BlazorTemplateSignUpSignIn” wybieramy widok „Identity providers”, gdzie zaznaczamy „Google” i zapisujemy zmiany.

Po zakończeniu całego procesu strona logowania do aplikacji wygląda jak na kolejnym obrazku.

Źródła:

You may also like