Facebook的JS SDK进步的web应用程序的问题
我有一个渐进式Web应用程序内置有角4Facebook的JS SDK进步的web应用程序的问题
我的问题是在FB登录对话框从主屏幕上的应用程序使用时不会自动关闭。它在Chrome浏览器中打开时工作得很好,但是当我从安装的主屏幕应用程序中使用它时,对话框窗口会打开,要求提供权限,毕竟允许对话框变为空白,并且不会关闭或重定向回应用程序。
这似乎是如果我将manifest.json中的“display”更改为“browser”,但它在“display”处于“standalone”时不起作用。
我已经搜遍了所有,但没有成功。
谢谢
我有点想出了一个方法来做到这一点的FB。使用FB PHP SDK生成登录URL并在子窗口上打开url,并在整个登录对话框中输入&权限,并重定向到我的redirect_url,在那里我使用window.opener.postMessage
将必要的数据传递给父窗口。
我REDIRECT_URL页面设置这样的:
<?php
if (! session_id()) {
session_start();
}
require_once "vendor/autoload.php";
$_SESSION['FBRLH_state'] = $_GET['state'];
$fb = new Facebook\Facebook([
'app_id' => 'FBID', // Replace {app-id} with your app id
'app_secret' => 'FBSECRET',
'default_graph_version' => 'v2.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) {
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;
}
$oAuth2Client = $fb->getOAuth2Client();
$tokenMetadata = $oAuth2Client->debugToken($accessToken);
$tokenMetadata->validateAppId('FBID'); // Replace {app-id} with your app id
$tokenMetadata->validateExpiration();
if (! $accessToken->isLongLived()) {
try {
$accessToken = $oAuth2Client->getLongLivedAccessToken($accessToken);
} catch (Facebook\Exceptions\FacebookSDKException $e) {
echo "<p>Error getting long-lived access token: " . $helper->getMessage() . "</p>\n\n";
exit;
}}
$_SESSION['fb_access_token'] = (string)$accessToken;
$tk = $_SESSION['fb_access_token'];
?>
<?= $tk;?>
<script type="text/javascript">
window.opener.postMessage({token: '<?= $tk;?>'}, '*');
window.close();
</script>
在父窗口中我有使用window.addEventListener("message", receiveMessage, false);
听的postMessage的事件监听和需要receiveMessage函数处理的所有数据。因此,任何使用独立模式的Web应用程序都应能够从子窗口获取数据。
窗口postmessage可以用来跨越来源之间传递数据。有关postMessage的更多详细信息,请访问:https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
当您的应用程序作为渐进式Web应用程序安装时,Facebook登录弹出窗口和父窗口(您的应用程序)无法在桌面环境中进行通信。
您在其他情况下也会遇到此问题,例如,当你的应用程序的URL是从其他应用程序(Instagram,Facebook Messenger等)启动的时候,我记不清哪些特定的场景或设备与此相关,但有几个。
您可以按照另一个答案的建议来实现基于服务器的流。您也可以在客户端实施自定义重定向流程。
如何创建Facebook的SDK文档中描述的自定义重定向流,“手动构建一个登录流程”下:
https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow
的想法如下:
你指挥你的用户访问Facebook登录对话框(而不是由FB.login()
启动的弹出窗口),例如当他们点击一个按钮:
https://www.facebook.com/v2.11/dialog/oauth?
client_id={app-id}
&redirect_uri={redirect-uri}
&response_type=token
&state={state-param}
如果用户成功授予您的应用程序所需的权限,他/她重新回到您的应用程序(该位置由{redirect-url}
确定):
{redirect-uri}?code=<facebook-code>&state={state}#_=_
然后你的应用程序需要确定登录是否成功。有两种方法可以做到这一点:
A)读取当前URL的查询字符串(见code=<code>
部分 - 这可以用来检索有关用户其他信息,也可以发送到后台服务器)。
B)使用Facebook SDK不检索如果您已经使用SDK和FB.login(yourCallback)
使用FB.getLoginStatus(yourCallback)
登录状态,您可以添加到yourCallback
FB.getLoginStatus
为好。您也可以支持弹出流程和重定向流程,具体取决于用户的设备。
我建议通过我在上面发布的文档条目阅读更多信息和选项。
这有什么更新?我正在处理同样的问题 –
@ GabrielC.Troia nope,我必须保持浏览器模式的应用程序。我认为它是一个交叉来源的东西,铬是*它。所以试图做一个自定义的登录流程。 –
谢谢。保持它在浏览器模式中违背了成为PWA的目的不是吗? –