配置
1、注册一个facebook的账号
你得有一个facebook的账号,然后才能成为facebook的开发者。
2、登录https://developers.facebook.com/
利用你的facebook账号登录进去,你才是一个开发者。得有这个权限,才能开发第三方登录。
3、点击我的应用
4、创建一个属于自己的应用
5、选择类型和详情
6、回到我的应用界面上
就可以看到刚刚创建的应用了。
7、点击应用名字,查看详情
要记下来你的client_id 和 client_secret!
8、记录facebook登录的设置
比如你的网域是:https://.aliyuncs.com/
有效Oauth跳转的uri就必须是:https://.aliyuncs.com/path
9、应用权限审核
这个的作用,就是告诉facebook你要使用到用户的哪些数据,比如,email,和 public_profile。这两个是可以直接通过的,就是由一般访问权提升为高级访问权。已经申请的话会看到前面访问登记是绿色的,就是高级访问权了了。
其他的权限,申请了就要facebook审批,审批的周期一般是七天。
在第六步,有个数据使用情况检查,就是你要在指定的某个时间段之前向facebook做你要使用这些数据的说明,还有承诺合理使用你已经获得通过的数据权限,合理使用用户的数据。
10、一些基本的准备
以上,就是你要开发第三方路所要准备的东西,开发的都必须要走https,http不行的。如果没有这种https域名的,建议可以学习一下使用 ngrok。这个是一个内网穿透的工具,可以临时使得你的内网和变成可以访问的外网。
APP登陆
/**
* app端授权,php登陆
* composer require facebook/graph-sdk
* @Author wzb
* @Date 2022/4/23 12:05
*/
public function facebook()
{
$access_token = $this->request->param('access_token', '', 'trim');
if (!$access_token) {
exit('服务器错误');
}
$fb = new Facebook([
'app_id' => '你的应用编号',
'app_secret' => '你的秘钥',
'default_graph_version' => 'v2.10',
]);
$facebook_user = [];
$avatar_url = '';
try {
$response = $fb->get(
'/me',
$access_token
);
$facebook_user = $response->getDecodedBody();
if (!isset($facebook_user['id'])) {
exit('获取Facebook信息失败');
}
//获取用户头像
$response = $fb->get(
"/{$facebook_user['id']}/picture?type=large&redirect=false",
$access_token
);
$facebook_user_avatar = $response->getDecodedBody();
if (isset($facebook_user_avatar['data']['url'])) {
$avatar_url = $facebook_user_avatar['data']['url']; // 获取头像
}
} catch (\Exception $e) {
exit('系统繁忙,请稍后再试');
}
$fbUid = $facebook_user['id'] ?? ''; // fb_uid
$nickname = $facebook_user['name']; // 呢称
//2.拿到用户信息进行用户登录or用户创建流程
}
Web 端登陆流程
php 登陆流程
1、进入Facebook登录-》设置 来设置允许的回调地址2、下载SDK:GitHub - facebookarchive/php-graph-sdk: The Facebook SDK for PHP provides a native interface to the Graph API and Facebook Login. https://developers.facebook.com/docs/php
/**
* facebook登陆
* 下载SDK:https://github.com/facebookarchive/php-graph-sdk
* @Author wzb
* @Date 2022/4/23 11:53
*/
function facebook_login(){
session_start();
$fb = new \Facebook\Facebook([
'app_id' => '你的应用编号',
'app_secret' => '你的秘钥',
'default_graph_version' => 'v3.2',
]);
$helper = $fb->getRedirectLoginHelper();
$permissions = ['email']; // Optional permissions
$redirect_uri = 'https://m.remixg.com/Login/face_login'; // 授权地址必须要填写跟这个一样
$loginUrl = $helper->getLoginUrl($redirect_uri, $permissions);
echo '<a href="' . htmlspecialchars($loginUrl) . '">Log in with Facebook!</a>';
}
/**
* facebook登陆回调
* @Author wzb
* @Date 2022/4/23 11:53
*/
function face_login(){
session_start();
$fb = new \Facebook\Facebook([
'app_id' => '你的应用编号',
'app_secret' => '你的秘钥',
'default_graph_version' => 'v3.2',
]);
$helper = $fb->getRedirectLoginHelper();
try {
$accessToken = $helper->getAccessToken();
} catch (Facebook\Exceptions\FacebookResponseException $e) {
echo 'Graph returned an error: ' . $e->getMessage();
exit;
} catch (Facebook\Exceptions\FacebookSDKException $e) {
// When validation fails or other local issues
echo 'Facebook SDK returned an error: ' . $e->getMessage();
exit;
}
if (!isset($accessToken)) {
if ($helper->getError()) {
header('HTTP/1.0 401 Unauthorized');
echo "Error: " . $helper->getError() . "\n";
echo "Error Code: " . $helper->getErrorCode() . "\n";
echo "Error Reason: " . $helper->getErrorReason() . "\n";
echo "Error Description: " . $helper->getErrorDescription() . "\n";
} else {
header('HTTP/1.0 400 Bad Request');
echo 'Bad request';
}
exit;
}
// 获取 accessToken
$oAuth2Client = $fb->getOAuth2Client();
// 获取 userid
$tokenMetadata = $oAuth2Client->debugToken($accessToken);
// 获取用户信息
$userinfo = $fb->get($tokenMetadata->getUserId() . '?fields=id,name,first_name,picture', $accessToken->getValue());
$userinfo = json_decode($userinfo->getBody(), true);
// 执行注册
}
js 登陆流程
/**
* facebook js login
*/
function login_facebook(){
FB.getLoginStatus(function(response) {
console.log(response);
if (response.status === 'connected') {
FB.api('/me', {fields: 'id,name,first_name,picture.width(120).height(120)'},function(res) {
var facebook_login_data = {id:res.id,name:res.name,picture:res.picture.data.url};
// 传给后台处理注册登录
$.ajax({
type:'POST',
url:"后端接口",
data:facebook_login_data,
success:function(data){
$('#url').html(data);
}
});
});
}else{
FB.login(function(response) {
if (response.status === 'connected') {
FB.api('/me', {fields: 'id,name,first_name,picture.width(120).height(120)'},function(res) {
var facebook_login_data = {id:res.id,name:res.name,picture:res.picture.data.url};
// 传给后台处理注册登录
$.ajax({
type:'POST',
url:"后端接口",
data:facebook_login_data,
success:function(data){
$('#url').html(data);
}
});
});
} else {
console.log('该用户没有登录');
}
}, {scope: 'public_profile,email'});
}
});
}
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = function() {
FB.init({
appId : '你的应用编号',
cookie : true, // 启用cookie
xfbml : true, // 解析此页面上的社交插件
version : 'v3.2' // 使用图形api v3.2版本
});
};