Comment faire de FB.l'interface utilisateur({ method: 'auth.login' ...) avec affichage: 'iframe' au lieu de 'popup'?

Je suis en train de travailler sur une connexion pour une simple Facebook app. Je suis en mesure d'utiliser le SDK JavaScript pour animer avec succès un login /prolongée boîte de dialogue autorisations dans une fenêtre pop-up soit avec FB.login ou le code suivant:

FB.ui({ method: 'auth.login',
    perms: 'read_stream,publish_stream',
    display: 'popup' },
    function (rsp) {
        fg_log('on login');                             
        if(rsp.session) { 
            if(rsp.perms) {
                fg_log('PERMS: ',rsp.perms);
            } else {
                fg_log('Hmm. No permissions');
            }
        } else {
            fg_log('Hmm. No login');
        }
    }
);

Le problème est que... je n'aime pas les fenêtres popup beaucoup. À partir d'un point de vue de l'INTERFACE utilisateur, je pense qu'ils se sentent, comme ils n'appartiennent pas au reste de l'application. Et de les amener à se manifester via JavaScript aussi besoin d'un clic de l'utilisateur pour aucune raison, afin d'obtenir autour de bloqueurs de pop-ups, l'utilisateur doit cliquer sur quelque chose comme un bouton de connexion (en grande partie inutile, étant donné que le temps que l'application sait qu'il doit afficher un bouton de connexion, il sait déjà que l'utilisateur doit ouvrir une session et peut ainsi présenter de la boîte de dialogue autorisations).

Alors, j'ai pensé, pourquoi pas une iframe à la place? Pas de problèmes avec les bloqueurs de popups, bien intégré dans la page, et Facebook semble love 'em.

Creuser un peu dans le récent (2.1.2) JavaScript SDK source et de divers autres postes sur le Facebook forum des développeurs semble indiquer qu'on peut passer d'affichage": 'iframe'" en tant que partie des options de FB.l'interface utilisateur.

Mais quand je l'ai essayer, mais l'iframe ne viennent, au lieu de la boîte de dialogue autorisations, j'obtiens:

"Une erreur s'est produite . S'il vous plaît essayer à nouveau plus tard."

(Note: d'essayer de nouveau plus tard, produit les mêmes résultats.)

est-il un truc pour que tout cela fonctionne, ou est-il interdit pour une raison quelconque?

Ce n'est pas vraiment une réponse... mais j'ai vu un comportement variable où Facebook sera parfois l'un et parfois l'autre, en fonction de plusieurs choses qui sont hors de mon contrôle.

OriginalL'auteur Weston C | 2010-11-30

2

Essayez d'utiliser FB.connexion au lieu de FB..ui. Si l'utilisateur est déjà connecté, et les autorisations que vous demandez via FB.connectez-vous, puis il n'y a pas de dialogue. Sinon, un "inline" s'affiche demandant le des autorisations supplémentaires/login.

C'est un peu contre-intuitif à utiliser une fonction de connexion pour obtenir plus d'autorisations lorsque l'utilisateur est déjà connecté. Mais il fonctionne.

Il y a un problème avec cette - sur les onglets de la page, il ne sera pas 'inline'; il sera un popup qui pourrait se bloquer.
Pas plus. Avec la récente mise à jour sur FB api FB.la connexion sera également insérée dans les onglets.

OriginalL'auteur Brent Baisley
2

N'est plus possible (Juillet 2014), mais vous l'avez toujours pu et peut toujours créer votre propre iframe et le remplir avec une page qui redirige à partir de votre serveur à une pleine page FB login.

Voir https://developers.facebook.com/docs/reference/dialogs/oauth/ :

Si vous utilisez l'URL de redirection boîte de dialogue de mise en œuvre, alors ce
plein d'affichage des pages, illustré dans Facebook.com. Cet affichage
type est appelé page.

Le FB iframe travaillait au moment où la question a été posée, soit en utilisant display: 'iframe' avec FB.ui() comme Mustafa suggéré ou à l'aide de FB.login() (à certains points dans le temps, elle a fait défaut de dialogue "mode" si FB a été correctement inited, à d'autres moments que vous avez passés de mode d'affichage).

C'était éteint, plus probablement au début de 2014 & en raison de clickjacking. À partir de la référence ci-dessus:

Si vous utilisez le SDK JavaScript, par défaut, ce sera un popup
de la fenêtre. Vous pouvez également forcer le pop-up ou des types de page lors de l'utilisation de la
SDK JavaScript, si nécessaire. iframe et async types ne sont pas valables pour
la boîte de Dialogue de Connexion pour des raisons de sécurité.

OriginalL'auteur Bruno

Vous pouvez essayer ceci:

Je utiliser la méthode suivante dans environ 6 mois. 🙂

<div>
<a href="#_" onclick="myOuthDialog();">outh dialog</a>
</div>
<div id="fb-root"></div>
<script>
base_url = 'http/s://path/to/your/site/url';  //Which is set into app setting
myOuthDialog = function(){
FB.ui({method: 'oauth',
client_id:'<!--YOUR APP ID-->',
api_key:'<!--YOUR APP ID-->',
app_id:'<!--YOUR APP ID-->',
canvas:'1',
fbconnect:'1',
response_type:'code token',
perms:'email',
scope:'email',
redirect_uri:base_url,
display:'iframe'
}, myCallback);
}
myCallback = function(data){
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
document.location = base_url;
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
} else if (response.status === 'not_authorized') {
myOuthDialog();
} else {
document.location = base_url;
}
}, true);
}
</script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId      : '<!--YOUR APP ID-->', //App ID
channelUrl : base_url+'channel.php', //Channel File
status     : true, //check login status
cookie     : true, //enable cookies to allow the server to access the session
oauth      : true, //enable OAuth 2.0
xfbml      : true  //parse XFBML
});
};
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>

OriginalL'auteur Mustafa Amin

Vous devez vous connecter pour publier un commentaire.