在当今互联网时代,用户体验至关重要。为了简化用户注册流程、提高用户留存率,越来越多的应用选择了第三方登录功能。下面介绍如何通过新浪微博、支付宝和QQ等第三方登录平台接入,为你的应用增添更便捷的登录方式,提升用户体验,促进用户增长。这里只介绍如果从第三方获取userId或者OpenId等信息,获取到用户信息后的逻辑自己根据自己平台来添加就行了。我的基本逻辑是获取到第三方用户信息后新增(或更新)用户信息,保存openId等第三信息,之后根据此用户信息登录当前系统,一个用户可以对应多个平台。
预备知识
三方登录一般使用的是 OAuth 2.0,那么OAuth 2.0是什么呢?直接抄一段“OAuth 2.0 协议是一种三方授权协议,目前大部分的第三方登录与授权都是基于该协议的标准或改进实现”,所以多少先去了解一下,协议内容。其实简单点说就是数据交换过程需要遵从哪些标准,需要给哪些参数,有了标准其他人才好对接。
协议内容: ➤ https://datatracker.ietf.org/doc/html/rfc6749
内容很多,里面最重要的是理解流程,也就会下面这(只是其中一种模式),理解其中一种模式,其他的也就自然就好理解。
由于之前没有接入过第三登录,所以基本是从0开始的,该踩的坑基本也踩,后面的小伙伴希望能直接跨过这些坑。 从我对接成功的顺序来开始介绍,首先介绍新浪微博登录的接入。
一、新浪微博登录接入
新浪微博的登录接入算是比较简单了,一个坑没遇到,直接一次成功。
新浪微博开发平台:➤ https://open.weibo.com/connect
登录开放平台后,需要先认证开发者,填的都是基础信息,也没什么要求,等审核过了后。再添加网站接入。网站接入这里需要准备回调地址、三个尺寸网站图标的(16*16,80*80,120*120)和三个宣传图片(450*300)尺寸是固定的,其他的按照要求填写,等待审核过了就可以对接了。
文档:➤ https://open.weibo.com/wiki/%E6%8E%88%E6%9D%83%E6%9C%BA%E5%88%B6
代码就不给出来了,因为就是简单请求接口数据,按照文档来就行了。
二、支付宝登录接入
支付宝的文档比较多,过程其实也很简单,只是文档太多,开始没找到核心内容,支付宝有一个比较好的地方是,审核快,开发过程还有SDK。流程也是一样,先申请成为开发者,在接入网站,申请过程也是照着表单要求填写即可,一般一天就可审核完成(这个效率比QQ就快了不是一星半点了)。申请应用前面需要先设置证书/秘钥接口加签方式,才能提交审核,我只是地方登录所以使用秘钥方式,如果有金钱交易,建议使用证书。
下面来敲重点。
1、下载应用工具(一定要下哦,后面要用到)
地址:➤ https://opendocs.alipay.com/isv/03l740?pathHash=8d712d50
2、下载SDK(当然也可以自己写)
地址:➤ https://opendocs.alipay.com/isv/03l221
3、应用保存好秘钥,并且转换成PKCS1格式(使用开始下载的应用工具装换,此处被坑过)
第一个条也就不解释了,第二条开始,我是使用.net8.0开发的,.net 的SDK有两个版本,一个通用,一个简单。我首先使用的是简单版的,代码量少一个,配置好后一个方法就能得到Accesstoken(理论上),但是事实是不可能的,Easy SDK 不支持OpenId,我调用的时候虽然拿到了Accesstoken,但是报错了。所以还是老实的使用了通用版的。所以建议直接到nuget中下载通用的SDK,也可用命令:
dotnet add package AlipaySDKNet.Standard --version 4.9.131
安装好后按照示例代码来写即可。文档太多了有点不好找,下面是地址和示例代码
授权码获取
https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=商户的APPID&scope=auth_user&redirect_uri=ENCODED_URL&state=init
Accesstoken获取(一同返回的还有openId)
文档地址:➤ https://opendocs.alipay.com/open/02ahjv?pathHash=aca75fe9
示例代码:
using System;
using System.Collections.Generic;
using Aop.Api;
using Aop.Api.Request;
using Aop.Api.Response;
using Aop.Api.Domain;
using Aop.Api.Util;
namespace SdkDemoTest
{
public class AlipaySystemOauthToken
{
public static void Main(string[] args)
{
// 初始化SDK
IAopClient alipayClient = new DefaultAopClient(GetAlipayConfig());
// 构造请求参数以调用接口
AlipaySystemOauthTokenRequest request = new AlipaySystemOauthTokenRequest();
// 设置刷新令牌
request.RefreshToken = "201208134b203fe6c11548bcabd8da5bb087a83b";
// 设置授权码
request.Code = "4b203fe6c11548bcabd8da5bb087a83b";
// 设置授权方式
request.GrantType = "authorization_code";
AlipaySystemOauthTokenResponse response = alipayClient.Execute(request);
if(!response.IsError)
{
Console.WriteLine("调用成功");
}
else
{
Console.WriteLine("调用失败");
}
}
private static AlipayConfig GetAlipayConfig()
{
string privateKey = "<-- 请填写您的应用私钥,例如:MIIEvQIBADANB ... ... -->";
string alipayPublicKey = "<-- 请填写您的支付宝公钥,例如:MIIBIjANBg... -->";
AlipayConfig alipayConfig = new AlipayConfig();
alipayConfig.ServerUrl = "https://openapi.alipay.com/gateway.do";
alipayConfig.AppId = "<-- 请填写您的AppId,例如:2019091767145019 -->";
alipayConfig.PrivateKey = privateKey;
alipayConfig.Format = "json";
alipayConfig.AlipayPublicKey = alipayPublicKey;
alipayConfig.Charset = "UTF-8";
alipayConfig.SignType = "RSA2";
return alipayConfig;
}
}
}
接下来遇到了问题了,“CryptographicException: 不正确的长度“,我去什么鬼,还好第二次异常时内容给得详细点了,私钥有问题。但是私钥是官方给的啊,哪里来的问题,经过不停地搜索,终于有人给出了答案,要把私钥转成PKCS1格式,那么重要的事情既然文档里面没提?好气啊!
此处要转换的私钥的工具就是第一步下载的那个软件,同时在生成一下公钥(保险起见,没时间测试),这样就能成功了。
三、QQ宝登录接入
QQ登录对接是一个非常头痛的,审核要花费大量的时间,审核不过从新提交有事2-3天才出结果,如果只是想熟悉三方登录对接的,不建议用这个练习,技术上是一样的,就是审核太浪费时间了。腾讯有许多开发平台,看文档也是头晕,腾讯的文档懂得都懂。对接三方登录的这个叫 “QQ互联”。
QQ互联地址:➤ https://connect.qq.com/index.html
第一步:先申请成为开发者,这里提交的信息中需要提交手持身份证照片,个人对这是反感。
这里有一个坑,提交页面没有人脸识别按钮,但提交后2天后会提示“审核不通过没有人脸识别”,真是一脸懵逼,这个时候你要找到另一个平台,腾讯开发平台(➤ https://open.tencent.com/),这里面可以找到人脸识别的按钮。
第二步:就是提交你的应用,根据你的应用类型创建应用,我的是“网站应用”。这里提交后就是等待审核。
这里也有需要注意的:申请页面是下面这样的(这里还需要添加网站图标,保存后重新编辑就有按钮可以上传图标了),但填写完了,创建了应用之后不要直接提交,提交是审核不过了的,还要把平台信息一起提交。
平台信息处点击“修改”,全部按要求填写。
要注意,备案时显示有“ICP备案主体信息”和“ICP备案服务信息”,要选择和域名对应的那个,他们是真的去查,填成备案主体就会审核不通过。
另一坑,在提交审核的同时,你的网站登录页面就需要先对接好QQ登录,添加QQ登录按钮,地址填写成获取授权码的地址即可“➤ https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=xxx&redirect_uri=xxx&state=xxx”,虽然跳转过去会出现下面异常。但还是要加,不然审核不通过。
QQ登录按钮没有跳转得到的结果
全部审核通过就可按正常流程对接登录。文档地址:➤ https://wiki.connect.qq.com/%e6%94%be%e7%bd%aeqq%e7%99%bb%e5%bd%95%e6%8c%89%e9%92%ae_oauth2-0
具体的代码实现和接口自己看文档就行了,编码过程还有一个需要注意:redirect_uri 需要进行URLEncode。
四、Github登录接入
本来是不想接入github后来想想还是随便加一下,最为开发应该没有人不知道github吧!果然有惊喜,从添加开始到结束2个小时就搞定了。如果新手练习的建议就对接这个,不需要审核,填写好基本网站信息就可以直接用了。这里就不截图了,简单介绍一下,登录github,点击右侧头像下拉菜单“Settings”——>在打开的页面左下脚“Developer settings”——>"OAuth Apps"——>"New OAuth App"——>填写基础信息保存就可以了。没有审核,得到Client ID和Client secrets就可对接了。由于是国外完网站,有时候可能连不上,这个就需要科学上网了。
总结
原本想对接微信登录,但是微信需要企业才能审核通过,其他方法就是通过小程序登录,小程序可以获取到用户的openId,这个有时间在弄,如果弄好也会记录下来。对接前先学习一下OAuth 2.0,开始可能有点绕,多来几次就熟悉(开发单点登录系统时就会用到这些协议)。其他的就是简单的数据请求,不管什么语言,应该自己的http请求方法,自己实现就行了。
三方登录主要流程:先获取授权码(Authorization Code)——>使用授权码请求访问令牌(Access Token)——>使用令牌获取OpenId(UserId)——> 使用OpenId获取用户信息——>将用户信息对接到自己的网站并登录。
注意事项:
(1)代码实现过程要要注意参数会被URLEncode编码,自己传的参数会被编码,对方接受的参数也会被编码,导致接收到的数据可能会异常。
(2)返回地址redirect_uri 需要进行URLEncode,且尽量不要带参数(支付宝就不接受这样的回调地址),
例如➤ https://localhost:44311/Account?handler=login 。
(3)请求接口看清楚是请求方法是GET还是POST。