I'm using javascript for the facebook login, and for posting action.
The problem is, if I login on facebook on the page A, I cannot post on a page B because I lost all the facebook information and I have to re-init and to re-log on facebook for posting on a other...
and I would like have a login page, and after the user could navigate on the website and post from any page.
Is there a way to fix that by using the cookie? or anything else? I looked for getting back but cookie but I still not find out how...
Thanks
You'll want to persist the Facebook authentication token somewhere, such as a database. Then, using the javascript API to check if the user is logged in:
window.fbAsyncInit = ->
FB.init(appId: '<%= ENV["FACEBOOK_APP_ID"] %>', cookie: true)
$('#sign_in').click (e) ->
e.preventDefault()
FB.login (response) ->
window.location = '/auth/facebook/callback' if response.authResponse
There are several moving parts to a Facebook web app, including client and server authentication. You should check out this Railscast which very thoroughly describes the process:
http://railscasts.com/episodes/360-facebook-authentication
and you can even pull source code: http://media.railscasts.com/assets/episodes/sources/360-facebook-authentication.zip
Related
I am new to javascript. I'm creating a login webpage with auth0, if the user enters the correct id/password the auth0 login API will redirect them back to the application, they are calling from based on their redirect URL.
I want to add a feature where if they don't accept terms and conditions, they would be redirected back to the application they are calling from via redirect URL.
Is it possible? I tried to search online but could not find any proper documentation. can anyone please advise?
shouldn't there be any param in the URL when they get directed to your application? i think there should be a param in the URL that you can use to redirect them back.
I found the solution, I had to user callback URLs with the error message.
Solution for this in Vue.js
<a v-on:click="f1()">..</a>
f1: function() {
window.location.href = "myapp://callback?error=MyCustoomrErrorMessage";
},
I'm developing an application which I'm writing in Angular 6 framework.
Currently, I would like to add user login by social media like: Facebook, Google, Twitter, Github, LinkedIn.
I have a four buttons for these actions in my SocialLoginComponent's template:
Now I'm trying to implement user login by facebook after clicking on CONNECT WITH FACEBOOK button which has an click angular action:
<button (click) = "loginWithFacebook()" class="social-button" id="facebook-connect"> <span>Connect with Facebook</span></button>
Implementation of function loginWithFacebook looks like:
loginWithFacebook() {
this.auth.loginByFacebook(this.apiKey, this.redirectUri).subscribe({
next: (v) => console.log(v)
});
}
Here auth is of course service injected by constructor:
constructor(private auth: AuthService) {
}
Below I show implementation method loginByFacebook method in my AuthService:
loginByFacebook(appId, redirectUri) {
const facebookParams = new HttpParams()
.set('client_id', appId)
.set('redirect_uri', redirectUri)
.set('response_type', 'token');
return this.http.get(this.facebookUrl, {params : facebookParams});
});
where facebookUrl is the AuthService property:
private facebookUrl = 'https://www.facebook.com/v3.1/dialog/oauth';
I'm setting up here of course parameters based on My Facebook App.
I'm trying to invoke that url by get method in order to obtain a facebook login dialog based on description from tutorial: manualyBuildALoginFlow. I wouldn't like to use JavaScript SDK in my solution.
In current state when I'm clicking on the faecebook button, there is response like below:
I would like to obtain modal dialog with confirmation like below:
In my Get request I add parameter response_type = token in order to obtain Social token. On the below diagram I show what flow I'm trying to achieve:
On above diagram my server is laravel framework which currently handle user login and returns JWT token in order to check that user's logged in to application. Next this token I save in local storage by Angular6 framework.
How could I obtain that redirection with modal window in Angular6? What I'm doing wrong is that redirection dosen't work? What first step should I do in order to implement such authorization using facebook?
I would be greateful for advices.
Best Regards
I'm trying to invoke that url by get method
Which means an AJAX request … and that is of course not possible.
You need to redirect the user to the login dialog URL, not try and request it in the background - for the simple reason, that users need to be able to verify via the browser address bar, that they are indeed entering their login credentials to Facebook, and not some phishing site. If you requested it via AJAX and displayed it “within” your page, that would not be possible.
I've implemented method as misorude suggests in my Auth Service:
loginWithFacebook(appId: number, redirectUri: string) {
window.location.href = `https://www.facebook.com/v3.1/dialog/oauth?client_id=${appId}&redirect_uri=${redirectUri}&response_type=token&display=popup`;
}
Currently the page redirects to my Facebook app. Next I confirm my login by Facebook in dialog window. Then browser redirect back to my Angular app and in my url I have Social token from Facebook like on the picture below:
Next I'd like to obtain this token from url and then to implement the data flow as below:
How should I correctly get an access token and post to my backend Server as on the schema above?
I would be greateful for help
Best regards
I have a web app running on a local server that I can log into Facebook through.
I have been trying to add or delete comments from Posts are made by me and on my timeline.
When I try to execute the FB.api() call I get a failed response saying that I need a Page Access Token. The thing is, I've been looking around a lot and have seen nowhere a mention of a Page Access Token for a specific Persons profile.
Through experimenting I've been able to:
Get a Page Access Token for a non-profile Page that I own
Add/Delete Comments/Posts on that non-profile page
Add/Delete Posts made by the app on my profile
Display all Posts/Comments on my profile
What I want to do:
Be able to delete/add comments on Posts on MY profile
What I've tried:
GET request for {my-id}?field=access_token. I figured that if it worked for a non-profile page, it would work for my profile. It didn't work.
A lot of googling
My Assumptions:
I need a Page Access Token for my own profile if I want to add/delete things that were not made by the app
A Page Acess Token for a profile exists.
Below is an example of a FB.api call that would return a response saying:
"Publishing comments through the API is only available for page access tokens"
FB.api(`${comment_id}`, 'DELETE', function(response) {
console.log(response);
});
I really just need someone to give me some concrete answers.
I'm using chrome.identity in a packaged app to get a user token using Facebook. I call chrome.identity.launchWebAuthFlow, and I need to take the access token, send it to the server, and then access token is used to verify the user.
Works great with Google+. But for some reason, it doesn't work for Facebook. For some reason, Facebook's OAuth appears to be special. I've added the extensionid.chromiumapp.org to the list of redirect URLs in the API. Added
"https://extensionid.chromiumapp.org/*",
"https://facebook.com/*",
"https://www.facebook.com/dialog/",
"https://graph.facebook.com/*"
to manifest.json. But nothing changed.
In calling chrome.identity.launchWebAuthFlow I use URL like this
"https://www.facebook.com/dialog/oauth/access_token?" +
"client_id=myclientid&client_secret=myclientsecret&" +
"response_type=token&grant_type=client_credentials"
When I try to invoke it, I get the following error message:
«launchWebAuthFlow completed Object {message: "Authorization page could not be loaded."} »
And when I use URL like
«"https://www.facebook.com/dialog/oauth?client_id=myclientid&redirect_uri=https://myextensionid.chromiumapp.org/facebook.com=token&scope=user"»
I get the next error:
«launchWebAuthFlow completed Object {message: "User interaction required."} undefined »
I try to get facebook token in 4 days. I am tired. What I do wrong?
Why chrome.identity.getAuthToken work great for Google+ and chrome.identity.launchWebAuthFlow dont with Facebook?
I hope someone have done the same things and can help me.
I have solved the problem. Here is an example https://github.com/blackgirl/Facebook_Oauth2_sample_for_extensions
The "User interaction required." message means that the user needs to sign in to Facebook, and/or approve the requested OAuth scopes. The setting the { interactive: true } flag would allow identity.launchWebAuthFlow to display a window where the user would perform these steps. Since you are passing the { interactive: false } flag, identity.lauchWebAuthFlow fails.
https://www.facebook.com/dialog/oauth is most likely the URL you want to use to start your flow. The client_credentials grants are normally for cases where you are accessing resources owned by your app, rather than resources owned by a specific user.
However if you did want to debug that "Authorization page could not be loaded" case, the way to do it would be to open up chrome://net-internals and look for error responses coming back from Facebook.
chrome.identity.launchWebAuthFlow(
{'url': 'https://www.facebook.com/dialog/oauth?client_id=myclientid&redirect_uri=https://myextensionid.chromiumapp.org/facebook.com=token&scope=user, 'interactive': true},
function(redirect_url) {
/* Extract token from redirect_url */
console.log(redirect_url);
});
//'interactive': true
what will this flag do, will show a dialog box asking username and password
upon successful login it will ask for grant access just press that and
you will receive redirect url in above function body.
This whole Facebook access_token thing is driving me nuts. All I want to do is fetch a user's public Facebook posts.
It used to work by simply doing:
$.getJSON('http://graph.facebook.com/USERNAME/posts?limit=LIMIT&callback=?', function (posts) {
// Posts available in "posts" variable
});
But now I get the "access_token required" error.
Trust me; I've checked the docs, Googled all over and checked similar questions on SO but I'm really hoping there's a more straight forward way of doing this than what I've seen.
Do you really have to create a Facebook App (I don't even have an account), make the user "accept" the app and login etc for this to work?
With Twitter it's just as easy as it used to be with Facebook.
You really have to create a Facebook App (You need to have an account), make the user "accept" the app and login etc for this to work.
However you can search public posts of user (not a specific user) by facebook's public search api.
e.g.
https://graph.facebook.com/search?q=hello&type=post
This will search all posts with hello keyword in it.
Reference ( you need to have facebook account to see this page )
http://developers.facebook.com/docs/reference/api/
Edit (after seeing comments):
If you want to access public posts of your own page. You can pull it without any login from user (but you will need an access_token)
Generate an offline access_token from here,
http://developers.facebook.com/tools/explorer.
Then you can use that token to pull data . Thus no need of logging on by user.
https://graph.facebook.com/wesellwine/posts?access_token=<access_token from graph api explorer>