Blazor Wasm Google 登录

OpenID 与 OAuth2 基础知识
Blazor wasm Google 登录
Blazor wasm Gitee 码云登录
Blazor SSR/WASM IDS/OIDC 单点登录授权实例1-建立和配置IDS身份验证服务
Blazor SSR/WASM IDS/OIDC 单点登录授权实例2-登录信息组件wasm
Blazor SSR/WASM IDS/OIDC 单点登录授权实例3-服务端管理组件
Blazor SSR/WASM IDS/OIDC 单点登录授权实例4 - 部署服务端/独立WASM端授权
Blazor SSR/WASM IDS/OIDC 单点登录授权实例5 - Blazor hybird app 端授权
Blazor SSR/WASM IDS/OIDC 单点登录授权实例5 - Winform 端授权

源码

b21_OAuth_Gitee

1. 以下11个步骤为基础步骤,之后文章不再赘述

2. 创建Blazor wasm工程

身份验证不用选择, 创建工程完成.

3. 添加包

右键点工程, 管理Nuget程序包, 搜索 Microsoft.AspNetCore.Components.WebAssembly.Authentication 安装

4. 将身份验证服务脚本引用添加到index.html 文件，该文件处理OIDC 协议的低级详细信息

编辑 wwwroot\index.html 文件, 在 <script src="_framework/blazor.webassembly.js"></script> 上一句加入这行代码

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

5. 导入命名空间

_Imports.razor

@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Authorization

6. 登录页面代码

Pages\Home.razor

@page "/"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@inject NavigationManager Navigation
@inject IAccessTokenProvider TokenProvider

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

<AuthorizeView>
    <Authorized>
        Hello, @context.User.Identity?.Name!
        <button class="btn btn-link" @onclick="BeginLogOut">注销</button>
    </Authorized>
    <NotAuthorized>
        <button class="btn btn-link" @onclick="Login">登录</button>
    </NotAuthorized>
</AuthorizeView>

<p>@output</p>
<button @onclick="DisplayToken">Display Access Token </button>

@code{

    private void Login()
    {
        Navigation.NavigateToLogout("authentication/login");
    }

    private void BeginLogOut()
    {
        Navigation.NavigateToLogout("authentication/logout");
    }

    private string? output;

    private async Task DisplayToken()
    {
        var tokenResult = await TokenProvider.RequestAccessToken();

        if (tokenResult.TryGetToken(out var token))
        {
            output = token.Value;

        }
        else
        {
            output = "No token";
        }
    }

}

7. 跳转登录组件

Layout 下新建 RedirectToLogin.razor

@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@inject NavigationManager Navigation

@code {
    protected override void OnInitialized()
    {
        Navigation.NavigateToLogin("authentication/login");
    }
}

8. 跳转登录组件

Layout 下新建 RedirectToLogin.razor

9. 登录组件

Pages 下新建 Authentication.razor

@page "/authentication/{action}"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
<RemoteAuthenticatorView Action="@Action" />

@code{
    [Parameter] public string? Action { get; set; }
}

10. 添加CascadingAuthenticationState和AuthorizeRouteView，仅在用户授权的情况下才显示匹配指定路由的页面。否则，它会重定向到登录页面

App.razor 文件

原始文件

最终文件

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <NotAuthorized>
                    @if (context.User.Identity?.IsAuthenticated != true)
                    {
                        <RedirectToLogin />
                    }
                    else
                    {
                        <p role="alert">You are not authorized to access this resource.</p>
                    }
                </NotAuthorized>
            </AuthorizeRouteView>
            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
        </Found>
        <NotFound>
            <PageTitle>Not found</PageTitle>
            <LayoutView Layout="@typeof(MainLayout)">
                <p role="alert">Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

11. 修改调试地址

由于我们码云后台回调地址填写的是 https://localhost:5001/authentication/login-callback

所以 Properties\launchSettings.json 也修改为同样端口

https配置的applicationUrl改为

"applicationUrl": "https://localhost:5001;http://localhost:5004",

12. 创建 Google 应用

打开Google账号 API和服务页面 https://console.cloud.google.com/apis/dashboard

点击创建凭据

OAuth 2.0 客户端 ID

已获授权的重定向 URI 填写等下用到的本机测试地址 https://localhost:5001/authentication/login-callback

复制 客户端 ID 备用, 例如我的是 10599-**.apps.googleusercontent.com , 下一步需要填写.

13. 加入配置

编辑 Program.cs 文件在最后一句 await builder.Build().RunAsync(); 之前加入以下代码

builder.Services.AddOidcAuthentication(options =>
{
    options.ProviderOptions.Authority = "https://accounts.google.com/";
    options.ProviderOptions.ClientId = "10****599-******.apps.googleusercontent.com";
    options.ProviderOptions.ResponseType = "id_token token";
    options.ProviderOptions.RedirectUri = "https://localhost:5001/authentication/login-callback";
    options.UserOptions.AuthenticationType = "google";
});