Can't link Twitter with Satellizer.js - javascript

The Facebook, Google and Yahoo login for satellizer.js was pretty straight forward. All I had to do was create apps with their respective API's, configure them with my homepage's URL. Then I added the app-ids to the app.js file:
$authProvider.facebook({
clientId: 'xxxxxxxxxxxxxxxxx'
});
and lastly I added the app id and secret in the config.js file server-side.
I thought this would be the process with Twitter too, but their API keeps giving me an error saying
Something is technically wrong. Thanks for noticing—we're going to fix
it up and have things back to normal soon.
and no additional information is given, which leaves me with finding the needle in the haystack.
Are there any additional measures that I need to take to make the Twitter authentication work?

Be sure to set the right twitter secret and key.
I had the same problem until I rrealised that there was a space as the first character in the string of my twitter key.
This causes the same behavior you described

Related

TikTok Login Kit web flow - keep getting Redirect URI error (code 10006)

I'm having an issue getting Login Kit to work. Similar to the question asked here I have the correct redirect domain listed in tiktok settings and the redirect_uri is basically just "domain/tiktok" but no matter what I do I get the same error message:
Below is my backend code - it's basically exactly the same as what is listed in the tiktok docs. Any help on this would be much appreciated!
const CLIENT_KEY = 'my_key'
const DOMAIN = 'dev.mydomain.com'
const csrfState = Math.random().toString(36).substring(2);
res.cookie('csrfState', csrfState, { maxAge: 60000 });
const redirect = encodeURIComponent(`https://${DOMAIN}/tiktok`)
let url = 'https://www.tiktok.com/auth/authorize/';
url += '?client_key=' + CLIENT_KEY;
url += '&scope=user.info.basic,video.list';
url += '&response_type=code';
url += '&redirect_uri=' + redirect;
url += '&state=' + csrfState;
res.redirect(url);
UPDATE 8/13/2022
I submitted the app for review and was approved so the status is now "Live in production" instead of "staging". The issue is still there - still showing error message no matter what domain / callback URL I use
UPDATE 8/16/2022
OK so I've made some progress on this.
First off - I was able to get the authentication/login screen to finally show up. I realized to do this you need to:
Make sure that the status of your app is "Live in production" and not "Staging". Even though when you create a new app you may see client_key and client_secret show up don't let that fool you - Login Kit WILL NOT WORK unless your app is submitted and approved
The redirect_uri you include in your server flow must match EXACTLY to whatever value you entered in "Registered domains" in the Settings page. So if you entered "dev.mydomain.com" in Settings then redirect_uri can only be "dev.mydomain.com" not "dev.mydomain.com/tiktok".
I think I might know what the issue is. My guess is that before - on the Settings page you had to enter the FULL redirect URL (not just the domain) and whatever redirect uri was included in the authorization query was checked against this value which was saved in TikTok's database (whatever was entered in the Settings page when path/protocol were allowed). At some point recently, the front-end business logic was changed such that you could only enter a domain (e.g., mydomain.com) on the Settings page without any protocols - however TikTok's backend logic was never updated so during the Login flow they are still checking against an EXACT match for whatever was saved in their DB as the redirect uri - this would explain why an app that was previously using the API with a redirect uri that DOES include protocols (e.g., for Later.com their redirect uri is https://app.later.com/users/auth/tiktok/callback) continues to work and why for any app attempting to save redirect WITH protocols are getting the error message screen. My gut feeling is telling me that the error is not on my part and this is actually a bug on TikTok's API - my guess is it can be addressed either by changing the front-end on the Settings page to allow for path/protocols (I think this is the ideal approach) or to change their backend so that any redirect uri is checked such that it must include 1 of the listed redirect domains.
I've been emailing with the TikTok team - their email is tiktokplatform#tiktok.com - and proposed the two solutions I mentioned above. I suggest if you're having the same issue you email them as well and maybe even link this StackOverflow question so that maybe it will get higher priority if enough people message them about it.
If you're looking for a shot-term hack I'd recommend creating a dedicated app on AWS or Heroku with a clean domain (e.g., https://mydomain-tiktok.herokuapp.com) and then redirect to either your dev or production environment by appending a prefix to the "state" query (e.g., "dev_[STATE_ID]"). I'll just reiterate I consider this a very "hacky" approach handling callbacks and would definitely not want to use something like this in production.
In my case, the integration worked after doing following steps:
In TikTok developers page:
Like #eugene-blinn said: make sure your app is in Live in production status (I couldn't find anything in the documentation about why Staging apps don't work);
Add the Login Kit product to your app and set the Redirect domain field with your host domain, for example: mywebsite.com.
In your code:
From my tests, I could add whanever url path I wanted, the only constraint was that the domain should match with step 2. So, yes, you can add https://mywebsite.com/whatever/path/you/want in redirect_url parameter.
That's it. It should work with these 3 steps.
Additionally, I got other issue related to use specific features in the scope property (like upload or read videos, etc), so here the solution as well:
Only add Video Kit product to the TikTok app and set video.upload or video.list in the scope authorize request won't work unless you also add the TikTok API product in your TikTok app as well. Btw, it neeeds to be approved too.
TikTok fixed the bug that resulted in URL mismatch with redirect domain from working. However, they fixed it only for paths (e.g., /auth/tiktok) but PORT additions still result in an error - so www.domain.com:8080/auth/tiktok won't work but www.domain.com/auth/tiktok WILL work
UPDATE 10/3/2022
Got the following response directly from TikTok engineering team:
At this point, we only support production integrations with TikTok for Developers and require that you have a URL without port number. However, we understand from your communication that this makes it harder for you to build, test, and iterate your integration with us. Unfortunately, at this time, we do not have a timeline for when this additional support for development servers will be added. We request that you only redirect to URLs without port numbers. Thank you for the feedback.
The frontend of the developer's dashboard still rejects protocol and path in validation. However, the backend skips the path validation.
To be able to update the "Redirect domain" simply:
Open dev tools in chrome and go to the "Network" tab.
Clic on "Save changes" button on the dashboard.
Right clic on the "publish" request that appeared and copy as cURL.
Modify the "redirect_domains" field in the request before pasting it in the terminal.
I believe the app still needs to be approved and in production to get it to work. I'm still waiting for approval and it has been a couple of weeks.
UPDATE 9/17/2022
Just like #mauricio-ribeiro, my app worked after it was approved to production. Setting up the redirect domain without path and scheme works just fine.
I had the same problem, my solution:
1.- In my TikTok App dashboard, the “redirect_uri” is: mydomain.com, without http/https and without path (/my-redirect-url). Also you can add subdomains using this rule
2.- In my code, I have to add http or https to the redirect_uri, and feel free to use path (/my-redirect-uri)
I hope this help you

How to deal with the captcha when doing Web Scraping in Puppeteer?

I'm using Puppeteer for Web Scraping and I have just noticed that sometimes, the website I'm trying to scrape asks for a captcha due to the amount of visits I'm doing from my computer. The captcha form looks like this one:
So, I would need help about how to handle this. I have been thinking about sending the captcha form to the client-side since I use Express and EJS in order to send the values to my index website, but I don't know if Puppeteer can send something like that.
Any ideas?
This is a reCAPTCHA (version 2, check out demos here), which is shown to you as the owner of the page does not want you to automatically crawl the page.
Your options are the following:
Option 1: Stop crawling or try to use an official API
As the owner of the page does not want you to crawl that page, you could simply respect that decision and stop crawling. Maybe there is a documented API that you can use.
Option 2: Automate/Outsource the captcha solving
There is an entire industry which has people (often in developing countries) filling out captchas for other people's bots. I will not link to any particular site, but you can check out the other answer from Md. Abu Taher for more information on the topic or search for captcha solver.
Option 3: Solve the captcha yourself
For this, let me explain how reCAPTCHA works and what happens when you visit a page using it.
How reCAPTCHA (v2) works
Each page has an ID, which you can check by looking at the source code, example:
<div class="g-recaptcha form-field" data-sitekey="ID_OF_THE_WEBSITE_LONG_RANDOM_STRING"></div>
When the reCAPTCHA code is loaded it will add a response textarea to the form with no value. It will look like this:
<textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="... display: none;"></textarea>
After you solved the challenge, reCAPTCHA will add a very long string to this text field (which can then later be checked by the server/reCAPTCHA service in the backend) when the form is submitted.
How to solve the captcha yourself
By copying the value of the textarea field you can transfer the "solved challenge" from one browser to another (this is also what the solving services to for you). The full process looks like this:
Detect if the page uses reCAPTCHA (e.g. check for .g-recaptcha) in the "crawling" browser
Open a second browser in non-headless mode with the same URL
Solve the captcha yourself
Read the value from: document.querySelector('#g-recaptcha-response').value
Put that value into the first browser: document.querySelector('#g-recaptcha-response').value = '...'
Submit the form
Further information/reading
There is not much public information from Google how exactly reCAPTCHA works as this is a cat-and-mouse game between bot creators and Google detection algorithms, but there are some resources online with more information:
Official docs from Google: Obviously, they just explain the basics and not how it works "in the back"
InsideReCaptcha: This is a project from 2014 which tries to "reverse-engineer" reCAPTCHA. Although this is quite old, there is still a lot of useful information on the page.
Another question on stackoverflow: This question contains some useful information about reCAPTCHA, but also many speculative (and very likely) outdated approaches on how to fool a reCAPTCHA.
You should use combination of following:
Use an API if the target website provides that. It's the most legal way.
Increase wait time between scraping request, do not send mass request to the server.
Change/rotate IP frequently.
Change user agent, browser viewport size and fingerprint.
Use third party solutions for captcha.
Resolve the captcha by yourself, check the answer by Thomas Dondorf. Basically you need to wait for the captcha to appear on another browser, solve it from there. Third party solutions does this for you.
Disclaimer: Do not use anti-captcha plugins/services to misuse resources. Resources are expensive.
Basically the idea is to use anti-captcha services like (2captcha) to deal with persisting recaptcha.
You can use this plugin called puppeteer-extra-plugin-recaptcha by berstend.
// puppeteer-extra is a drop-in replacement for puppeteer,
// it augments the installed puppeteer with plugin functionality
const puppeteer = require('puppeteer-extra')
// add recaptcha plugin and provide it your 2captcha token
// 2captcha is the builtin solution provider but others work as well.
const RecaptchaPlugin = require('puppeteer-extra-plugin-recaptcha')
puppeteer.use(
RecaptchaPlugin({
provider: { id: '2captcha', token: 'XXXXXXX' },
visualFeedback: true // colorize reCAPTCHAs (violet = detected, green = solved)
})
)
Afterwards you can run the browser as usual. It will pick up any captcha on the page and attempt to resolve it. You have to find the submit button which varies from site to site if it exists.
// puppeteer usage as normal
puppeteer.launch({ headless: true }).then(async browser => {
const page = await browser.newPage()
await page.goto('https://www.google.com/recaptcha/api2/demo')
// That's it, a single line of code to solve reCAPTCHAs 🎉
await page.solveRecaptchas()
await Promise.all([
page.waitForNavigation(),
page.click(`#recaptcha-demo-submit`)
])
await page.screenshot({ path: 'response.png', fullPage: true })
await browser.close()
})
PS:
There are other plugins, even I made a very simple one because captcha is getting harder to solve even for a human like me. You can read the code here.
I am strongly not affiliated with 2Captcha or any other third party services mentioned above.
I had created my own solution which is similar to the other answer by Thomas Dondorf, but gave up soon since Captcha is getting more ridiculous and I do not have mental energy to resolve them.
Proxy servers can be used so that the destination site does not detect a load of responses from a single IP address.
(Translated into Google Translate)
I tried #Thomas Dondorf suggestion, but I think the problem with the steps described in "How to solve the captcha yourself" section is that the token of the CAPTCHA it's valid only one time.
I'll try to explain everything in detail below.
WHAT I'M USING
I'm using as first browser (the one that will not solve the captcha) Google Chrome, and as a second browser (the one where i solve the captcha and i take the token) Firefox.
STEPS
I manually solve the captcha on this site https://recaptcha-demo.appspot.com/recaptcha-v2-checkbox.php
I type the following code document.querySelector('#g-recaptcha-response').value in the google chrome console, but I get an error (VM22:1 Uncaught TypeError: Cannot read property 'value' of null
at :1:48), so I just search the token by opening Elements in Google Chrome and searching g-recaptcha-response with CTRL+F
I copy the token of the recaptcha (here is an image to show where the token is, after the text highlighted in green)
I type the following code document.querySelector('#g-recaptcha-response').value = '...'in the firefox console, replacing the "..." with the recaptcha token just copied
I get the following error and, if you then click on the documentation linked, you'll read that the error is due to the fact that a token can be used only one time, and it has of course already been used for the CAPTCHA you just solved to obtain the token itself (so it seems that the only objective of the token it's to say that the CAPTCHA has already been solved, it seems a sort of defense measurement to prevent replay attacks, as said here in the official documentation of the recaptcha.

Google sign in button with automatic approval of authorizations

I've seen many threads about it but cannot find a satisfying answer: when using the Google sign-in button (https://developers.google.com/identity/sign-in/web/sign-in), is it possible to already have the authorizations accepted ? Like if I add the client ID of my app somewhere in the Google console ?
For now I'm calling the auth2.grantOfflineAccess when clicking the button (so I can pass the returned code to my backend and make sure the user is from the expected domain).
If you're able to answer the first question and - bonus point - know if what I'm doing after clicking the button is right, you'd be awesome !
Thanks to Steven's comment, I'm now able to have the authorizations accepted by default. Be aware there will still be a second popup (after the one that requests your email and password) to inform you that your admin has granted the app to access your data. Only at your first connection though.
So what you need to do is to follow the third step of this document. They say you only need the plus.me and userinfo.email scopes if you only request the basic profile of the user but it was not working in my case, I also needed the userinfo.profile scope (because I use grantOfflineAccess() ?).

Google Maps JavaScript API RefererNotAllowedMapError

We're trying to develop an geoplacement app for one of our clients, and we want first to test it in out own domain.
We have signed for Google Maps JavaScript API, and we have a valid browser key and our domain, www.grupocamaleon.com, has been authorized to use that key.
But we can't make even the easiest example to run without error.
We have, in our domain and with our key, the following demo:
(1) http://www.grupocamaleon.com/boceto/aerial-simple.html
But it doesn't work, and Firebug console says:
"Google Maps API error: Google Maps API error: RefererNotAllowedMapError (link to Google documentation on RefererNotAllowedMapError) Your site URL to be authorized: (1)"
My credential page is missing the possibility of adding referrers to accept, so solutions involving adding referrers are not possible right now.
My credential Page:
Why do we get that error? How can we fix it?
I know this is an old question that already has several answers, but I had this same problem and for me the issue was that I followed the example provided on console.developers.google.com and entered my domains in the format *.domain.tld/*. This didn't work at all, and I tried adding all kinds of variations to this like domain.tld, domain.tld/*, *.domain.tld etc.
What solved it for me was adding the actual protocol too; http://domain.tld/* is the only one I need for it to work on my site. I guess I'll need to add https://domain.tld/* if I were to switch to HTTPS.
Update: Google have finally updated the placeholder to include http now:
Come on Google, you guys are smarter than the API Credential page lets on. (I know because I have two sons working there.)
The list of "referrers" is far pickier than it lets on. (Of course, it should be more forgiving.) Here are some rules that took me hours to discover:
The order in the list is important. Moving your URL up in the list may make it work.
"http://" prefix is required.
Even "localhost" needs it: "http://localhost/foo/bar.html"
A trailing * as a wildcard seems to work as if it is a string compare.
Even with "http://localhost/foo/bar.html", "http://localhost/foo/bar.html?arg=1" will not work. (Will a wildcard help?)
For both prod dev, have (at least) two rows: "http://localhost/foo/bar.html" and "http://my.site.com/foo/bar.html"
A port number (8085? 4000?) does not seem to be necessary.
There are probably other rules, but this is a tedious guessing game.
Wildcards (asterisks) ARE NOT allowed in the subdomain part.
WRONG: *.example.com/*
RIGHT: example.com/*
Forget what Google says on the placeholder, it is not allowed.
According to the documentation, 'RefererNotAllowedMapError' means
The current URL loading the Google Maps JavaScript API has not been
added to the list of allowed referrers. Please check the referrer
settings of your API key on the Google Developers Console.
I have the Google Maps Embed API set up for my own personal/work use and thus far have not specified any HTTP referrers. I register no errors. Your settings must be making Google think the URL you're visiting is not registered or allowed.
Just remind that if you just change it, it may take up to 5 minutes for settings to take effect.
I tried many referrer variations and waiting 5 minutes as well until I realized the example Google populates in the form field is flawed. They show:
*.example.com/*
However that only works if you have subdomain. or www. in front of your domain name. The following worked for me immediately (omitting the leading period from Google's example):
*example.com/*
According the google docs
this happened because the url on which you are using the Google Maps API, it not registered in list of allowed referrers
EDIT :
From Google Docs
All subdomains of a specified domain are also authorized.
If http://example.com is authorized, then http://www.example.com is also authorized. The reverse is not true: if http://www.example.com is authorized, http://example.com is not necessarily authorized
So,Please configure http://testdomain.com domain, then your http://www.testdomain.com will start work.
Check you have the correct APIS enabled as well.
I tried all of the above, asterisks, domain tlds, forward slashes, backslashes and everything, even in the end only entering one url as a last hope.
All of this did not work and finally I realised that Google also requires that you specify now which API's you want to use (see screenshot)
I did not have ones I needed enabled (for me that was Maps JavaScript API)
Once I enabled it, all worked fine using:
http://www.example.com/*
I hope that helps someone! :)
The Problem
Google suggests the format *.example.com/*This format does not work.
The Solution
Check the browser console for the Google Maps JavaScript API error: RefererNotAllowedMapError
Underneath the error it should have: "Your site URL to be authorized: https://example.com/".Use that url for the referrer and add a wildcard * to the end of it (https://example.com/*, in this case).
I found that even your HTTP Referreres are valid enough, wrong set of API Restrictions causes Google Maps JavaScript API error: RefererNotAllowedMapError.
For example:
You are using Javascript API for the key.
Add http://localhost/* to Application Restrictions / HTTP Referrences
Choose Maps Embed API instead of Maps Javascript API
This causes RefererNotAllowedMapError
There are lots of supposed solutions accross several years, and some don’t work any longer and some never did, thus my up-to-date take working per end of July 2018.
Setup:
Google Maps JavaScript API has to work properly with…
multiple domains calling the API: example.com and example.net
arbitrary subdomains: user22656.example.com, etc.
both secure and standard HTTP protocols: http://www.example.com/ and https://example.net/
indefinite path structure (i.e. a large number of different URL paths)
Solution:
Actually using the pattern from the placeholder: <https (or) http>://*.example.com/*.
Not omitting the protocol, but adding two entries per domain (one per protocol).
An additional entry for subdomains (with a *. leading the hostname).
I had the feeling that the RefererNotAllowedMapError error still appeared using the proper configuration (and having waited ample time). I deleted the credential key, repeated the request (now getting InvalidKeyMapError), created new credentials (using the exact same setup), and it worked ever since.
Adding mere protocol and domain seemed not to have included subdomains.
For one of the domains, the working configuration looks like this:
(As text:)
Accept requests from these HTTP referrers (web sites)
https://*.example.com/*
https://example.com/*
http://*.example.com/*
http://example.com/*
None of these fixes were working for me until I found out that RefererNotAllowedMapError can be caused by not having a billing account linked to the project. So make sure to activate your free trial or whatever.
This is another sh1tty Google product with a terrible implemenation.
The problem I have found with this is that if you restrict an API key by IP address, it wont work... BUT far be it from Google to make this point clear... It wasn't until troubleshooting and researching I found:
API keys with an IP addresses restriction can only be used with web
services that are intended for use from the server side (such as the
Geocoding API and other Web Service APIs). Most of these web services
have equivalent services within the Maps JavaScript API (for example,
see the Geocoding Service). To use the Maps JavaScript API client side
services, you will need to create a separate API key which can be
secured with an HTTP referrers restriction (see Restricting an API
key).
https://developers.google.com/maps/documentation/javascript/error-messages
FFS Google... Pretty important piece of information that would be good to clarify on setup...
Accept requests from these HTTP referrers (web sites)
Write localhost directory path
I experienced the same error:
This link talks about how to set up API key restrictions: https://cloud.google.com/docs/authentication/api-keys#adding_http_restrictions
In my case, the problem was that I was using this restriction:
HTTP referrers (web sites) Accept requests from these HTTP referrers
(web sites) (Optional) Use *'s for wildcards. If you leave this blank,
requests will be accepted from any referrer. Be sure to add referrers
before using this key in production.
https://*.example.net/*
This means that URLs such as https://www.example.net or https://m.example.net or https://www.example.net/San-salvador/ would work. However, URLs such as https://example.net or https://example.net or https://example.net/San-salvador/ would not work. I simply needed to add a second referrer:
https://example.net/*
That fixed the problem for me.
I add 2 website domains, set "*" in subdomain is not working but specific subdomain "WWW" and non-subdomain have been worked for my websites using the same Google Map API key.
dont' use "*" in subdomain
Hope it help.
That your billing is enabled
That your website has been added to Google Console
That your website is added to the referrers in your app.
(do a wildcard for both www and none www)
http://www.example.com/* and http://example.com/*
That Javascript Maps is enabled and you are using the correct credentials
That the website has been added to your DNS to enable your Google Console above.
Smile after it works!
Enable billing for Google project fixed the problem.
you show a screenshot of your api credentials page, but you have to click on "Browser key 1" and go from there to add referrers.
For deeper nested pages
If you have a project in a folder for example or nested pages
http://yourdomain.com/your-folder/your-page you can enter this in
http://yourdomain.com/*/*
The important part being /*/*/* depending how far you need to go
It seems that the * will not match / or get into deeper paths..
This will give your full domain access, well unless you have deeper nesting than that..
I struggled to make this work as well, but here are some pointers:
The URLs set as referrers include http, e.g. http://example.com/*
Google Maps JavaScript API was enabled
Billing was set-up on this account
Once all of this above was resolved, the maps displayed as expected.
http://www.example.com/* has worked for me after days and days of trying.
I got mine working finally by using this tip from Google:
(https://support.google.com/webmasters/answer/35179)
Here are our definitions of domain and site. These definitions are specific to Search Console verification:
http://example.com/ - A site (because it includes the http:// prefix)
example.com/ - A domain (because it doesn't include a protocol prefix)
puppies.example.com/ - A subdomain of example.com
http://example.com/petstore/ - A subdirectory of http://example.com site
I was attempting to use the Places API (Autocomplete) and had to also enable the Maps Javascript API from within Google Cloud Console before the Places API would work.
Removing the restrictions (to None) worked for me.
In my experience
http://www.example.com
worked fine
But, https required /* at the end
Chrome's Javascript console suggested I declare the entire page address in my HTTP referrer list, in this instance http://mywebsite.com/map.htm Even though the exact address is http://www.mywebsite.com/map.htm - I already had wildcard styles listed as suggested by others but this was the only way it would work for me.
This worked for me. There are 2 major categories of restrictions under api key settings:
Application restrictions
API restrictions
Application restrictions:
At the bottom in the Referrer section add your website url
" http://www.grupocamaleon.com/boceto/aerial-simple.html " .There are example rules on the right hand side of the section based on various requirements.
API restrictions:
Under API restrictions you have to explicitly select 'Maps Javascript API' from the dropdown list since our unique key will only be used for calling the Google maps API(probably) and save it as you can see in the below snap. I hope this works for you.....worked for me
Check your Script:
Also the issue may arise due to improper key feeding inside the script tag. It should be something like:
<script async defer src="https://maps.googleapis.com/maps/api/jskey=YOUR_API_KEY&callback=initMap"
type="text/javascript"></script>
If you are working on localhost then do not include http or https in the url.
Use "localhost" without protocols. I struggled for days and found it working.
Something no one else seems to have mentioned in here that may be important is also this:
Http referrers are case sensitive.
So say you have someone access https://www.example.com/webpage, and someone wrote a link to that page as https://www.example.com/Webpage, you need BOTH entries, otherwise one of them is not going to work (unless you URL-rewrite to remove caps, or replace /Webpage with /*, but in our case, we want to limit down to folders under a certain domain, so this is a pain in the butt).
I feel like this is a bit stupid. Yes, URLs can be case sensitive, but not to the point where you would restrict a folder if its in caps, but not if it's lowercase, right?

Get an access token without being connected to facebook

I need to retrieve a facebook page's list of posts (feed) using their javascript SDK, just like they explain in their docs: https://developers.facebook.com/docs/graph-api/reference/v2.4/page/feed
/* make the API call */
FB.api(
"/{page-id}/posts",
function (response) {
if (response && !response.error) {
/* handle the result */
}
}
);
I need it to be my website's "news section", so users should see it even if they are not connected to facebook.
The problem
Cool, but there is a problem... It returns: An access token is required to request this resource.
Holy cow... I'd like to get some access token for you #facebook, but my app doesn't make use of your authentication tools/plugins.
ANYWAY, I tried with FB.getLoginStatus(); but doesn't work, because the only way it can return an access_token is if the user is actually connected to the application. My users may not even be logged to facebook!
So, ¿How can I get an access_token to be stored into a variable, and later be used to get /{my-page}/posts?
I've already payed a look to this SO question, but it doesn't solves my problem, simply because there are no such "generic tokens".
I've also read https://developers.facebook.com/docs/facebook-login/access-tokens/ and that also relies on tokens generated through facebook login methods... So, can't I display a list of fb page's posts in my website, without being connected into facebook, hence an application?
ADD: My app is build with angularJS, I'm not dealing with server-side code. I shall rely purely on javascript methods.
You could either use an page or an app access token, but as you'd be using them on the client-side, neither of them are an option.
See
https://developers.facebook.com/docs/facebook-login/access-tokens#apptokens
https://developers.facebook.com/docs/facebook-login/access-tokens#pagetokens
Note that because this request uses your app secret, it must never be made in client-side code or in an app binary that could be decompiled. It is important that your app secret is never shared with anyone. Therefore, this API call should only be made using server-side code.
I'd strongly recommend to build a simple server-side script (PHP for example) to proxy the request to the Graph API. You could then call this via AJAX for example and load the posts asynchronously (and alse get rid of the FB JS SDK!). There is NO way to handle this in a secure manner if you don't want to use FB Login for all of your users (which also doesn't make much sense IMHO).
I think it's straightforward :)
Since pages' posts are always public, it only needs a valid access token to retrieve page posts.
Quoting what you've written:
So, ¿How can I get an access_token to be stored into a variable, and later be used to get /{my-page}/posts?
You only require an access token.
My suggestion would be;
- Generate an access token for yourself (no extra permission needed)
- request page-id/posts
This way you don't require other users to be connected to facebook, you can simply requests page-id/posts to retrieve posts with access token you generated for yourself.
I hope it solves your problem :D
TIP: As long as posts are public, you only require a valid access token, it doesn't need to be user or page specific.

Categories