Blazor Wasm Gitee 码云登录

荼涂發表於 2024-1-12 09:25:00

<p>目录:</p>
<ol>
<li>OpenID 与 OAuth2 基础知识</li>
<li>Blazor wasm Google 登录</li>
<li>Blazor wasm Gitee 码云登录</li>
<li>Blazor SSR/WASM IDS/OIDC 单点登录授权实例1-建立和配置IDS身份验证服务</li>
<li>Blazor SSR/WASM IDS/OIDC 单点登录授权实例2-登录信息组件wasm</li>
<li>Blazor SSR/WASM IDS/OIDC 单点登录授权实例3-服务端管理组件</li>
<li>Blazor SSR/WASM IDS/OIDC 单点登录授权实例4 - 部署服务端/独立WASM端授权</li>
<li>Blazor SSR/WASM IDS/OIDC 单点登录授权实例5 - Blazor hybird app 端授权</li>
<li>Blazor SSR/WASM IDS/OIDC 单点登录授权实例5 - Winform 端授权</li>
</ol>
<h3 id="源码">源码</h3>
<p>b21_OAuth_Gitee</p>
<h3 id="写在前面">写在前面</h3>
<p>gitee 没有提供 OIDC，只能用 OAuth2, 所以这篇文章其实是半成品. 看看以后有时间再实现补充完整.</p>
<h3 id="1-参考基础贴建立wasm工程">1. 参考基础贴建立WASM工程</h3>
<p>https://www.cnblogs.com/densen2014/p/17959857</p>
<h3 id="2-创建码云应用">2. 创建码云应用</h3>
<p>登录码云, 点击<strong>头像</strong>,点<strong>账号设置</strong>, 然后点<strong>数据管理</strong>下的<strong>第三方应用</strong></p>
<p>直达链接为 https://gitee.com/oauth/applications</p>
<p><img src="https://img2024.cnblogs.com/blog/1980213/202401/1980213-20240112033127290-1150052317.png"></p>
<p><strong>点击创建应用</strong></p>
<p>应用回调地址填写等下用到的本机测试地址 https://localhost:5001/authentication/login-callback</p>
<p>权限用默认 user_info</p>
<p><img src="https://img2024.cnblogs.com/blog/1980213/202401/1980213-20240112033432650-347129604.png"></p>
<p>复制 <code>Client ID</code>, <code>Client Secret</code> 备用</p>
<h3 id="3-添加码云登录组件">3. 添加码云登录组件</h3>
<p></p>
<pre><code>@page "/authenticationgitte/{action}"
@page "/authenticationgitte/{action}/{token}"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication

<p>@output</p>

@if (Token != null)
{
<p>Token:</p> <p>@Token</p>
}

@code{

public string? Action { get; set; }
public string? Token { get; set; }

public IAccessTokenProvider? TokenProvider { get; set; }
public NavigationManager? Navigation { get; set; }
public HttpClient? HttpClient { get; set; }
public IConfiguration? Config { get; set; }
public AuthenticationStateProvider? AuthenticationStateProvider { get; set; }

private string? output;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
   if (firstRender)
   {
         //var ClientId = (string)Config["gitte:ClientId"];
         //var ClientSecret = (string)Config["gitte:ClientSecret"];
         //var RedirectUri = (string)Config["gitte:RedirectUri"];

         var ClientId = "e5cb4a812a87aac306ec91d45d8a9c42e04a699c7dd6788fdf12a55d800c751d";
         var ClientSecret = "e1489dcd5c8d2ceed06b81afb8702548b84a8fa64d36c117af3c711a60800aae";
         var RedirectUri = $"https://localhost:5001/authenticationgitte/login-callback";

         var Authority = $"https://gitee.com/oauth/authorize?client_id={ClientId}&redirect_uri={RedirectUri}&response_type=code";
         var GetToken = $"https://gitee.com/oauth/token?grant_type=authorization_code&client_id={ClientId}&redirect_uri={RedirectUri}&client_secret={ClientSecret}&code=";
         var GetUserInfo = $"https://gitee.com/api/v5/user?access_token=";
         if (Action == "login")
         {

            Navigation!.NavigateTo(Authority);

         }
         else if (Action == "login-callback")
         {
            // 获取Uri对象
            var uri = Navigation!.ToAbsoluteUri(Navigation.Uri);
            // HttpUtility 获取参数值
            var code = System.Web.HttpUtility.ParseQueryString(uri.Query).Get("code");
            var url = $"{GetToken}{code}";
            var result = await HttpClient!.PostAsync(url, null);
            var token = await result.Content.ReadFromJsonAsync<GitteRespone>();
            if (token?.access_token != null)
            {
               url = $"{GetUserInfo}{token.access_token}";
               var user = await HttpClient!.GetFromJsonAsync<GitteUserRespone>(url);
               if (user != null)
               {
                     output = $"Hello, {user.name}!";
                     Navigation!.NavigateTo($"/authenticationgitte/login-complete/{token?.access_token}");
               }
            }
         }
         else if (Action == "login-complete")
         {
         }

   }
}

private class GitteRespone
{
   public string? access_token { get; set; }
   public string? token_type { get; set; }
   public int expires_in { get; set; }
   public string? refresh_token { get; set; }
   public string? scope { get; set; }
   public int created_at { get; set; }
}

private class GitteUserRespone
{
   public int id { get; set; }
   public string? login { get; set; }
   public string? name { get; set; }
   public string? avatar_url { get; set; }
   public string? url { get; set; }
   public string? html_url { get; set; }
   public string? remark { get; set; }
   public string? followers_url { get; set; }
   public string? following_url { get; set; }
   public string? gists_url { get; set; }
   public string? starred_url { get; set; }
   public string? subscriptions_url { get; set; }
   public string? organizations_url { get; set; }
   public string? repos_url { get; set; }
   public string? events_url { get; set; }
   public string? received_events_url { get; set; }
   public string? type { get; set; }
   public string? blog { get; set; }
   public string? weibo { get; set; }
   public string? bio { get; set; }
   public int public_repos { get; set; }
   public int public_gists { get; set; }
   public int followers { get; set; }
   public int following { get; set; }
   public int stared { get; set; }
   public int watched { get; set; }
   public DateTime created_at { get; set; }
   public DateTime updated_at { get; set; }
   public string? email { get; set; }
}

}
</code></pre>
<h3 id="4-添加登录按钮">4. 添加登录按钮</h3>
<p></p>
<pre><code><button class="btn btn-link" @onclick="LoginGitte">码云登录</button>

@code{
private void LoginGitte()
{
   Navigation.NavigateTo("authenticationgitte/login");
}
}
</code></pre>
<h3 id="5-运行工程">5. 运行工程</h3>
<p><img src="https://img2024.cnblogs.com/blog/1980213/202401/1980213-20240112092416592-781618336.png"></p>
<p><img src="https://img2024.cnblogs.com/blog/1980213/202401/1980213-20240112092445603-649322037.png"></p>

</div>
<div id="MySignature" role="contentinfo">
<h4 id="关联项目">关联项目</h4>
<p><font color="blue">FreeSql QQ群：4336577</font></p>
<p><font color="blue">BA & Blazor QQ群：795206915</font></p>
<p><font color="blue">Maui Blazor 中文社区 QQ群：645660665</font></p>
<h4 id="知识共享许可协议">知识共享许可协议</h4>
<p>本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。欢迎转载、使用、重新发布，但务必保留文章署名AlexChow（包含链接： https://github.com/densen2014 ），不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。如有任何疑问，请与我联系。</p>
<h4 id="转载声明">转载声明</h4>
<p>本文来自博客园，作者：周创琳 AlexChow，转载请注明原文链接：https://www.cnblogs.com/densen2014/p/17959844</p>
<h4 id="alexchow">AlexChow</h4>
<p>今日头条 | 博客园 | 知乎 | Gitee | GitHub</p>

<p><img src="https://img2023.cnblogs.com/blog/1980213/202302/1980213-20230201233143321-1727894703.png" alt="image" loading="lazy"></p><br><br>
来源：https://www.cnblogs.com/densen2014/p/17959844

頁: [1]

琼殿技术论坛's Archiver

Blazor Wasm Gitee 码云登录