How to configure OAuth with Goodreads - javascript

I am building an app using HTML, CSS, and Javascript, and am trying to configure OAuth to use it to access data from the Goodreads API. I basically want to get a list of books that a Goodreads member has read in the current year and display statistics about the metadata of these books. I'm pretty new to Javascript and using API's and don't have a super good grasp on OAuth and API authentication in general so I would really appreciate it if it could be explained as simply as possible.
From what I understand I need to create a login button on my page that contains a link that looks something like this:
http://www.goodreads.com/oauth/authorize?oauth_token=SCDMymQWcIE8GnxmSA
When the user clicks this button they'll visit goodreads.com where they'll login to their account. After accepting the permissions, the user will be redirected to back to your site along with an access token that would contain the user's ID. At this point I would use the user ID to pull data about the books on their shelves.
I'm not really sure how to go about writing this in my Javascript file though. How do I go about authorizing via OAuth and storing the user's ID? From the Goodreads Developers group it seems like the Goodreads API uses OAuth 1.0 which I believe is relevant to how I will need to approach this.

Related

Seeking decent documentation on creating a way to link a Google account with my app

I'm trying to develop a react native application that won't require a user to sign into a bunch of different services every time. For now I'm trying to get the google side of things setup where a user can click a button which will allow me to link my application to there Google user account so that when they next visit the app the don't need to log into google for the functionality to continue to work.
I'm having a hard time finding documentation about how this link can be set up but I have found this page on Google which suggests it's possible.
https://myaccount.google.com/accountlinking?hl=en-GB&pli=1
The idea would be a bit like last.fm handles Spotify. a simple login and approve the service will mean that last.fm can listen to the Spotify account without requiring further auth every time its doing said functionality.
I can't find much in terms of tutorials or documentation on this specific thing.
Google OAuth and Scopes
It sounds like you're looking to implement Google identity federation in your app - specifically, OAuth 2.0. Google gives you quite a few options depending on the complexity of your authenticated user experience.
As for permissions, the Google API documentation calls these scopes. Here's a list of all the available scopes for every Google API. Setting scopes can take a few additional steps depending on which Google apps/information your app needs access to. By default, the Google API scopes for a new project are email, profile, and openid. Here's a video explaining how to view and modify the scopes in the Google API console(mentioned below).
1. Google Sign-in Button with scopes
The simplest method would be to follow this guide from Google which explains how to set up Google Auth on the frontend.
In short, you first set up a project within the Google API Console. Create a new project and take a look at your project scopes by clicking the Credentials tab, then the OAuth Consent Screen tab. Then back in your frontend code, include a script tag to call the Google API related to authentication functionality. Next, include a meta tag containing the client key found in the Google API Console. Then just create a sign in button with a certain class and data attribute(mentioned in the guide) and users should be able to sign in. This will return a small amount of user data in your code which you can use for validation within your app.
2. Firebase with scopes
A more complex solution would be Firebase authentication which returns even more user data, the use of a database to save and retrieve data related to the user and their session, and many other handy features that would normally be time consuming to develop. As such, Firebase is often called a backend as a service(BaaS).
To get the same level of granularity of scopes as the standard OAuth scenario outlined above, you may need to use a combination of the two as described in this article from Fireship.io.

Implementing Facebook's Graph API without user authentication

I'm newbie to Facebook Graph API and Facebook JavaScript SDK but I'd like to know some things:
Is there any way to put my Access Token in a Open Source application without actually showing it? I'm using GitHub and for security purposes I'd like to make it private.
Can I show my user information without asking the users to Authenticate themselves?
Where in Facebook Developers App can I allow more "scopes" to share publicly? For example, user_photos, user_posts, user_likes, user_status, etc...
These "scopes" that Facebook allows by default are actually the information I'm getting from the user while I'm Authenticating them right?
Just to clarify what I'm trying to do, I want to share things about my Facebook Account through the Facebook Graph API in the gh-pages branch on GitHub, but I don't like the idea of having to authenticate every single user that has access to the page.
I'd like to make my user information public, but don't want to show my access token, because it's Open Source and it can get dangerous eventually.
If you'd like to see my repository and have a better understanding of the project. You can access https://github.com/iszwnc/rye
If I recap:
you don't want to share your app access token (good!),
you don't want your users to authenticate.
Basically, you can't hide your token and let your users query Facebook directly. You need some server-side code on a machine that would be the only one reaching Facebook. Your server would play the role of an interface between Facebook and your users. So you will have to:
do the API calls from a server using server-side code (i.e. Node.js),
save the information you want in a database. This is optional but better to avoid the same information to be retrieved multiple times, thus avoiding your future 100 users to (voluntarily or not) reach your app API limit.
let the users query your server using some client-side code (i.e. AngularJS) in order to retrieve what you and only you know (remember, you own the token).
About Github, don't share your token on it. People can generate their own token if they want to run your app. Here are several suggestions:
Add your token to an environment variable which you can set just before launching the app (don't forget to mention that in your README),
Add your token to a file:
Create a credentials.js file that contains an empty token:
// Please use your own token
var APP_TOKEN = '';
Commit the file to Github,
Have a .gitignore file that contains the credentials.js,
var APP_TOKEN = 'now-you-can-put-your-token-here';
Good luck with your project, it looks exciting :-)

Generic Facebook User Access Token for public event search

I'm trying to create a Javascript application that has a filterable listing of certain kinds of public Facebook events. The thing is, the FB Graph API requires that you provide a User Access token in order to use the search for public events. I really don't want to make people log in to facebook in order to use the website, especially because ANY facebook user's credentials are sufficient to query the events I want to query (ie the search is independent of any user credentials, I just need them because the fb api requires me to have a user access token.)
Do y'all have any suggestions for a work around? I'm thinking about providing my own credentials securely, and just using them to make the actual queries. The thing is I would potentially need to be doing A LOT of queries per minute, so this might not be terribly realistic. Any suggestions would be helpful.
Simply do this server-side not client-side.
You just need an app token (no user token) to do this search, but using this client-side is a bad idea since it would expose your app token publicly.

Facebook Login JS vs PHP SDK and how to keep track of users locally

A very simple question which I've seen kinda answers to.
Can you do a facebook login with PHP to authenticate a user and grab information?
Why then is there a JS version?
I just don't understand the difference between the two above options.
My web app will need to gleen the users email address as there will be a mailing list component to signing up for our service.
How do you manage this local information and uniquely identify the user each time they log in from facebook? Do you store their facebook ID?
Thanks
1- Yes - https://developers.facebook.com/docs/reference/php/
2- So you can do it on the client side.
You can get user's email address if you have appropriate permissions.
Yes you store their facebook id and associate users with it.
They both do the same thing, just on different sides: on the server or on the client.
If your authentication process relies heavily on server interaction and you have your server side code ready, use the PHP SDK. It provids you with methods to get the ID from the user. This will be unique so you can store them.
If you want to manage an application flow, say the user needs to give your website certain permissions in order to view something, it can be easy done with the Javascript SDK.

Using jquery need to display facebook user name in html page

Using jquery (javascript) need to display facebook user name in html page using facebook user id. I am not using facebook api. Any one have any idea.
Without using the facebook API (Graph API or older facebook REST API) either javascript or PHP there's no way you can achive this.
Facebook needs to authenticate your application before you ask for data.
You can use fb:name from FBML (Facebook Markup Language) to achive it easily. But as recoomended, you should not use FBML for new applications since the recommended way is the new Graph API. FBML is in the process of being deprecated.
Using the new Graph API you can get the JSON object for the user by fetching https://graph.facebook.com/{userID}
You need to use the Facebook API as Facebook needs to authenticate your application's requests for user data. (http://developers.facebook.com/docs/api#authorization)
I recommend using the Graph API (http://developers.facebook.com/docs/api), but it takes a bit of work getting started.
I use the PHP SDK (http://github.com/facebook/php-sdk/), though others also exist and you can find them in the Facebook Documentation.
However, to answer your question better, If you have your authorization token you can make calls for example:
https://graph.facebook.com/me?access_token=<Your Access token>
would return a JSON object containing your basic information, including your name, birthday, and basically everything that appears on your profile.
Before doing anything you MUST register your own application at www.facebook.com/developers/
(Edit: I was not aware FBML was being phased out)
I know it's an old thread, but so that people doesn't get mislead...
There is NO need for Facebook to authenticate your application before you ask for data like user name because user name is public info and does not require permission. Just call https://graph.facebook.com/{userID} and you will get a JSON object. You can achieve this easily using jquery:
$.get("https://graph.facebook.com/{userID}", function (data) {
alert(data.name);
}, 'jsonp');

Categories

Resources