Nea*_*ail 5 iframe facebook ios facebook-javascript-sdk facebook-login
我正在尝试使用以下代码(取自 javascript FB.Login 示例)来调用 FB iOS 应用程序中的本机弹出窗口,以允许用户登录并验证我们的应用程序。移动 iOS 应用程序是我们 Web 应用程序页面的主要用例。我们使用框架来允许客户在他们的网站上嵌入我们的代码。
下面的示例在直接访问 (fblogin.hml) 时工作正常(并显示正确的 Native Facebook iOS 弹出窗口),但在通过 iframe 访问时不显示任何弹出窗口工作。通过 iframe 调用时,对 FB.ui 的任何调用都可以正常工作。这是 Facebook iOS 应用程序和/或 Javascript SDK 中所需的行为还是问题?我们还有其他方法可以从 iFrame 中调用 FB.Login 吗?
登录页面:
... fblogin.html ..
<html>
<head>
<title>FB.Login example</title>
</head>
<body>
<!-- Load the Facebook JavaScript SDK -->
<script src = "//connect.facebook.net/en_US/all/debug.js"></script>
<div id="fb-root"></div>
<script type="text/javascript">
FB.init({
appId: 'YOUR_FACEBOOK_APP_ID',
xfbml: true,
status: true,
cookie: true,
});
// Check if the current user is logged in and has authorized the app
FB.getLoginStatus(checkLoginStatus);
// Login in the current user via Facebook and ask for email permission
function authUser() {
FB.login(function(response) {
console.info('FB.login callback', response);
if (response.status === 'connected') {
console.info('User is logged in');
} else {
console.info('User is logged out');
}
}, {scope:'email'});
}
// Check the result of the user status and display login button if necessary
function checkLoginStatus(response) {
conole.log(response);
if(response && response.status == 'connected') {
alert('User is authorized');
// Hide the login button
document.getElementById('loginButton').style.display = 'none';
// Now Personalize the User Experience
console.log('Access Token: ' + response.authResponse.accessToken);
} else {
alert('User is not authorized');
// Display the login button
document.getElementById('loginButton').style.display = 'block';
}
}
</script>
<a href="https://www.facebook.com/dialog/oauth?client_id=YOUR_FACEBOOK_APP_ID&redirect_uri=http://THIS_URL">Login Using oauth URL</a>
<input id="loginButton" type="button" value="Login Using Javascript SDK" onclick="authUser();" />
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
嵌入页面
… fblogin_embed.html
<html>
<head><title>Facebook embed test</title>
</head>
<body>
<iframe src="fblogin.html"
frameborder="0"
scrolling="no"
width="100%"
height="100%">
</iframe>
</body>
Run Code Online (Sandbox Code Playgroud)
重现:
小智 0
这就是我们所做的。如果浏览器不受支持,我们将使用手动 Web 流程,如果不是 Javascript SDK
检测 Chrome 和 Facebook 应用内浏览器 IOS。
FB.init 设置“状态”= true
在 FB.getLoginStatus 中检查是否是不支持的浏览器使用手动流程其他 sdk FB.login。
redirect_uri - 传递带有父位置的 GET 参数。
例如:
Parent: parent.com
Iframe: iframe.com
redirect_uri = encodeURI('http://iframe.com/YOUR_SERVER_SCRIPT?redirect_uri=http://parent.com');
Run Code Online (Sandbox Code Playgroud)
登录手册:
var fb_s = "https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&scope=PERMISSIONS&response_type=token&redirect_uri=LOCATION_HREF_ENCODED;
Run Code Online (Sandbox Code Playgroud)
服务器脚本:
if (empty($_GET['redirect_uri'])) {
header("HTTP/1.1 301 Moved Permanently");
header("Location: " . $_GET['redirect_uri']);
}
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
2046 次 |
| 最近记录: |