Dans cet article, je vais vous guider dans la création d’une application Blazor WebAssembly avec une connexion qui utilise la sécurité native de Blazor et un compte Google.
Le nouveau modèle intègre la sécurité et est EXTRÊMEMENT facile à configurer. En suivant ce guide, votre application utilisera Blazor et votre compte Google en moins d’une heure.
Commencez avec votre application Blazor
1. Créez une nouvelle application Blazor avec l’interface Visual Studio
Démarrez Visual Studio 2022 et démarrez une nouvelle solution appelée Blazor WebAssembly Standalone App. Voir l’image ci-dessous.
2. Sélectionnez le chemin souhaité pour stocker votre projet
Enregistrez votre projet à votre endroit préféré sur votre appareil.
3. Sélectionnez le type d’authentification Comptes individuels
Sélectionnez le Authentification tapez l’option pour choisir comment le modèle fonctionnera. J’ai utilisé le type Comptes individuels dans cet exemple et j’ai décidé d’inclure des exemples de pages.
Configurer la console Google
1. Créez votre compte Google
Vous devrez créer un compte Google si vous n’en avez pas encore un et accéder https://console.cloud.google.com/ pour créer les paramètres de votre application.
Maintenant, vous devez configurer votre application/application Web sur la console Google et enregistrer votre URL pour fonctionner avec l’authentification Blazor.
2. Créer un nouveau projet
Cliquez sur le bouton de liste et choisissez « Nouveau projet ». Maintenant, vous créez le projet et démarrez la nouvelle application.
3. Nommez votre projet
Créez le nom de votre projet tel que le monde le saura. Après l’avoir nommé, vous ne pourrez plus le modifier. Il n’est pas nécessaire d’avoir une organisation.
*Pour capturer les images, je les ai fusionnées avec ma démo publiée (IdentityBlazor) et la nouvelle (MyBlazorIdentity), pour cet article.
4. Créez la clé API
Créez la clé API que vous définirez sur le code Blazor en utilisant le menu «+ Créer des informations d’identification.»
Enregistrez la clé API en toute sécurité sur votre appareil.
5. Créez un identifiant client OAuth
Maintenant, vous devez créer l’ID client OAuth pour votre projet. Dans le même menu, «+ Créer des informations d’identification», choisissez la deuxième option :
Cliquer sur Configurer l’écran de consentement pour configurer les URL pour la confidentialité et les conditions d’utilisation.
6. Définir les utilisateurs sur Externe
Si vous n’êtes pas une organisation, vous devez utiliser Externe afin que tous les utilisateurs de Google puissent se connecter à votre application.
7. Remplissez les informations sur votre candidature
Maintenant, remplissez le nom de l’application et l’adresse e-mail prenant en charge votre candidature.
Ajoutez le logo de votre application :
Enregistrez les URL en fonction de leurs types d’application, de leur politique de confidentialité et de leurs conditions.
Remarque : Votre domaine doit être reconnu dans la console Google avec la configuration DNS TXT activée. Suivez la console de recherche Google pour vous aider à le faire. Si vous utilisez CloudFlare, c’est plus simple.
8. Autoriser les URL à rediriger les URI
Vous devez configurer votre hôte local pour tester sur votre appareil de développeur.
L’URL à utiliser par localhost est nécessaire. Sinon, vous rencontrerez une erreur lors de la connexion avec votre compte Google.
Maintenant, finissons la configuration du projet
C’est maintenant la partie Blazor où vous devez ajouter votre identifiant client et obtenir ces informations depuis la console Google.
Commencez à configurer Program.cs avec votre ID client. Vous le trouverez sur la page Identifiants Google Console :
Ajoutez-le au ProviderOptions.ClientId et réglez le Autorité aux comptes Google :
1. builder.Services.AddOidcAuthentication(options =>
2. {
3. options.ProviderOptions.Authority = "https://accounts.google.com/";
4. options.ProviderOptions.ClientId = "ZZZ555.apps.googleusercontent.com";
5. options.ProviderOptions.ResponseType = "id_token";
6. options.ProviderOptions.DefaultScopes.Add("openid");
7. options.ProviderOptions.DefaultScopes.Add("profile");
8. });
OUAH! C’EST FAIT!
Maintenant, personnalisez le modèle affichant l’image de l’utilisateur à l’écran.
Pour cela, vous devrez le stocker dans le navigateur local. J’utilise le stockage local Blazored. Ajoutez-le à partir du package NuGet :
Sur Programme.csajoutez la référence du service :
1. builder.Services.AddBlazoredLocalStorage();
Remplacez le code pour Authentification.razor:
- Ajoutez le Blazored.LocalStorage, utilisé pour stocker la valeur clé de l’image de l’URL du compte Google.
- Modifie alors RemoteAuthenticatorView lire OnLogInSucceeded et OnLogOutSucceeded.
- Ajouter le Paramètre en cascade.
- Ajouter le HandleLoginSucceeded pour lire l’UID et l’image du compte Google.
- Ajouter le HandleLogOutSucceeded pour vider le cache.
1. @page "/authentication/{action}"
2. @using Microsoft.AspNetCore.Components.WebAssembly.Authentication
3. @using Blazored.LocalStorage
4. @inject ILocalStorageService localStorage
5.
6. <RemoteAuthenticatorView Action="@Action" OnLogOutSucceeded="HandleLogOutSucceeded" OnLogInSucceeded="HandleLoginSucceeded" />
7.
8. @code {
9.
10. [Parameter] public string? Action { get; set; }
11.
12. [CascadingParameter]
13. private Task<AuthenticationState> authenticationStateTask { get; set; }
14.
15. private async Task HandleLogOutSucceeded(RemoteAuthenticationState arg)
16. {
17. await localStorage.ClearAsync();
18. }
19.
20. private async Task HandleLoginSucceeded(RemoteAuthenticationState arg)
21. {
22. var authState = await authenticationStateTask;
23. var user = authState.User;
24. var img = user.FindFirst("picture")?.Value;
25. var uid = user.FindFirst("sub")?.Value; // UID of the Google Account
26.
27. await localStorage.SetItemAsStringAsync("userImg", img);
28. }
29. }
Dans le LoginDisplay.razor, ajoutez le code pour afficher l’image :
1. <AuthorizeView>
2. <Authorized>
3. <span class="d-inline-block">
4. Hello, @context.User.Identity?.Name
5. </span>
6. <img src="https://www.telerik.com/blogs/@UserImg" width="22" height="22" class="@StyleHidden" />
7. <button class="nav-link btn btn-link" @onclick="BeginLogOut">Log out</button>
8. </Authorized>
9. ...
10. </AuthorizeView>
Remarque : LoginDisplay.razor est traité avant le HandleLoginSucceeded, j’ai donc ajouté une astuce à lire lorsqu’elle sera disponible dans LoginDisplay. En effet, il existe d’autres moyens plus astucieux que celui-là, mais celui-ci était simple et efficace.
1. @code {
2. private string UserImg { get; set; }
3. private string StyleHidden { get; set; }= "invisible";
4. private Timer? _timer;
5.
6. protected override async Task OnAfterRenderAsync(bool firstRender)
7. {
8. if (firstRender)
9. {
10. var userImg = await localStorage.GetItemAsStringAsync("userImg") ?? "";
11. while (userImg.Length == 0)
12. {
13. userImg = await localStorage.GetItemAsStringAsync("userImg") ?? "";
14. await Task.Delay(1000);
15. }
16. UserImg = userImg;
17. StyleHidden = "d-inline-block rounded-circle border-0";
18. await InvokeAsync(StateHasChanged);
19. }
20. }
21. }
Voilà ! C’est prêt!
Édition
Pour publier votre application, cliquez sur « Publier l’application » sur la console Google :
Avant la confirmation, vérifiez si vous êtes vraiment prêt. Avez-vous rédigé votre politique de confidentialité et vos conditions d’inscription ? Si oui, continuez et Confirmer.
Comment utilisez-vous Blazor pour afficher et masquer des informations ?
C’est simple : ajoutez la balise sur votre page AutoriserVue et à l’intérieur le Autorisé et Pas autoriséla page s’affichera automatiquement en fonction de l’état actuel du journal.
Ajoutez votre contenu privé à l’intérieur du Autorisé étiqueter.
Et ajoutez votre contenu non autorisé dans le Pas autorisé étiqueter.
Exemple:
1. <AuthorizeView>
2. <Authorized>
3. <PageTitle>Weather for @context.User.Identity?.Name</PageTitle>
4.
5. ...
6.
7. </Authorized>
8. <NotAuthorized>
9. <p> You’re not authorized to view this page.</p>
10. </NotAuthorized>
11. </AuthorizeView>
À l’intérieur de Autorisévous aurez accès au @context.User.Identity.Name pour accéder au nom d’utilisateur.
Quand le HandleLoginSucceeded événement se produit, vous pouvez accéder au Réclamations où le image est. Vous pouvez utiliser ce code :
1. user.FindFirst("picture")?.Value;
Lorsque vous configurez le compte Google, vous pouvez réclamer des informations auprès de l’utilisateur, elles vous seront donc envoyées sur cette propriété : Réclamations du Utilisateur propriété.
1. var authState = await authenticationStateTask;
2. var user = authState.User;
Vous trouverez ci-dessous un exemple de la propriété Revendications utilisateur.
Utiliser l’interface utilisateur Telerik pour Blazor dans WebAssembly
N’oublie pas que tu peux progresser Interface utilisateur Telerik pour Blazor dans WebAssembly. Voici un vidéo vous montrant comment présenter les composants de l’interface utilisateur Telerik sur ce projet.
Conclure
Si vous souhaitez essayer cet échantillon, visitez https://identity.jsmotta.com.
Avez-vous des questions à ce sujet ? N’hésitez pas à me contacter sur mon profil LinkedIn dans ma bio.
Les références
Source link