ورود با گوگل به وب سایتهای ساخته شده با blazor

روش ساخت ورود با گوگل در Blazor Auto Server 

در این آموزش نحوه ایجاد کردن ورود با گوگل بدون entityframework (ef) را به همراه کدهای لازم شرح میدهم.

این آموزش در بستر Asp.net Blazor Auto ایجاد گردیده و برای Blazor Server هم صادق می باشد.

مراحل ورود با گوگل در وب سایت های blazor به شرح زیر می باشد

•  ابتدا در  کنسول گوگل یک نام برای برنامه خود ایجاد و یک clientId , secret key دریافت کنید
• یک پروژه  Blazor Auto server ایجاد کنید که ما در این مثال از core .net 9 استفاده نموده ایم
• ناگت های زیر را نصب نمایید

<PackageReference Include="Microsoft.AspNetCore.Authentication.Cookies" Version="2.3.0" />
<PackageReference Include="Microsoft.AspNetCore.Authentication.Google" Version="9.0.10" />
    

• فایل program.cs را به صورت زیر تغییر دهید

using GoogleAuthArian.Components;
using Microsoft.AspNetCore.Authentication;
using Microsoft.AspNetCore.Authentication.Cookies;
using Microsoft.AspNetCore.Authentication.Google;


var builder = WebApplication.CreateBuilder(args);

// Add services
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();

// اضافه شود
builder.Services.AddAuthentication(options =>
{
    options.DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme;
    options.DefaultChallengeScheme = GoogleDefaults.AuthenticationScheme;
})
.AddCookie(options =>
{
    options.LoginPath = "/login";
    options.LogoutPath = "/logout";
    options.ExpireTimeSpan = TimeSpan.FromDays(30);
})
.AddGoogle(options =>
{
    options.ClientId = builder.Configuration["Authentication:Google:ClientId"];
    options.ClientSecret = builder.Configuration["Authentication:Google:ClientSecret"];
    options.CallbackPath = "/signin-google";
    options.SaveTokens = true;

    // Request the correct scopes for profile information
    options.Scope.Add("https://www.googleapis.com/auth/userinfo.profile");
    options.Scope.Add("https://www.googleapis.com/auth/userinfo.email");

    // Map the claims properly
    options.ClaimActions.MapJsonKey("picture", "picture");
    options.ClaimActions.MapJsonKey("email", "email");
    options.ClaimActions.MapJsonKey("name", "name");
    options.ClaimActions.MapJsonKey("given_name", "given_name");
    options.ClaimActions.MapJsonKey("family_name", "family_name");
});

builder.Services.AddAuthorization();
builder.Services.AddCascadingAuthenticationState();


var app = builder.Build();

if (app.Environment.IsDevelopment())
{
    app.UseWebAssemblyDebugging();
}
else
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseAntiforgery();

// اضافه شود
app.UseAuthentication();
app.UseAuthorization();

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddInteractiveWebAssemblyRenderMode();

// اضافه شود
app.MapGet("/login", async (HttpContext context, string returnUrl = "/") =>
{
    await context.ChallengeAsync(GoogleDefaults.AuthenticationScheme, new()
    {
        RedirectUri = returnUrl
    });
});

app.MapPost("/logout", async (HttpContext context) =>
{
    await context.SignOutAsync(CookieAuthenticationDefaults.AuthenticationScheme);

    // پاک کردن همه کوکی‌های احراز هویت
    var cookiesToDelete = new[] {
        "MyApp.Auth",
        ".AspNetCore.Cookies",
        ".AspNetCore.Identity.Application"
    };

    foreach (var cookieName in cookiesToDelete)
    {
        context.Response.Cookies.Delete(cookieName);
        context.Response.Cookies.Append(cookieName, "", new CookieOptions
        {
            Expires = DateTimeOffset.Now.AddDays(-1),
            Path = "/"
        });
    }

    // هدرهای ضد کش
    context.Response.Headers["Cache-Control"] = "no-cache, no-store, must-revalidate";
    context.Response.Headers["Pragma"] = "no-cache";
    context.Response.Headers["Expires"] = "0";

    return Results.Redirect("/");
});
app.Run();

• در فایل appsettings.json کدهای زیر را اضافه کنید

  "Authentication": {
    "Google": {
      "ClientId": " کلایت ای دی.apps.googleusercontent.com",
      "ClientSecret": "کلاینت سکرت"
    }

6-فایل MainLauout.razor را به صورت زیر تغییر دهید

@using Microsoft.AspNetCore.Components.Authorization
@using System.Security.Claims
@inherits LayoutComponentBase

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <AuthorizeView>
                <Authorized>
                    @if (HasProfilePicture)
                    {
                        <img src="@ProfilePictureUrl"
                             alt="Profile"
                             class="rounded-circle me-2"
                             style="width: 38px; height: 38px; object-fit: cover; border: 2px solid #fff; cursor: pointer;" />

                    }
                    else
                    {
                        <div class="rounded-circle bg-light d-inline-flex align-items-center justify-content-center me-2"
                             style="width: 38px; height: 38px; border: 2px solid #fff; cursor: pointer;">
                            <i class="bi bi-person-fill text-primary"></i>
                        </div>

                    }

                    <span class=" me-3">Hello, @UserName!</span>
                    <form method="post" action="/logout">
                        <button type="submit" class="btn btn-outline-danger btn-sm">
                            <i class="bi bi-box-arrow-right"></i> Logout
                        </button>
                    </form>
                    <a href="/user-profile" class="btn btn-warning">profile</a>
                </Authorized>
                <NotAuthorized>
                    <a href="/login" class="btn btn-primary btn-sm">
                        <i class="bi bi-google"></i> Sign in with Google
                    </a>
                </NotAuthorized>
            </AuthorizeView>

        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

<div id="blazor-error-ui" data-nosnippet>
    An unhandled error has occurred.
    <a href="." class="reload">Reload</a>
    <span class="dismiss">🗙</span>
</div>
@code {
[CascadingParameter]
    private Task<AuthenticationState>? AuthenticationStateTask { get; set; }

    private string UserName { get; set; } = "User";
    private string ProfilePictureUrl { get; set; } = string.Empty;
    private bool HasProfilePicture => !string.IsNullOrEmpty(ProfilePictureUrl);
    

    protected override async Task OnInitializedAsync()
    {
        await LoadUserInfo();
    }

    private async Task LoadUserInfo()
    {
        if (AuthenticationStateTask != null)
        {
            var authState = await AuthenticationStateTask;
            var user = authState.User;

            if (user.Identity?.IsAuthenticated == true)
            {
                // Try different claim types for profile picture
                ProfilePictureUrl =
                    user.FindFirst("picture")?.Value ??
                    user.FindFirst("image")?.Value ??
                    user.FindFirst("avatar")?.Value ??
                    user.FindFirst("photo")?.Value ??
                    user.FindFirst("profile")?.Value ??
                    string.Empty;

                UserName = user.FindFirst(ClaimTypes.Name)?.Value ??
                          user.FindFirst("name")?.Value ??
                          "User";

                
                StateHasChanged();

                
            }
        }
    }
}

• یک صفحه به نام UserProfile.razor درون پوشه Pages ایجاد کرده و کدهای زیر را درون آن قرار دهید

@page "/user-profile"
@attribute [Microsoft.AspNetCore.Authorization.Authorize]
@using System.Security.Claims
@using Microsoft.AspNetCore.Components.Authorization

<PageTitle>My Profile</PageTitle>

<div class="container mt-4">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1>My Profile</h1>
                <a href="/" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-left"></i> Back to Home
                </a>
            </div>

            <AuthorizeView>
                <Authorized>
                    <div class="card">
                        <div class="card-header bg-primary text-white">
                            <h4 class="mb-0">
                                <i class="bi bi-person-circle me-2"></i>
                                Profile Information
                            </h4>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <!-- Profile Picture Section -->
                                <div class="col-md-4 text-center">
                                    @if (!string.IsNullOrEmpty(ProfilePicture))
                                    {
                                        <img src="@ProfilePicture"
                                             alt="Profile"
                                             class="rounded-circle mb-3 profile-picture-large"
                                             style="width: 150px; height: 150px; object-fit: cover; border: 4px solid #007bff; cursor: pointer;"
                                             onclick="this.style.transform = this.style.transform === 'scale(1.2)' ? 'scale(1)' : 'scale(1.2)';"
                                             title="Click to zoom" />
                                    }
                                    else
                                    {
                                        <div class="rounded-circle bg-secondary d-inline-flex align-items-center justify-content-center mb-3"
                                             style="width: 150px; height: 150px; border: 4px solid #007bff;">
                                            <i class="bi bi-person-fill text-white" style="font-size: 4rem;"></i>
                                        </div>
                                    }
                                    <div>
                                        <button class="btn btn-outline-primary btn-sm mt-2" @onclick="RefreshProfile">
                                            <i class="bi bi-arrow-clockwise"></i> Refresh
                                        </button>
                                    </div>
                                </div>

                                <!-- User Details Section -->
                                <div class="col-md-8">
                                    <div class="row mb-3">
                                        <div class="col-sm-4"><strong>Full Name:</strong></div>
                                        <div class="col-sm-8">@UserName</div>
                                    </div>
                                    <div class="row mb-3">
                                        <div class="col-sm-4"><strong>Email:</strong></div>
                                        <div class="col-sm-8">
                                            <a href="mailto:@UserEmail" class="text-decoration-none">@UserEmail</a>
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <div class="col-sm-4"><strong>Authentication:</strong></div>
                                        <div class="col-sm-8">
                                            <span class="badge bg-success">Google</span>
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <div class="col-sm-4"><strong>Account Created:</strong></div>
                                        <div class="col-sm-8">@AccountCreated.ToString("MMMM dd, yyyy")</div>
                                    </div>
                                    <div class="row mb-3">
                                        <div class="col-sm-4"><strong>Last Login:</strong></div>
                                        <div class="col-sm-8">@LastLogin.ToString("MMMM dd, yyyy 'at' hh:mm tt")</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Additional Info Card -->
                    <div class="card mt-4">
                        <div class="card-header">
                            <h5 class="mb-0">
                                <i class="bi bi-info-circle me-2"></i>
                                Account Details
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <h6>Authentication Claims</h6>
                                    <div style="max-height: 200px; overflow-y: auto;">
                                        @if (currentUser?.Claims != null)
                                        {
                                            @foreach (var claim in currentUser.Claims.Take(10))
                                            {
                                                <div class="mb-1">
                                                    <small>
                                                        <strong>@claim.Type:</strong>
                                                        <span class="text-muted">@(claim.Value.Length > 50 ? claim.Value.Substring(0, 50) + "..." : claim.Value)</span>
                                                    </small>
                                                </div>
                                            }
                                        }
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <h6>Quick Actions</h6>
                                    <div class="d-grid gap-2">
                                        <form method="post" action="/logout">
                                            <button type="submit"  class="btn btn-outline-danger btn-sm">
                                            <i class="bi bi-box-arrow-right"></i> Logout
                                        </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </Authorized>
            </AuthorizeView>
        </div>
    </div>
</div>

@code {
    private string UserName { get; set; } = string.Empty;
    private string UserEmail { get; set; } = string.Empty;
    private string ProfilePicture { get; set; } = string.Empty;
    private ClaimsPrincipal? currentUser;
    private DateTime AccountCreated { get; set; } = DateTime.Now;
    private DateTime LastLogin { get; set; } = DateTime.Now;

    [CascadingParameter]
    private Task<AuthenticationState>? AuthenticationStateTask { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await LoadUserData();
    }

    private async Task LoadUserData()
    {

        if (AuthenticationStateTask != null)
        {
            var authState = await AuthenticationStateTask;
            currentUser = authState.User;

            if (currentUser?.Identity?.IsAuthenticated == true)
            {
                UserName = currentUser.FindFirst(ClaimTypes.Name)?.Value ??
                          currentUser.FindFirst("name")?.Value ?? "Unknown User";
                UserEmail = currentUser.FindFirst(ClaimTypes.Email)?.Value ?? "No email provided";
                ProfilePicture = currentUser.FindFirst("picture")?.Value ?? string.Empty;

                // Set login timestamps (in a real app, you'd get these from your database)
                LastLogin = DateTime.Now;
            }
        }
    }

    private async Task RefreshProfile()
    {
        await LoadUserData();
        StateHasChanged();
    }

}

پایان