WTM(ASP.NET Core)自定义身份认证系统配置第三方外部登录（github登录）

最新推荐文章于 2024-08-24 09:54:31 发布
最新推荐文章于 2024-08-24 09:54:31 发布
阅读量2.6k 收藏 5
点赞数
分类专栏： WTM随写 文章标签： c# asp.net
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sxy_student/article/details/108034143
版权

         使用WMT框架开发移动应用的过程中遇到了第三方登录的问题，于是我就自己给WTM应用添加了第三方登录。这里以github未例子。我参照了天上木有OvO大神的博客  SPA+.NET Core3.1 GitHub第三方授权登录 使用AspNet.Security.OAuth.GitHub。做了属于WTM框架的第三方登录扩展。

        一、GitHub授权登录前你必须获取client_id,client_secret如何获取和测试GitHub，请参照GitHub 第三方登录这篇博客。

       二、在appsettings.json添加配置信息

"Authentication": {
    "GitHub": {
      "ClientId": "d08c83abe14c9f4e20f8",
      "ClientSecret": "392b888c3926d4dd0cdb212829ec836d1eba41a2",
      "redirectUrlMobile": "http://localhost:8080/#/pages/withAccount/login-result",
      "redirectUrlPC": "https://localhost:5001/Login/LoginResult"
    }
  }

        三、在WTM项目的model层添加用户类WebUser继承自FrameworkUserBase，添加OpenID字段存储，第三方登录返回的openid一类的身份标识信息。并在DataAccess层数据库上下文进行注册。

/// <summary>
    /// 登录用户
    /// </summary>
    [Table("FrameworkUsers")]
    public class WebUser : FrameworkUserBase
    {
        [Display(Name = "部门名称")]
        [Required(ErrorMessage = "{0}是必填项")]
        public Guid UnitWorkID { get; set; }
        [Display(Name = "部门名称")]
        public UnitWork UnitWork { get; set; }
        /// <summary>
        /// 外部登录
        /// </summary>
        [Display(Name = "外部登录")]
        public string OpenID { get; set; }
    }

        四、添加AuthenticationApi控制器，将配置IConfiguration注入到控制器中，用来获取appsettings的配置信息。并添加相应的处理方法

 public class AuthenticationApiController : BaseApiController
 {

        private readonly IConfiguration _configuration;
        public AuthenticationApiController(IConfiguration configuration)
        {
            _configuration = configuration;
        }
 }

        五、添加ExternalLogin处理方法，识别是从手机端还是PCWEB端发起的外部登录请求，并携带client_id到github获取code值。

[HttpGet("~/ExternalLogin")]
        public IActionResult ExternalLogin(string provider, string terminal)
        {
            HttpContext.Session.SetString("terminal", terminal);
            switch (provider)
            {
                case ("github"):
                    return Redirect("https://github.com/login/oauth/authorize?client_id=d08c83abe14c9f4e20f8");
                default:
                    break;
            }
            return Content("参数错误");

        }

        六、添加SignIn方法，从github上获取access_token，并返回给SPA或者PCWEB的回调页面进行处理。

[HttpGet("~/signin-github")]
        public IActionResult SignIn(string code)
        {
            string terminal = HttpContext.Session.GetString("terminal");
            string redirectUrl = "";
            if (terminal == "mobile")
            {
                redirectUrl = _configuration["Authentication:GitHub:redirectUrlMobile"];
            }
            else
            {
                redirectUrl = _configuration["Authentication:GitHub:redirectUrlPC"];
            }
            string clientId = _configuration["Authentication:GitHub:ClientId"];
            string clientSecret = _configuration["Authentication:GitHub:ClientSecret"];
            //利用coede获取access_token
            string url = $"https://github.com/login/oauth/access_token?client_id={clientId}&client_secret={clientSecret}&code={code}";
            string re = HttpHelper.SendHttp("post", url);
            string[] reArr = re.Split("&");
            return Redirect(redirectUrl + "?acc=" + reArr[0]);
        }

        七、添加AutoLogin处理方法，根据前端回调页面发给后台的openid在WebUser 中扩展的openid字段中进行检索，如果没有则返回空值，让前端页面调到登录页进行注册。如果有则给SPA应用下发JWT Token，WTM MVC调用框架生成的DoLogin进行登录操作。

 

 [HttpPost]
        public async Task<IActionResult> AutoLogin(string openid)
        {
            var user = await DC.Set<WebUser>().AsNoTracking().SingleOrDefaultAsync(x => x.OpenID.Contains(openid));
            if (user == null)
            {
                var temp = new
                {
                    access_token = "no",
                    openid = openid
                };
                return Content(JsonConvert.SerializeObject(temp), "application/json");
            }
            LoginVM vm = CreateVM<LoginVM>();
            vm.ITCode = user.ITCode;
            vm.Password = user.Password;
            var userwtm = vm.DoLogin();
            LoginUserInfo = userwtm;
            string terminal = HttpContext.Session.GetString("terminal");
            if (terminal == "mobile")
            {
                var authService = HttpContext.RequestServices.GetService(typeof(ITokenService)) as ITokenService;
                var token = await authService.IssueTokenAsync(LoginUserInfo);
                return Content(JsonConvert.SerializeObject(token), "application/json");
            }
            else
            {
                AuthenticationProperties properties = null;
                properties = new AuthenticationProperties
                {
                    IsPersistent = true,
                    ExpiresUtc = DateTimeOffset.UtcNow.Add(TimeSpan.FromDays(30))
                };
                var principal = LoginUserInfo.CreatePrincipal();
                await HttpContext.SignInAsync(CookieAuthenticationDefaults.AuthenticationScheme, principal, properties);
                return Redirect("/Home/");
            }
        }

        控制器业务逻辑就完成了，接下来，咱们分为别WTM MVC和SPA应用添加登录逻辑。

        八、WTM MVC登录

        1.1、在login视图中添加登录按钮  

<li>
              <div class="layui-row layui-col-space10" style="text-align:center">
                  <div class="layui-col-md4">
                    
                      <img src="~/images/WX.jpg" class="layui-nav-img">
                  </div>
                  <div class="layui-col-md4">
                      <img src="~/images/QQ.jpg" class="layui-nav-img">
                  </div>
                  <div class="layui-col-md4">
                      <img src="~/images/GITHUB.jpg" class="layui-nav-img" onclick="githublogin()">
                  </div>
              </div>
          </li>

       

         添加登录js方法

 function githublogin() {
          var url = window.location.href;
          var urlBase = url.replace('Login/Login', "");
          window.location.href = urlBase + 'ExternalLogin?provider=github&terminal=PC';
      }

          1.2、WTM MVC在login控制器中添加LoginResult方法，返回视图，作为WTM MVC的回调页面。


        [Public]
        public IActionResult LoginResult(string acc)
        {
            ViewBag.acc = acc;
            return View();
        }

@{
    Layout = null;
}

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/jquery.min.js"></script>
    <script src="/jquery.cookie.js"></script>
    <script src="/layui/layui.js"></script>
    <script src="/_js/framework_layui.js?time=@DateTime.Now.Ticks"></script>
    <link rel="stylesheet" href="~/sitecss/logincss.css">
    <title>WTM</title>
    <script type="text/javascript">
        $(document).ready(function () {
        //利用access_token获取openid，如果成功则调用后台AutoLogin方法，完成登录。
        $.ajax({
            url: 'https://api.github.com/user?' + '@ViewBag.acc',
            success: function (res) {
                var openid = res.login;
                autoLogin(openid);
            },
            error: function (xhr) {
                myFunction();
            },

        })
        });
        //发生错误弹出窗口
        function myFunction() {
            if (confirm("网络错误，稍后重试")) {
                window.location.href = "/Login/Login"
            } else {
                window.location.href = "/Login/Login"
            }
        }
        //调用后台AutoLogin
        function autoLogin(id) {
            $.ajax({
            url: '/api/AuthenticationApi/AutoLogin?openid='+id,
            type: 'post',
                success: function (res) {
                    console.log(res)

                if (res.access_token == 'no') {
                    window.location.href = '/Login/Reg';
                } else {
                    window.location.href = "/"
                }
            },
            error: function (xhr) {
                myFunction();
            },

        })
        };
    layui.use('layer');
    </script>
</head>

<body class="loginBody">
    <div class="loginDiv">
        <h4>
            登录中...
        </h4>

    </div>


</body>

</html>

       WTM MVC端完成设置。接下来我们继续这只SAP应用端。

       九、SAP应用端设置    

       1.1、在login.vue页面添加GitHubLogin方法，添加到你需要@click的按钮和图片上面

GitHubLogin(){
	const urlBase = this.Common.urlBase;
    //window.location.href = 'https://github.com/login/oauth/authorize?client_id=d08c83abe14c9f4e20f8';
	window.location.href = urlBase + "ExternalLogin?provider=github&terminal=mobile";
			}

       1.2、添加login-result页面，地址要和在appsettings.json文件中能对应上的地址。其中在onLoad中接收，后台返回的access_token，并在github请求openid发到后台autoLogin，并接收JWT Token。

<template>
	<view>
		<scroll-view scroll-y class="page">
			<view style="margin-top: 200px;">
				<view class="image-content" style="text-align: center; width: 100%;">
					<image style="width: 200px; height: 200px; background-color: #eeeeee;margin-top:100;" src="../../static/刷新.png"></image>
				</view>
				<view class="solids-bottom  flex align-center">
					<view class="flex-sub text-center">
						<view class="solid-bottom text-xl padding">
							<text class="text-black text-bold">登录中......</text>
						</view>

					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
			}
		},
		onLoad(op) {
			console.log(op);
			const acc = op.acc;
			var that = this;

			uni.request({
				url: 'https://api.github.com/user?' + acc,
				success: (res) => {
					console.log(res.data);
					if (res.statusCode === 200) {
						let openid = res.data.login;
						that.autoLogin(openid);
					} else {
						uni.showModal({
							title: '提示',
							content: '网络问题，稍后重试',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '../withAccount/Login'
									});
								}
							}
						});
					}
				},
				fail() {

					uni.showModal({
						title: '提示',
						content: '网络问题，稍后重试',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '../withAccount/Login'
								});
							}
						}
					});
				}
			});
		},
		methods: {
			registered() {
				uni.navigateTo({
					url: '../withAccount/registered'
				})
			},
			autoLogin(id) {
				var that = this;
				console.log(id)
				const urlBase = this.Common.urlBase;
				uni.request({
					url: urlBase + "api/AuthenticationApi/AutoLogin?openid=" + id,
					method: "POST",
					success: (res) => {

						console.log(res.data);
						if (res.statusCode === 200) {
							let access_token = res.data.access_token;
							if (access_token === 'no') {
								that.registered();
							} else {
								uni.setStorageSync('access_token', res.data.access_token);
								uni.setStorageSync('refresh_token', res.data.refresh_token);
								uni.showToast({
									title: '登录成功',
									duration: 2000,
									icon: 'none',
									success() {
										uni.navigateTo({
											url: '../withAccount/testlist'
										});
									}
								});
							}
						} else {
							uni.showToast({
								title: '登录失败',
								duration: 2000,
								icon: 'none',
								success() {
									uni.navigateTo({
										url: '../withAccount/Login'
									});
								}
							});
						}
					}
				});
			}
		}
	}
</script>
<style>

</style>

       就此，完成了github扩展登录。值得一提的是，WTM里很有很多好东西是文档里没写的，例如咱们这里用的JWT令牌生成。

var authService = HttpContext.RequestServices.GetService(typeof(ITokenService)) as ITokenService;
var token = await authService.IssueTokenAsync(LoginUserInfo);

       只需要简单的2行代码就可以了。这些东西在官方源码中都可以找到。我们要养成多看代码的习惯。对于提升自我很有帮助。

矿工学编程
关注
专栏目录
Asp.Net Kestrel自定义IP和端口， WTM框架自定义IP和端口
yottayuan的博客
05-20 719
Kestrel默认使用5000端口，有两种方法可以进行自定义： 方法1（推荐）： 在appsettings.json中增加： "Kestrel": { "Endpoints": { "Http": { "Url": "http://localhost:7778" } } }, 方法2： 更改代码 public static IHostBuilder CreateHostBuilder(string[] args) => ...
WTM（ASP.NET Core）框架自定义用户管理和注册
sxy_student的博客
03-02 4027
背景：WTM框架自带了用户管理，但是很多人使用框架需要配置很多的字段满足用户管理。 一、添加自定义用户类，继承自FrameworkUserBase。同时制定表名为FrameworkUsers。并在数据库上下文中注册。 1、XXX.Models项目中添加自定义用户类 注意：如果不指定表名，自动以的表中的用户无法正常登录。 [Table("FrameworkUsers")] pu...
AspNet.Security.OAuth.Providers:用于ASP.NET Core的OAuth 2.0社交身份验证提供程序
04-27
AspNet.Security.OAuth.Providers AspNet.Security.OAuth.Providers是安全中间件的集合，您可以在ASP.NET Core应用程序中使用它来支持 ， 或类的社交身份验证提供程序。 它直接受到的倡议。 最新的正式版本可以在上找到，每晚版本可以在上。 入门 将社交身份验证添加到您的应用程序很容易，并且在Startup类中只需要几行： public void ConfigureServices ( IServiceCollection services ) { services . AddAuthentication ( options => { /* Authentication options */ }) . AddGitHub ( options => {
AspNet.Security.OAuth.Providers 开源项目教程
gitblog_00840的博客
08-23 414
AspNet.Security.OAuth.Providers 开源项目教程 AspNet.Security.OAuth.ProvidersOAuth 2.0 social authentication providers for ASP.NET Core项目地址:https://gitcode.com/gh_mirrors/as/AspNet.Security.OAuth.Providers ...
Owin+ASP.NET Identity浅析系列（五）接入第三方登录
weixin_30515513的博客
12-06 182
在今天，读书有时是件“麻烦”事。它需要你付出时间，付出精力，还要付出一份心境。--仅以《Owin+ASP.NET Identity浅析系列》来祭奠那逝去的…… OK，用户角色实现后，我们回头再来看看登录，说到登录必然会牵涉到第三方账号登录，那么如何快速实现第三方账号登录呢？打开我们的Startup.Auth.cs文件（Identity的核心配置文件），我们发现文件最下面被注释的地方，微...
【WTM-多租户改造】
weixin_43837534的博客
01-21 1278
WTM-多租户改造
WTM重大更新，多租户和单点登录
dotNET跨平台
06-29 781
WTM重大更新多租户单点登录随着WTM被越来越多地应用于企业，用户对于多租户和单点登录的需求越来越强烈。经过了几个月的努力，我们把WTM底层代码又进行了一次优化和重构，加入了多租户和单点登录的功能。VUE，Blazor，LayUI都已支持。多租户WTM的多租户具有以下特点同时支持独立数据库和共享数据库模式支持混合模式，自由度更高只需要在模型上简单实现ITenant接口，框...
.net core api+layui基础框架系统
03-24
“CoreApi.zip”则包含.NET Core API项目的所有源代码，解压后，我们可以看到项目结构、控制器、模型、配置文件等，这些都是理解整个系统工作流程的关键。 总的来说，.NET Core API + Layui基础框架系统结合了强大...
wtm框架第三方登录
09-15
在WTM框架中，你可以使用OAuth2.0协议来实现第三方登录，常见的第三方登录包括微信、QQ、微博等。通过集成第三方登录，用户可以使用他们在第三方平台上的账号进行登录和授权操作，从而减少用户的注册和登录步骤，...
Centos8（liunx）使用宝塔部署WTM .NET 5 + Vue前端教程
qq_35562351的博客
11-23 1468
一、前言 声明：此教程主要参考了以下两篇文章，如有侵权，请联系我删除： https://blog.csdn.net/sxy_student/article/details/113486234 https://stackoverflow.com/questions/66725062/asp-net-core-and-spa-vue-the-spa-default-page-middleware-could-not-return-the 本人菜鸟一个，最近想借助WTM框架学习一下.Net5和Vue，正好手头
ASP.NET MVC5实现文件上传与地址变化处理（5）
01-02
一.上传文件和重复文件处理 文件处理的原则是：不在数据库中保存文件，只在数据库中保存文件信息（Hash值等）。采取文件的MD5重命名文件在一般情况足够处理文件的重复问题，强迫症倾向则可以考虑将MD5和其他摘要算法...
实现浏览页面时校验用户是否已经完成登录的功能
笼中鸟
07-04 1310
实现浏览页面时校验用户是否已经完成登录的功能
WTM 3.1发布，完美支持.netcore 3.1
WTM
01-31 1208
在过去的2019年，承蒙各位的厚爱，WTM从零开始一年的时间在GitHub上收获了将近1600星，nuget上的下载量累计超过10万。 WTM所坚持的低码开发，快速实现的理念受到了越来越多.netcore使用者的喜爱。 在2020年，我们将继续迭代，推陈出新，为.netcore的开源生态做出更大的贡献。 2020新年目标 1.我们已经在新年伊始发布了WTM 3.1版本，完美支持.netcore 3...
00-创建WTM项目
低码开发
05-09 679
进入WTM官网： WTM -- Rapid development framework based on dotnet core 进入项目创建向导： mysql字符串： server=localhost;database=library;user=user;password=password 项目结构如下： 使用vs2022打开： 直接运行项目： 等待编译和前端依赖下载完成即可。 注意：需要在本机安装nodejs环境。 主页...
探索社交认证新境界：AspNet.Security.OAuth.Providers项目详解
最新发布
gitblog_00141的博客
08-24 731
探索社交认证新境界：AspNet.Security.OAuth.Providers项目详解 AspNet.Security.OAuth.ProvidersOAuth 2.0 social authentication providers for ASP.NET Core项目地址:https://gitcode.com/gh_mirrors/as/AspNet.Security.OAuth.Pro...
10-wtm数据权限
低码开发
05-21 360
dataprivileges： GUID主键， 用户编码， 用户组编码， 表名， 关联ID， Domain 页面： 添加用户组数据权限： 用户权限，与用户组权限类似，不做介绍。
ASP.NET Core 第三方登入大成功。
weixin_34294649的博客
03-15 694
1.1.1 参见代码 https://github.com/aspnet/Sec... 吐槽一下为什么要用 Bower 管理包而不是 NPM…
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值