Facebook的JS SDK进步的web应用程序的问题

我有一个渐进式Web应用程序内置有角4Facebook的JS SDK进步的web应用程序的问题

我的问题是在FB登录对话框从主屏幕上的应用程序使用时不会自动关闭。它在Chrome浏览器中打开时工作得很好，但是当我从安装的主屏幕应用程序中使用它时，对话框窗口会打开，要求提供权限，毕竟允许对话框变为空白，并且不会关闭或重定向回应用程序。

这似乎是如果我将manifest.json中的“display”更改为“browser”，但它在“display”处于“standalone”时不起作用。

我已经搜遍了所有，但没有成功。

谢谢

来源

2017-09-26 Abhijeet Bajracharya

这有什么更新？我正在处理同样的问题 –

@ GabrielC.Troia nope，我必须保持浏览器模式的应用程序。我认为它是一个交叉来源的东西，铬是封锁它。所以试图做一个自定义的登录流程。 –

谢谢。保持它在浏览器模式中违背了成为PWA的目的不是吗？ –

我有点想出了一个方法来做到这一点的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

来源

2017-11-07 05:35:12

当您的应用程序作为渐进式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)

登录状态，您可以添加到yourCallbackFB.getLoginStatus为好。您也可以支持弹出流程和重定向流程，具体取决于用户的设备。

我建议通过我在上面发布的文档条目阅读更多信息和选项。

来源

2018-01-16 16:07:50 nicoqh

Facebook的JS SDK进步的web应用程序的问题

回答

相关问题