How to simply use facebook login for my app without using the SDKs? - facebook

Is there a simple flow (hello world) for a user to login using facebook?
Found documentation on Manually Build a Login Flow, but is too full of text and details that I don't see the main flow.

Based on Manually Build a Login Flow (showing only the minimal data needed to make it work):
Create a facebook app.
Simulate the user clicking on the following authentication URL to allow the app to access the user's data: https://www.facebook.com/v2.8/dialog/oauth?client_id=<app id>&redirect_uri=http://localhost/
Click ok/accept/whatever to authorize access.
You get redirected by facebook to a URL of the following: http://localhost/?code=<code>
Take the code and invoke the following: curl 'https://graph.facebook.com/v2.8/oauth/access_token?client_id=<app id>&redirect_uri=http://localhost&client_secret=<app secret>&code=<code>'
You get a result like the following: {"access_token":"<access token>","token_type":"bearer","expires_in":5183924}
You can then use the access token to call API related to the user that gave the permissions to your app. Example: curl 'https://graph.facebook.com/v2.8/me?access_token=<access token>'
Example response: {"name":"Alik Elzin","id":"<app related user id>"}
* Remember to add http://localhost/ to the app's Valid OAuth redirect URIs - under app settings.

Have you checked out this documentation from Facebook? It's pretty short to read through: https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow

Related

How to track URL in flutter with website platform

I want to do oAuth2 verification in my website login page and after that I want to get token from url with same page but issue is i can`t able to get URL.
below URL is OAuth2 url using this url I am doing authentication steps with website using flutter.
1st this website will open in browser after that login page will open and after login i will get access_token. But i facing difficulties how i can get access_code with html.window.location function.
I have tried with this code
WidgetsBinding.instance!.addPostFrameCallback((_) {
html.window.location.assign(
'https://example/connect/authorize?response_type=token&client_id=$clientId&redirect_uri=https://example.app/silentRenew&scope=getinfo');
});
Anyone have better solution than please give suggestion.
Pinal! I did an oAuth2 flux recently consuming Gitlab API. I suggest you to use
the oauth2 plugin: oauth2. You just need to have the authorization endpoint, access token endpoint and the redirect url.
After this, you just need to call 3 methods.
Getting your AuthorizationCodeGrant.
var grant = oauth2.AuthorizationCodeGrant(identifier, authorizationEndpoint, tokenEndpoint,secret: secret)
Get Authorization Url.
var authorizationUrl = grant.getAuthorizationUrl(redirectUrl);
Get the returned Code.
await grant.handleAuthorizationResponse(responseUrl.queryParameters);
The method return your code automatically.
In my case, I used a webview instead opening the browser to listen the redirected url's. WebView
You just have to pass the authorizationUrl as the initial page flag inside webview, and listen to the url's with onPageStarted flag. So what you wanna do is: when the redirectUrl ,which gives you the code to authorize your access token, is accessed you call the method 3, only in this moment. I hope this help you, let me know if you struggle with something.

Keycloak - direct user link registration

I have set up a web application with Keycloak in my local machine. Since Im using Keycloak as SSO implementation, I want in my web app that whenever SIGNUP button is click, user is directed into the registration page, and not going through the LOGIN page.
This is the example URL directed to the registration form, however, it contains a tab_id that is generated randomly like a session id.
https://site.test/auth/realms/custom/login-actions/authenticate?client_id=test&tab_id=qIdW92Bvwmk
I read about this link
Yes, as long as you use the "registrations" instead of "auth" in the
end of login ( AuthorizationEndpoint ) URL
But my endpoint in https://site.test/auth/realms/custom/.well-known/openid-configuration cannot be modified.
You can change the button link to this format -
http://<domain.com>/auth/realms/<realm-name>/protocol/openid-connect/registrations?client_id=<client_id>&response_type=code&scope=openid email&redirect_uri=http://<domain.com>/<redirect-path>&kc_locale=<two-digit-lang-code>
The registration page is exposed via an openid-connect endpoint, accessible in the same way as the standard auth screen. To construct the correct URL you can simply replace openid-connect/auth in the URL with openid-connect/registrations from the .well-known auth endpoint.
authEndpoint.replace("openid-connect/auth","openid-connect/registrations");
Using this endpoint the user will be directed to the registration screen instead of the login screen.
It is not documented or exposed via .well-known/openid-configuration, but you can see it in the source code:
public static UriBuilder registrationsUrl(UriBuilder baseUriBuilder) {
UriBuilder uriBuilder = tokenServiceBaseUrl(baseUriBuilder);
return uriBuilder.path(OIDCLoginProtocolService.class, "registrations");
}
For Keycloak 17 this worked for me:
http://<mykeycloakdomain.com>/realms//protocol/openid-connect/registrations?client_id=<myclient_id>&response_type=code&scope=openid+email&redirect_uri=https%3A%2F%2Fmywebsiteurl.com&kc_locale=

Generate access token Instagram API, without having to log in?

So I am building a restaurant app and one of the features I want is to allow a user of the app to see photos from a particular restaurant's Instagram account.
And I want a user to be able to see this without having to login to their Instagram account, so they shouldn't even need an Instagram account for this to work.
So I have read this answer How can I get a user's media from Instagram without authenticating as a user?
And I tried what it said and used the client_id(which I recieved when I registered my app using my personal Instagram account), but I still get an error back saying :
{
meta: {
error_type: "OAuthAccessTokenException",
code: 400,
error_message: "The access_token provided is invalid."
}
}
The endpoint I am trying to hit is :
https://api.instagram.com/v1/users/search?q=[USERNAME]&client_id=[CLIENT ID]
So do I absolutely need an access token for this to work(and thus have to enforce a user to log in) ?
If I do, then is there way to generate an access token somehow without forcing the user log in?
I believe there is a way around this, as the popular dating app Tinder has this desired functionality I am looking for, as it allows you to see photos from people's Instagram account without having to log in! (I have just verified this 5 minutes ago!)
Any help on this would be much appreciated.
Thanks.
Edit April 2018: After facebook privacy case this endpoint is immediately put out of service. It seems we need to parse the JSON embedded in <script> tag directly within the profile page:
<script type="text/javascript">window._sharedData = {"activity_counts":...
Any better ideas are welcome.
You can use the most recent link
GET https://www.instagram.com/{username}/?__a=1
to get latest 20 posts in JSON format. Hope you put this to good use.
edit: other ways aren't valid anymore:
https://www.instagram.com/{username}/media/
Instagram used to allow most API requests with just client_id and without access_token, the apps registered back in the day still work with way, thats how some apps are able to show instagram photos without user login.
Instagram has changes the API specification, so new apps will have to get access_token, older apps will have to change before June 2016.
One way you can work around this is by using access_token generated by your account to access photos. Login locally and get access_token, use this for all API calls, it should not change, unless u change password,if it expires, regenerate and update in your server.
Since the endpoints don't exist anymore I switched to a PHP library -
https://github.com/pgrimaud/instagram-user-feed
Installed this lib with composer:
composer require pgrimaud/instagram-user-feed "^4.0"
To get a feed object -
$cache = new Instagram\Storage\CacheManager();
$api = new Instagram\Api($cache);
$api->setUserName('myvetbox');
$feed = $api->getFeed();
Example of how to use that object -
foreach ($feed->medias as $key => $value) {
echo '<li><img src="'.$value->thumbnailSrc.'"></li>';
}

MVC5 Facebook get users photos

I am building a website app in MVC5 that allows a user to login using Facebook/Twitter. Once they are logged in we will look through their photos for ones marked with a certain hashtag.
I have the login working for both FB and Twitter - and using Linq2Twitter I can get the and post photos.
However with Facebook I am having some problems. My understanding with Facebook is that after the login I have to make a second call to https://graph.facebook.com/oauth/access_token in order to get a short lived access token.
However this call requires a "code" and a returnUri. I am unsure what this code is or how to get it, and what return URI to use.
My startup.Auth.cs looks like this
var facebookOptions = new FacebookAuthenticationOptions();
facebookOptions.Scope.Add("user_photos");
facebookOptions.AppId = ConfigurationManager.AppSettings["facebookAppId"];
facebookOptions.AppSecret = ConfigurationManager.AppSettings["facebookAppSecret"];
app.UseFacebookAuthentication(facebookOptions);
And everything logs in fine and I end back at ExternalLoginCallback
So where do I go from here. How do I find this code and what returnUri do I use in order to get the access code.
Once I have this access code I plan to call (https://developers.facebook.com/docs/graph-api/reference/v2.1/user/photos)
Hopefully I am going about this the correct way and my question makes sense
Many thanks.
Okay - This solves my problem
http://blogs.msdn.com/b/webdev/archive/2013/10/16/get-more-information-from-social-providers-used-in-the-vs-2013-project-templates.aspx

Facebook cannot redirect the next parameter

When I authenticate the user, after authentication it does not redirect the next parameter. Instead it redirect the user to the "Canvas Callback URL". If I dont give the convas callback url. then it gives the error
An error occurred with experiement. Please try again later.
API Error Code: 100
API Error Description: Invalid parameter
Error Message: next is not owned by the application.
on the other hand if the user cannot allow my app then it redirect the next parameter.
My url for authentication is:
https://login.facebook.com/login.php?api_key=**KEY**&v=1.0&popup=1&next=**NEXT**&
next_cancel=**NEXT_CANCEL**&skipcookie=1
I try to this on localhost.
in any one have idea about this?
Try using this url instead to get permissions:
$facebook->redirect('https://graph.facebook.com/oauth/authorize?
client_id=[YOUR APP ID]&
redirect_uri=[YOUR APP URL]&
scope=publish_stream, offline_access');
Replace [YOUR APP ID] with application id that you can see from application settings where you created the site in Facebook Developers section. Also replace the [YOUR APP URL] with your app url.
And $facebook variables is the one you get by initiating the facebook client that is:
$facebook = new Facebook($appapikey, $appsecret);
Yes it always redirects to canvas url instead of app url. You just need to create your own server side redirect that would redirect user back to app url.
You can separate regular app calls from the one after authorization that requires manual redirect by looking at request parameters. After authorization you would get some unique params like auth_token that are not present in a regular request. If those params are present - it means that it is authorization redirect and you need to send user back to app url.