29 octobre 2015

My setup – Facebook Api using OpenFb on an Apache Cordova App

Pourquoi j’écris mon titre en anglais moi… à force de jongler entre les langues je fais du français/anglais dans mon code et maintenant dans mes articles… Pour cet article je vais essayer de détailler les étapes d’une construction d’application utilisant apache codorva autour de l’API Facebook. Mon approche n’est peut être pas la meilleur, vous en faites ce que vous voulez, mais pour moi il est intéressant (important ?) de revoir toute l’approche et les étapes, car honnêtement on s’y perd. Tout d’abord, je reste en « mode dev » pour cet article, c’est à dire que mon app n’ira pas en prod (sur les stores). Par contre je vais utiliser deux applications facebook, une en dev et l’autre pour la prod. (il faudra ici distinguer votre app (iOS/Android) et l’application facebook qui aura « deux modes » (prod et dev). Avant de commencer, il est bon d’avoir deux comptes Facebook. Un compte de développeur et un autre de test (votre perso par exemple). Pour ma part j’utilise deux navigateurs différents (chrome pour le dev, Firefox pour le test). Ainsi j’ai pas besoin de me reconnecter et mes sessions sont bien distinctes. Étape 1 : Création de l’application Facebook Rendez vous sur https://developers.facebook.com, avec votre compte dev. Loguez vous Sur l’onglet My Apps, cliquez sur « Add a new App », séléctionnez site web WWW, choisissez un nom, ensuite une catégorie et « create App ID ». Moi j’ai choisi WebSite-Prod pour ma démo. Ensuite je ré-itère l’opération avec une application de dev, pour cela il faut lui donner un nom comme WebSite-Dev et actionner oui pour le toggle « is this a test version of another app ? » , puis sélectionnez votre app prod (pour moi WebSite-Prod) A ce stade nous avons deux applications Facebook, en réalité nous avons qu’une seule application Facebook qui possède une version de test. Étape 2 : Paramétrage de l’application dev Sélectionnez votre application dans l’onglet MyApp (pour moi WebSite-Dev). Vous êtes sur le Dashboard. Notez que votre AppID se trouve ici. Vous en aurez besoin plus tard.Cliquez sur le menu Settings. Ajoutez une plateforme avec « Add Platform » et sélectionnez WebSite. Ici j’ai rempli au début par http://localhost:8888/. Il s’avère qu’en test-dev pour l’instant ce champ n’est pas vraiment primordiale. Mais je laisse au cas ou je me tromperais sur ce point. Voici ce que vous obtenez : Cliquez maintenant sur « Advanced », dans la section « Client oAuth Settings », il faut renseigner le champ « Valid Oauth redirect URIs » avec ces deux entrées : Supprimer – https://www.facebook.com/connect/login_success.html- http://localhost:8888/cordovaopenfb/www/oauthcallback.html N’oubliez pas d’enregistrer la page après chaque changement. Dans le menu, sélectionnez « Roles ». Dans « Testers » ajouter votre second compte de test : Si vous ne le faites pas, vous risquez de vous retrouvez avec des messages d’erreur de ce type : « Application non configurée: Cette application est toujours en mode de développement. Utiliser un compte test enregistré ou demander à un administrateur de l’application de vous ajoutez les autorisations afin d’accéder à l’application. » Étape 3 : Paramétrage de l’application prod : Dans un premier temps, nous allons paramétrer exactement de la même manière la version prod de notre application. En théorie nous ne devrions pas avoir besoin d’un testeur, mais Facebook impose que l’on fasse au moins une requête (login) de test durant les 30 derniers jours pour valider une review. Donc laissons le pour l’instant. Normalement l’application est ouverte à tous amis par défaut elle ne l’est pas et n’est pas visible au publique. Pour y remédier,  il faut passer l’application en « prod réelle ». Il faut vous rendre dans le menu « Status & Review » et cliquez sur Yes pour « Do you want to make this app and all its live features available to the general public » Si tout va bien il y a un petit point vert qui indique que votre app est en ligne. A ce stade vous pouvez déjà jouer avec votre app. Tout est prêt côté dev facebook. Vous allez pouvoir exploiter à fond toutes les possibilités de votre application Cordova. Côté prod, tout n’est pas permit, mais on peut déjà faire quelques essais. Le login va fonctionner, vous allez pouvoir récupérer quelques infos permises par le scope de base : Seulement vous n’allez pas avoir la possibilité de publier sur le mur par exemple (scope : publish_actions), sauf si vous êtes encore testeur, donc pensez a vous enlever quand vous aurez fait votre premier essai de login pour vous mettre en condition réelle, comme un user lambda. Pour avoir les droits de publications il faut passer par une « Review » Facebook, une soumission à la validation de Facebook sur votre application… Facebook va donc tester votre application. Pour cela il vous faudra renseigner tout un tas d’information permettant aux testeurs de facebook de tester votre application. Note :  Mais quelle application ? Mon app n’est même pas sur un store me direz vous… En théorie Facebook devrait pouvoir tester un site web, ce qui est beaucoup plus simple à mettre en place, même en dev. Mais pour Cordova c’est un lien localhost ! Faut il faire un site web en plus ? Pour l’instant j’ai demandé une validation à l’aveugle, c’est à dire que j’ai fourni quelques screenshots, un semblant de descriptif et une sorte de manuel pour tester… Je rappelle que mon app est justement faite pour tester Facebook…Je te test, tu me testes… je sais pas comment ils vont le prendre… –> réponse : Facebook a rejeté mon app. Voici les éléments à remplir sur votre application Facebook prod avant de demander une Review : menu settings : Contact Email menu App Details :Short description & long description menu App Details : Privacy Policy URL (exemple : https://reactor.fr/privacystatement/facebook/website.html ) menu App Details : App icon (en 1024px par 1024px, fond transparent de préférence si il est blanc) + un test de login avec un compte de test sur votre application. Normalement on est bon la… Étape 4 : faire un essai sur une application mobile J’ai testé sous android avec mon Wiko Ridge 4G. Voici mon code (fait sous Visual…

Erreur Facebook : L’URL fournie n’est pas autorisée par la configuration de l’application

Voici l’erreur qui me prends la tête depuis des heures… (sur Cordova) « L’URL fournie n’est pas autorisée par la configuration de l’application.: Une ou plusieurs URL fournies ne sont pas autorisées par les paramètres de l’application. Elle(s) doi(ven)t correspondre à l’URL du site ou du Canevas, ou le domaine doit être un sous-domaine de l’un des domaines de l’application. » Impossible de trouver la source. J’ai donc repris mon code Cordova et transposé à une application web classique pour isoler au possible mon script. J’y retrouve la même erreur…. Du coup j’ai tout repris à zéro. Page blanche, nouvelle app Facebook, getting started de Facebook…Et je n’ai plus cette erreur. Il s’avère que pour utiliser Oauth.io (mes articles précédents) il faut cocher une case qui par défaut est non cochée. Dans le backoffice d’application facebook  : Paramètres – Advanced – Client Oauth Settings Embedded Browser oAuth Login ne doit pas être à OUI si vous voulez coder avec le SDK Facebook Javascript. Mon code fonctionne sur ma page web classique, je reviens sur mon app Cordova et la surprise…idem, même erreur ! Je ne pige pas…et j’en ai marre de passer des heures la dessus. Je passe à autre chose..

Connection Facebook API sur Apache Cordova

J’ai toujours eu du mal à gérer l’API de Facebook. Même si j’arrive à mes fins, je passe un temps fou à essayer de faire marcher du code, et ça me frustre à un point… J’ai écrit mon premier article sur l’intégration de l’API Facebook en 2012, il y a plus de 3 ans. Je pense avoir joué avec bien avant. Donc cela fait quelques années que je devrais connaitre ce genre de problématique par cœur. Pourtant j’ai toujours l’impression de repartir à zéro et d’être un débutant sur le sujet. Je reproche à Facebook d’avoir eu une doc déplorable pendant de nombreuses années (c’est mieux depuis qq temps). De plus rien en Français, c’est pas encourageant depuis le temps ! Mais je comprends, vu que ça change tous les 6 mois, ils n’ont pas envie de tout retraduire sans doute… C’est moins le cas je pense depuis un moment, mais je me rappelle avoir écrit du code qui ne fonctionnait plus 6 mois après. Et plusieurs fois. D’où l’impression de repartir à zéro. Cet article sera sans doute modifier dans les prochaines semaines, car pas mal de choses ne fonctionnent pas bien encore. Je vais lister ici mes expériences concernant l’intégration de l’API Facebook dans une application Cordova. Voici plusieurs pistes : Piste 1 : Api Facebook Officielle Je n’arrive pas à la faire marcher. J’ai toujours des erreurs, voir pas d’erreur ce qui est pire quand l’application ne fonctionne pas. A priori je ne suis pas le seul : article. Le code getting started fonctionne sur un site web mais pas dans une appli Cordova. Mon problème est résumé dans cet article :http://blog.reactor.fr/post/2015/10/29/connection-facebook-api-sur-une-page-web-en-2015 Je ne travaille plus dessus, j’y ai passé trop de temps. Piste 2 : ngCordovaOAuth Article : http://www.sitepoint.com/how-to-integrate-facebook-login-into-a-cordova-based-app/Mon code sur GitHub : https://github.com/couscousbzh/Matador Ce code fonctionne. Par contre il utilise ngCordova et ngCordovaOauth.Ce n’est pas un problème si on maitrise Angular, ce qui n’est pas encore le cas pour moi. J’aurais aimé dans un premier temps m’en passer. Encore une fois ce code fonctionne mais dès que j’essaie de décomposer, refactoriser ce code je me heurte à d’autre problèmes. Et je perds du temps. Piste 3 : Oauth.io J’utilise un service, https://oauth.io/, gratuit pour les devs, payant par la suite. Le code est simple et rapide à mettre en place. Voici deux applications pour vous permettre de le prendre en main (voir aussi mon précédent article) : https://github.com/couscousbzh/OAuthIOTest1 https://github.com/couscousbzh/OAuthIOTest2 Le premier permet de comprendre les mécanismes de login/logoutLe second tente d’exploiter les APIs. Le bilan est mitigé car : Avantages :- Simple à mettre en place- Accès à un dashboard qui permet d’avoir des informations sans doute très utiles pour le dev et la prod- Multi-Tiers, on peut y brancher tout un tas d’API (Facebook, Twitter, Instagram…)- Poster un message sur le mur de Facebook est simple à mettre en place. Inconvénients :- limité. J’ai tenté de poster une photo depuis le mobile directement sur les photos de facebook. J’ai pas réussi, pas de doc la dessus. – support limité ou inexistant. Suite à mon problème, j’ai posté une question sur StackOverflow, ce que recommande la FAQ de leur site. Mais Aucune réponse pour l’instant de OAuth.io. Si c’est payant par la suite, j’aurais aimé avoir un peu de support. Piste 4 : phonegap-facebook-plugin Le plugin phonegap-facebook-plugin propose de créer un pont avec le SDK Facebook natif et votre code Javascript. Ce qui permettrait de pouvoir par exemple loguer le user directement dans notre app (si l’application officielle Facebook est installé sur le device apr exemple) Voici le repo GitHub : https://github.com/Wizcorp/phonegap-facebook-plugin A la lecture de cet article, je n’ai pas eu envie de me casser la tête. L’article a plus d’un an et depuis le set up à l’air d’avoir évolué (par exemple, il n’est plus nécessaire de faire de manipulation sur Eclipse). Je le mets de coter pour le travailler éventuellement plus tard. Piste 5 : OpenFB OpenFB est une micro librairie pour l’intégration de Facebook en Javascript dans une application browser/Cordova. Ca tombe bien c’est le sujet de cet article. Cette lib utilise l’api Rest de Facebook, ce qui permet de « contourner » la lib officielle Javascript de Facebook. article intéressant : http://kmturley.blogspot.fr/2014/10/facebook-login-inside-hybrid-app-using.htmlrepo GiHub : https://github.com/ccoenraets/OpenFB J’ai testé OpenFb rapidement, en copiant collant bêtement leurs codes et en ajoutant qq fonctionnalités. Pour l’instant j’arrive très bien à le faire fonctionner sur Android. Par contre, gros soucis sur iOS : page blanche lors d’un login…Si quelqu’un à un tuyau… J’ai fait un article sur le setup de l’application sur Facebook Conclusion : L’intégration de Facebook reste toujours une tâche difficile, même en cette fin d’année 2015. J’ai voulu partager mon expérience en ouvrant plusieurs pistes. Pour ma part, la plus simple et rapide est oAuth.io, mais c’est payant. OpenFb est aussi un bon choix et j’ai réussi à aller jusqu’au bout (en dev) sur Android. Par contre, je n’arrive à rien sur iOS, dans tous les cas. Help !