ADAL.js - "Nonce is not same as undefined" - javascript

I am currently having trouble with the ADAL.js (v1.0.7) library. When I load my app after a decent period of time I get a login error stating "Nonce is not same as undefined." After looking over the code, I am wondering if I am missing a best practice. To my knowledge, I have followed the suggestions of #vibronet here. Should I be refreshing the user profile, or logging out, or something else?
My configuration looks like:
window.config = {
instance: 'https://login.microsoftonline.com/',
tenant: 'blahblahblah.onmicrosoft.com',
clientId: 'GUID',
postLogoutRedirectUri: window.location.origin,
cacheLocation: 'localStorage'
};
this.authContext = new window.AuthenticationContext(window.config);
var isCallback = this.authContext.isCallback(window.location.hash);
this.authContext.handleWindowCallback();
if (isCallback && !this.authContext.getLoginError()) {
window.location = this.authContext._getItem(this.authContext.CONSTANTS.STORAGE.LOGIN_REQUEST);
}
If there has been an extended period of inactivity, the error occurs after calling this.authContext.login(). In order to get the error I call this.authContext.getLoginError().
I get why the nonce is different, but I want to "reset" it or cause a brand new login to happen.
Please let me know what other relevant information I can provide.

Update:
Seems like solution has been provided in blog post you provide. below is the quote.
The trick is to go back to the authority asking for a token, like we’d
do in the roundtrip apps scenario, but doing so in a hidden iframe. If
there is still an existing session with the authority (which might be
represented by a cookie – but it is a cookie in the domain of the
authority, NOT the app’s) we will be able to get a new token without
any UX. There is even a specific parameter, prompt=none, which lets
Azure AD know that we want to get the token without a UX, and if it
can’t be done we want to get an error back. Here there’s the request.
Previous answer:
i am not fully follow what your code does. but as from blog post, seems like underneath you are using OAuth 2.0
when you said error happen when there is period of inactivity, my guess is token has been invalid, and you will need to refresh the token. Not sure if there is a way for you to refresh it. But normally on server side once you authenticated, OAuth 2.0 provider will hand over you a token and a refresh token, if token is expired, you can use refresh token to get a new one.

Related

How to POST an issue stub on GitHub using the GitHub API using the logged in user, without authentification keys?

Users of my web application are expected to provide bug reports as a GitHub issue, with a pregenerated title and body.
This works perfectly fine using GET for small bodies:
const title = getLastErrorTitle();
const body = getAllTheLogMessages();
window.open(`https://github.com/theuser/therepo/issues/new?title=${encodeURIComponent(title)}&body=${encodeURIComponent(body)}`);
If the user is logged in, GitHub presents the user with a new issue with the title and body already filled out, perfect. If not, GitHub prompts the user to log in and it works the next time.
However, if the body is too large, the GET request fails because the URL becomes too long.
After consulting the manual I tried doing the same with POST but I get a 404 from GitHub with the following test request (jQuery for brevity):
$.ajax({
type: "POST",
url: "https://api.github.com/repos/theuser/therepo/issues",
data: data = {title: "Test", body: "Test Body"},
});
My suspicion is, that the GitHub API was not designed with my use case in mind, but that POST always requires authentication and creates the full issue in one go, without letting the user change it beforehand like it is possible with GET.
How can I transfer the functionality of the GET method over to the POST method? I just want GitHub to present the user, that is currently logged in inside the browser, with a prefilled issue, without needing a token.
You can't. Otherwise, it would be a major CSRF exploit.
However, you can use OAuth authentication that will allow your application to use some features : https://developer.github.com/apps/building-oauth-apps/authorizing-oauth-apps/
Or simply, redirect the user to a new issue page (for exemple with a simple HTML link <a>) with some automatic content, using this pattern :
https://github.com/{theUser}/{theRepo}/issues/new?body={theContentYouWhant}&title={theTitleYouWhant}
Example : https://github.com/CristalTeam/php-api-wrapper/issues/new?body=Hi,%20this%20is%20the%20body%20you%20want&title=Hello,%20this%20is%20a%20prefill%20issue
What I would suggest here is to generate a personal_auth_token at gihub and pass this token in the headers under Authorization field.
To generate personal_auth_token, login to github.com, go to settings -> developers settings -> Personal access tokens and generate one.
Pass this token in headers under Auhtorization: token. So in your AJAX request, it could look something like this:
$.ajax({
url: *yourUrl*
...
beforeSend: function (xhr) {
xhr.setRequestHeader('Authorization', *token*));
},
});
One thing to note here is each of the developers POSTing to the repo will be requiring to generate their access token and you can't push this token on to a public Github repository because of obvious security breach. If you accidentally do so, the token is revoked immediately and you'll be required to create a new one.

Setting Up the Feedly Refresh Token

I have successfully set up the feedly developer access token using the javascript library Axios on a NuxtJS site. I am having trouble, though, figuring out how to set up the refresh token.
This is the process I have used for the developer token
export default function({ $axios }) {
$axios.onRequest((config) => {
config.headers.common['Authorization'] = [FEEDLY_ACCESS_TOKEN]
})
}
This code gets run whenever I make the relevant axios request.
What I am wondering, now, is what I need to do for the refresh token. I have taken a look at the instructions on these two pages:
https://developer.feedly.com/v3/developer/#what-happens-once-the-developer-access-token-expires
https://developer.feedly.com/v3/auth/#refreshing-an-access-token
However, I'm still not 100% clear as to what I am supposed to do. In particular, I have two questions:
Do I also run the refresh token each time I make an axios call -- or should I create a function that runs every thirty days and runs the code.
How exactly do I make the axios call for the refresh token. My initial guess is something like this:
$axios.$post('https://cloud.feedly.com/v3/auth/token/?refresh_token=FEEDLY_REFRESH_TOKEN&client_id=feedlydev&client_secret=feedlydev&grant_type=refresh_token')
Is that correct? If not, what do I need to change.
Thanks.
Different developers will use different strategie regarding refreshing an access token. While some will return a new token on every request, other will do it over a term of days or longer.
The idea is to reduce the window of risk in which an access token can be abused but it is sort of a subjective topic imo. Obviously there is a performance penalty when you generate a new access token on every request. Sometimes this may be acceptable, but I really don't think it's necessary in many cases. Measure the tradeoff between the penalty and the sensitivity of the token in your case.
The docs explain it well:
Endpoint:
POST /v3/auth/token
It does say that using url parameters is not recommended, so why not just do it the way they recommend it? Either:
using a x-www-form-urlencoded POST request (standard)
as a JSON object (make sure you set the Content-Type header to “application/json”)
You have more questions around this?

Is it possible to set expiration date for Webpush subscription?

I've read quite a lot of documentation about Webpush, and so far I've understood that push subscription should have a read-only propery expirationTime. Also, I understand how should I react if the browser decides that subscription is outdated (handle event in service worker, etc.). But is it possible to somehow set expiration date manually, without implementing complex client side logic? I guess that this is an ordinary problem for apps that have authentification.
My problem is that if user gets logged out automatically, webpush endpoint stays valid. I know multiple ways this can be solved with workarounds, but I guess that's not the optimal way for a relatively basic problem.
It's been a long time ago that I've fixed this, but I guess sharing my solution can be helpful.
The solution was to make a HTTP request from service worker to the app using fetch('/path') , because all cookies from the app are also attached to requests made from SW.
So, if user is not logged in, you are redirected to login page.
My code:
fetch('/path', {method: 'GET', redirect:'error'}).then(function(result) {
... //some code specific for my app
}).catch(function(e) {
registration.unregister(); //error on redirect to login
});

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.

Using Facebook Javascript SDK to get Graph Data

FIXED NOW! But I can't answer my own question yet. See my comment below. And thanks for helping.
I've searched and searched and read the docs and still can't figure this out.
I have a web page about an event. There's also a public Facebook "event" for my event. I'm trying to use the FB Javascript SDK to get the number of attendees for the Facebook event and add it to the number of people who've registered through the website.
I've created an app and I have an appID and secret string. I can get an access token from:
https://graph.facebook.com/oauth/access_token?client_id=XXXX&client_secret=XXXXX&grant_type=client_credentials
and I can then use that access token to get the attendees for a public event:
https://graph.facebook.com/331218348435/attending?access_token=XXXXXXXXX
That's all fine.
I'm now trying to do this same thing using the Javascript SDK.
I've loaded the SDK and done an init:
FB.init({
appId : 'XXXXXXXX',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
and I know the SDK is working because I can get an object with the data that doesn't need an access token:
FB.api( '/331218348435', function (response) { console.log ( response ) } );
but when I try to get the attendee data that needs the access token:
FB.api( '/331218348435/attending', function (response) { console.log ( response ) } );
I get an OAuthException: "An access token is required to request this resource."
All the tutorials and information I can find all refers to using the .login method, but I don't want a user to login, I want to login using my app ID without any user interaction.
I'd assumed that the API took the SDK's init request and granted me an access token when I called the .init method, the authentication being done against my website's address (the HTTP referrer - yes I have set my website URL in the Facebook app settings).
Any ideas what might be causing this to not work? How can I get the access token using the Javascript SDK without doing a .login? Am I missing a step? Is this even possible?
Thanks
Form what the rather circular documentations says, getting the attending feed requires a 'generic access_token`. In Facebook terms:
Any valid access_token
Any valid access token returned by our APIs. An access token may not be valid if, for example, it has expired. No special permissions are required. Occasionally, this is referred to as a generic access_token.
So this means that you can use any token you like to access the attending feed, as long as the event is public. The easiest access token to get seems to be an app token: http://developers.facebook.com/docs/authentication/#applogin. You can get this token using only your App ID and Secret, and no user interaction is required.
To summerise the link content: You can get an application access token by sending a GET request to
https://graph.facebook.com/oauth/access_token?client_id=YOUR_APP_ID&client_secret=YOUR_APP_SECRET&grant_type=client_credentials
You can then use that access_token to make the call for you attending list
FB.api('MyEvent/attending?access_token=ACCESS_TOKEN');
Oh. OK.
Well, for whatever reason, I went away and had my dinner and when I come back it's working fine.
When I updated the settings for my app Facebook said it might take a few minutes for the change to get around the servers. Turned out to take over an hour!
My code was fine.
Thanks for your help.

Categories