三方应用集成_BeetleX.WebFamily集成Github第三方登陆

最新推荐文章于 2024-06-17 20:38:27 发布

weixin_39783771

最新推荐文章于 2024-06-17 20:38:27 发布

阅读量98

点赞数

文章标签：三方应用集成

本文链接：https://blog.csdn.net/weixin_39783771/article/details/112619463

版权

在编写Web应用服务的时候经常需要集成第三方登陆，通过第三方登陆可以让用户节省注册的麻烦工作。接下来介绍要一下如何在BeetleX.WebFamily集成Github第三方登陆.

准备工作

在使用Github第三方登陆前，需要在Github中开通这个应用；在个人设置中的开发者设置里可以开启该项服务功能.

然后在OAuth Apps中添加一个OAuth服务

创建服务后需要获取Client ID和Client secrets信息用于第三方登陆认证信息作为凭证。接下来配置OAuth回调路径，为了方便调试可以把回调路径设置成本地服务

功能接口

为了更方便调用Github的OAuth接口数据，进行了以下接口功能封装。在这个定义过程需要引用BeetleX.Http.Clients组件，该组件可以通过定义接口的方式来访问http/https服务。

    [FormUrlFormater]    [Host("https://github.com")]    public interface IGithubAuth    {        [Get(Route = "login/oauth/access_token")]        Task<string> GetToken(string client_id, string client_secret, string code);        [Host("https://api.github.com")]        [Header("User-Agent", "beetlex.io")]        [Get(Route = "user")]        Task<string> GetUser(string access_token);    }    public class GithubUserInfo    {        public string login { get; set; }        public string id { get; set; }        public string avatar_url { get; set; }        public string email { get; set; }    }

以上定义了GetToken和GetUser两个接口的方法和对应的用户信息，为了到时候方便地使用还定义相关操作的GithubAuth类

    public class GithubAuth    {        static GithubAuth()        {            githubAuth = HttpApiClient.Create(20000);        }        private static IGithubAuth githubAuth;        public string ClientID { get; set; }        public string ClientSecret { get; set; }        private Dictionary<string, string> GetNameValues(string value)        {            Dictionary<string, string> result = new Dictionary<string, string>(StringComparer.OrdinalIgnoreCase);            foreach (var item in value.Split('&'))            {                var values = item.Split('=');                if (values.Length > 1)                {                    result[values[0]] = values[1];                }            }            return result;        }        public async Task<string> GetToken(string code)        {            var data = await githubAuth.GetToken(ClientID, ClientSecret, code);            var result = GetNameValues(data);            return result["access_token"];        }        public async TaskGetUserInfo(string token)        {            var data = await githubAuth.GetUser(token);            return Newtonsoft.Json.JsonConvert.DeserializeObject(data);        }    }

控制器定义

验证成功后Github会回调地址来告诉服务接下来要做的工作，相关服务可以根据回调的信息通过上面定义的接口来获取相关用户信息；具体定义如下:

    [Controller]    public class Home    {        public async Task<object> Github(string code, IHttpContext context)        {            var githubAuth = new GithubAuth            {                ClientID = "****************",                ClientSecret = "***********"            };            var token = await githubAuth.GetToken(code);            var githubUser = await githubAuth.GetUserInfo(token);            if (githubUser != null)            {                return githubUser;            }            return "无法获取Github信息";        }    }

在这个方法中需要通过code获取操作的Token，然后再通过Token获取相关用户信息。

前端配置

其实Web前端并没有太多工作需要，只需要配置相关ClientID的连接跳转到Github即可。

    <div id="app">        <el-form :inline="true" class="demo-form-inline" style="width:500px;margin:auto;">            <el-form-item label="Client ID">                <el-input v-model="ClientID" placeholder="Client ID">el-input>                   el-form-item>            <el-form-item>                <a v-if="ClientID" class="Header-link"                 :href="['https://github.com/login/oauth/authorize?client_id='+ClientID+'&scope=user']" data-hotkey="g d" aria-label="Homepage " data-ga-click="Header, go to dashboard, icon:logo">                    <svg class="octicon octicon-mark-github v-align-middle" height="32" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z">path>svg>                a>            el-form-item>        el-form>    div>    <script>        var page = new Vue({            el: '#app',            data: {                ClientID: '',            }        });script>

集成测试

以上工作都完成后就可以测试一下集成后的效果