网站接入qq登录

网站接入qq登录可以省去注册账号，增加网站的体验度。那么要实现我自己搭建的站点天天博客的qq单点登录需要以下几个步骤：
1，申请appid和appkey
 首先要去https://connect.qq.com/去申请一个网站的qq接入，申请成功时会给一个appid和appkey，前提是要有一个站点。
  
2，qq登录跳转
申请成功后，开始进行qq登录开发，根据官方文档，需要在放置一个qq登录的图标，然后点击这个图标跳转qq认证登录页。
如下图：
 
点击登录之后会跳转到相应的页面如下：要确保你的回调页面和申请里面写的一样并且要将url进行URLEncode

当qq登录成功后悔跳转到回调页面，并且会在url里面带上上Authorization Code的值。

3，获取AccessToken
通过Authorization Code获取Access Token，我选择通过后端代码调用，因为前段会出现跨域问题，以下是我的封装的方法

 /// <summary>  /// 获取AccessToken  /// </summary>  /// <param name="authorizationCode"></param>  /// <returns></returns>  public static async Task<string> GetAccessToken(string authorizationCode)  {   if (string.IsNullOrEmpty(authorizationCode))    throw new AuthException("qq认证登录失败：authorizationCode为空");   string url = string.Format("https://graph.qq.com/oauth2.0/token?" +     "grant_type=authorization_code&client_id={0}&client_secret={1}&code={2}&redirect_uri={3}&fmt=json", appId, appKey, authorizationCode, redirectUrl);   HttpClient httpClient = new HttpClient();   string response = await httpClient.GetStringAsync(url);   dynamic result = JsonHelper.DeserializeObject(response);   string error = result.error;   if (!string.IsNullOrEmpty(error))    throw new AuthException("qq认证登录失败：" + result.error_description);   return result.access_token;  }

　　

4，获取openid
通过token获取openid，其中openid就想当与一个qq号码，唯一的：

 /// <summary>  /// 获取OpenId  /// </summary>  /// <param name="authorizationCode"></param>  /// <returns></returns>  public static async Task<string> GetOpenId(string accessToken)  {   if (string.IsNullOrEmpty(accessToken))    throw new AuthException("qq认证登录失败：accessToken无效");   string url = "https://graph.qq.com/oauth2.0/me?fmt=json&access_token=" + accessToken;   HttpClient httpClient = new HttpClient();   string response = await httpClient.GetStringAsync(url);   dynamic result = JsonHelper.DeserializeObject(response);   string error = result.error;   if (!string.IsNullOrEmpty(error))    throw new AuthException("qq认证登录失败："+result.error_description);   return result.openid;  }

　　

5，通过token和openid获取qq信息：

 /// <summary>  /// 获取qq信息  /// </summary>  /// <param name="authorizationCode"></param>  /// <returns></returns>  public static async Task<UserModel> GetQQUser(string accessToken,string openId)  {   if (string.IsNullOrEmpty(accessToken))    throw new AuthException("accessToken无效");   if (string.IsNullOrEmpty(openId))    throw new AuthException("openId");   string url = string.Format("https://graph.qq.com/user/get_user_info" +     "?access_token={0}&openid={1}&appid={2}&fmt=json", accessToken, openId, appId);   HttpClient httpClient = new HttpClient();   string response = await httpClient.GetStringAsync(url);   dynamic result = JsonHelper.DeserializeObject(response);   if (result.ret != 0)    throw new AuthException("qq认证登录失败：" + result.msg);   UserModel userModel = new UserModel();   userModel.Account = openId;   userModel.Username = result.nickname;   userModel.LoginType = Blog.Domain.Core.LoginType.QQ;   userModel.Sex = result.gender;   userModel.HeadPhoto = result.figureurl_qq_2;   return userModel;  }

　　

6，处理qq信息
到此，qq账号的信息以及获取完成了，接下来就是根据自己的业务来处理qq账号信息了，我选择将qq信息存入user表，后端将qq信息转为对应的user，放入jwt里面生成token:

 [Route("login/{code}")]  [HttpGet]  public async Task<ApiResult> Login(string code)  {   string accessToken =await QQClient.GetAccessToken(code);   string openId = await QQClient.GetOpenId(accessToken);   UserModel userModel = await QQClient.GetQQUser(accessToken, openId);   _userService.Insert(userModel);   IList<Claim> claims = new List<Claim>()    {     new Claim("account", userModel.Account),     new Claim("username", userModel.Username),     new Claim("sex", userModel.Sex),     new Claim("birthDate",string.IsNullOrEmpty(userModel.BirthDate)?"":userModel.BirthDate),     new Claim("email", string.IsNullOrEmpty(userModel.Email)?"":userModel.Email),     new Claim("sign", string.IsNullOrEmpty(userModel.Sign)?"":userModel.Sign),     new Claim("phone",string.IsNullOrEmpty(userModel.Phone)?"":userModel.Phone),     new Claim("headPhoto", string.IsNullOrEmpty(userModel.HeadPhoto)?"":userModel.HeadPhoto)    };   string jwtToken = new JWT(_cacheClient).CreateToken(claims);   return ApiResult.Success(jwtToken);  }

　　

7，前端存储token
qq登录后根据你申请里面写的回调页面，qq会自动跳转到这个页面，我的回调页面就一个空白页面，加上一个loading提示，加载这个页面时，调用后端api，进行认证操作，成功后，存入token并且跳转到网站首页：
 

<!DOCTYPE html><html><head> <meta name="viewport" content="width = device-width" /> <title>qq认证登录中...</title> <link rel="icon" href="http://www.cnblogs.com/style/images/title.png"></head><body> <div>  qq认证登录中... </div> <script src="http://www.cnblogs.com/style/js/jquery.js"></script> <script src="http://www.cnblogs.com/style/layui/layui.js"></script> <script src="http://www.cnblogs.com/style//js/request.js?v=20112171144"></script> <script src="http://www.cnblogs.com/style/js/util.js?v=202009091015"></script> <script>  layui.use(["layer"], function () {   var layer = layui.layer;   var loading = layer.load(2,{offset: ['100px', '720px']});   var code = getSearchString('code');   if(code==undefined){    layer.msg('code无效', { icon: 5 });    return;   }   $.ajax({    url: url + 'qq/login/' + code,    type: 'get',    dataType: 'json',    success: function (res) {     if (res.code == "200") {      localStorage.setItem("token", res.data);      window.location.href = "../home/index.html";     }     else {      layer.close(loading)      layer.msg(res.message, { icon: 5 });     }    }   })  }) </script></body></html>

　　

通过以上操作，我的个人站点网站接入qq登录邮政电话、 海音汇2016跨境电商高峰论坛、 promoted、 USHOPAL、 解读亚马逊VINE VOICES计划优点和缺点、 外贸5年+，我摸索出了客户信任的三部曲！、 2019 亚马逊美国站黑五网一优惠券以及Prime专享折扣提报指南、 吏上最详细的亚马逊自动广告原理及实操讲解、