有时候为了迅速获客,会在注册登录页支持第三方登录,比如国内一些小众论坛的qq登录
简书的社交账号登录
CSDN的社交账号登录
一些国际的软件/网站支持的比较多的第三方登录是Google第三方登录、Facebook第三方登录等。这里记录下Facebook第三方登录的过程。下面是一个Facebook第三方登录流程示例:
上面流程图只是个例子,再往下就是根据业务需求,看都需要用Facebook的那些用户信息,再在经过授权的情况下去调用Facebook接口查询。如果需要继续绑定手机号就再继续走下面绑定手机号的流程。
可以添加Android、IOS、web页面等类型的授权登录
<html>
<head>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v6.0&appId=746492673568696&autoLogAppEvents=1"></script>
<script>
function login() {
FB.login(function(response){
console.log(response);
});
}
</script>
</head>
<body>
<h1>Facebook登录</h1>
<!-- 自定义登录按钮 -->
<button id="loginBtn" onclick="login();" >登录</button>
</body>
</html>
这个网页不能直接用浏览器打开,需要部署在支持https的服务器上。
下面是登录过程的截图
登录成功之后可以看到控制台打印出了登录成功后Facebook返回的信息,有accessToken、userID等:
前端拿到登录token后,需要后端校验一下,防止别人拿其他平台的appId授权的token来请求。
可以用 https://graph.facebook.com/debug_token?access_token={App-token}&input_token={User-token}
这个接口来校验token,User-token为用户登录的token(比如上面用户登录返回的accessToken),App-token是由appId和appSecret拼接而成,格式为 {appId}%7C{appSecret}
,%7C
就是|
urlencode之后的编码。
比如appId是746492673568696,appSecret是71cf85a8ba36c84b22bc3461e143e16b,那就可以直接用发送get请求https://graph.facebook.com/debug_token?access_token=746492673568696%7C71cf85a8ba36c84b22bc3461e143e16b&input_token=前端用户登录返回的accessToken
,返回结果的格式如下
{
"data": {
"app_id": "746492673568696",
"type": "USER",
"application": "shop",
"data_access_expires_at": 1594896505,
"expires_at": 1587124800,
"is_valid": true,
"scopes": [
"user_birthday",
"user_likes",
"user_photos",
"user_friends",
"user_status",
"email",
"public_profile"
],
"user_id": "110029804771531"
}
}
其中is_valid就是token是否校验成功。如果还需要获取其他用户信息,可以参考Facebook提供的api https://developers.facebook.com/docs/graph-api/using-graph-api