WP JSON API Angular.js user login - javascript

I'm struggling to log in a user correctly via the WP REST API (http://wp-api.org/) using angular. I have it working so far by using basic auth when requesting the wordpress users via /users - but this doesn't seem like best practice, and it doesn't provide cookies in the response.
Has anyone got any ideas?
Cheers

From looking at the documentation for WP REST API, I'm not seeing that it provides any kind of cookie login feature.
There is, however, a plugin for this:
https://wordpress.org/plugins/json-api-auth/
Passing back a cookie via a secured JSON call is totally normal. Usually it's just passed with the Set-Cookie header, and your browser automatically knows what to do with it.
If you want to get really fancy and drop cookies all together, check out JWT = ) New stateless way for doing auth. You'll need to do somewhat fancy WP coding, though.

Related

coinbase oauth authorization returns html, how to integrate with my web-app

So, I am creating a web-application that works with coinbase. The front-end is a standard static page with html and jquery, this is very vanilla. The back-end is a separate web-app that is made with Spring 5 and has a bunch of RESTful web-services.
I go to my login.html and I login. That means I send the username/password back to my login Spring Controller, and I get an access token sent back to the UI. I put that in a cookie, and then I reload a new page with a big fat authorize button on that page.
That button does an AJAX call to my Spring RESTful controller passing in the token, as i wanted to make that endpoint secure which works great.
On the back-end (or middle-ware), I am making a RESTful call to Coinbase to start the process of Oauth2 authentication. I read in my client-id from a properties file, I pass in the redirectURI, and a state. All this works great, it gets to coinbase, and the response is HTML. I pass that back to my client, the front-end, and I have this HTML which is the coinbase authorization page.
Now here is where it gets dicey ... I am a back-end person, so I can make that RESTful call on the back-end with no issue. I get the HTML, which is supposed to be the AUTHORIZE page to allow the user to let my web-app be used with their coinbase account. I get HTML and now I am at a loss as the correct way to display this html on my page or a new page. This is my lack of javascript and jquery knowledge.
The AJAX code in my authorize.js looks like this:
$.ajax({
url : 'http://localhost:8080/myapp-be/api/coinbase/authorization',
headers : {'mytoken' : mytoken},
dataType: 'html',
cache: false,
success: function(response) {
$("html").html(response);
}
});
Is this the correct way to go?
I absolutely can take the coinbase call put it in my browser, and it pops up the Coinbase Authorization dialog box easily. If I authorize, putting in my username/password, I am sent to the callback page which I passed in as the callback redirect uri.
But, it was my understanding, that we did not want to expose the client-id to anyone. That is why my back-end does it, and we just return the HTML. So, I am a held up here.
With my current code, I get many Javascript errors, and I just know this isn't the way to go. I get a lot of CORS issues, and when I try to authorize I get an error that it can't get to the correct page.
How would one correctly call the Coinbase authorization API. Their documentation page:
https://developers.coinbase.com/docs/wallet/coinbase-connect/integrating
Shows in Step 1:
GET
https://www.coinbase.com/oauth/authorize?response_type=code&client_id=YOUR_CLIENT_ID&redirect_uri=YOUR_REDIRECT_URL&state=SECURE_RANDOM&scope=wallet:accounts:read
So, sadly, I am a little confused on the best way to solve this issue.
Either I make this GET call from the client exposing client-id, if that is ok?
Or, I can figure out the correct way to display the HTML coming back for the Coinbase Authorization page?
Thanks for the help!
So, it's been a very long while since I have had to do any UI work. I've never had to worry about cross-scripting or iframe issues or security issues relating to the front=end (UI).
From what I am gathering, pulling HTML from a third-party website onto a div, or into an iframe on my web-site is not the best plan. I can tell you that even though I did pull the HTML into the web-page on my site, there was a ton of javascript errors and CORS issues.
Ultimately, my ajax call to my middle-ware was changed to just pull back the coinbase authorization URL. A simple windows redirect and there I was on the coinbase web-site as it should be. Once I did the authorization, then I was redirected back to my redirect link that I told Coinbase to do.
So, getting the link and doing a simple redirect worked. Loading HTML from a third-party site into my web-pages did not. Lesson learned!
Thanks! Hope this helps someone else out.

Problems with Disqus OAuth2 flow

Since posting on the Disqus disqus forum seems to be a waste of time, maybe someone here can help.
I'm trying to use the OAuth2 flow to connect a Disqus user to my app's account system so I can monitor their activity (posts/comments/etc). I'm using Meteor for my app. I'm calling the OAuth2 authorize endpoint from my server code and passing the resulting HTML back to the client for rendering. This all works fine. But I'm seeing 2 problems on the client side. First, the HTML code returned from Disqus seems to be designed in a full page and the username/password fields extend across the entire window. I was expecting a dialog/modal popup like the one that Disqus provides when logging into a forum. I tried wrapping the HTML inside of a Boostrap3 modal window which mostly works except the username and password fields extend off the right side of the dialog box.
Ignoring the ugly UI the second problem is that when the user clicks on the submit link Disqus puts up and error page titled 'CSRF verification failed (403) - DISQUS'. I'm guessing this may be because the OAuth2 call was made from the server and the submit is coming from the client. If I copy the OAUTH2 url directly into the browser everything works fine. But I don't want to expose my API key and resulting code on the client side since that seems like a security risk.
All I really want to do is verify that the user is trying to connect their own account to my app (and not some other user). I'm not posting with their account so I don't need an access token (I'm calling user/details which just takes the API-key). So I've thought about creating a forum for my app and using the login endpoint to verify the username/password combo. But that dialog doesn't explain the scopes I'm asking for.
I've also considered building my own dialog box to prompt for the username/password, sending those back to the server and have the server "fake" the submit back to Disqus. But that is not a maintainable solution since Disqus might change the expected fields at any time. And it is ugly as sin.
Anyone have any suggestions? I didn't post any code since I don't believe it is a coding problem (and the code is a bit convoluted). But if anyone thinks it will help you help me, I'll be happy to post it. And, yes, I'm aware that not posting the code violates StackOverflow conventions. But I'm taking a chance that the powers that be will allow this post since Disqus support is non-existant and I don't know where else to reach out.
The basic problem was that I was using 'request' with forwarding enabled so that instead of getting the Disqus URL I was getting the Disqus authentication text. You need to render the authentication URL in a window, not the contents. That fixes the CSRF problem.
The next problem is that the URL returned by getAuthorizationUrl is bad. It is of the form 'nullhttps:...'. No idea where the 'null' is coming from, but stripping it off fixes that problem.
To make things easier for anyone looking to do this, there is a shiny new version of the Disqus NPM that includes OAuth authentication methods at https://www.npmjs.com/package/disqus.

How can I use OpenID with my own RESTful API?

I'm currently creating an EmberJS application,
So obviously my front end is done in EmberJS, and I've decided to go with Go (Golang) as my API service.
I've gotten the back end authentication working using Steams OpenID service
The problem I'm currently facing is, my API runs on localhost:3000 and my front end runs on localhost:4200.
So how can I make a request to my API service which will require human intervention part way through (to be able to type in the username / password on steams website before redirecting back) from my client side.
Right now
localhost:3000/auth/login is to initiate the OpenID request which redirects to steams website
and then
localhost:3000/auth/return is the callback on returning from steams website
I need to be able to some how use this authentication from the client side via some how to be able to authenticate users, e.g.:
$.get("localhost:3000/auth/login").then(() => {
// How the hell am I supposed to login on steams website from here
});
any information would be great as this is really stumping me. If you'd like to see any code feel free to ask, I'm not sure what to provide as everything is working as intended, but I just can't figure out how to connect the API to the client and make OpenID work the way I need to. Thanks!
Side Note: I know some websites will have a popup which the authentication in there (like a twitter or facebook popup) and then refresh the main site after the authentication has been processed I don't know how I might achieve something like that.

Automatic login to website, which is using ASP.NET

I'm need to automatically perform the login at: http://gsc.klub-modul.dk/. After I am logged in, I need to able to fetch pages from this domain, which requires me to be logged in. As far as I have gathered, the site is using ASP.NET to interact with the server. I am open to all suggestions. I'm looking for a script to do this, as I am still new to this.
What you are trying to do is botting (Automated access of site or online game),so follow these steps,
Generic steps
Monitor the HTTP request being made by the browser (I use
Fiddler,you might also find browser built-in network tool(press F12) handy)
You need to look for cookies especially.
In short you should be able to make same HTTPRequest on each event
(by event I mean first time page request ,page submit for login and
etc)
Use python for botting
use these libraries Mecanize / twill /scrapy / Beautiful Soup
Tutorials to get started
http://docs.python-guide.org/en/latest/scenarios/scrape/
http://www.pythonforbeginners.com/python-on-the-web/web-scraping-with-beautifulsoup/
http://arunrocks.com/easy-practical-web-scraping-in-python/
https://classic.scraperwiki.com/docs/python/python_intro_tutorial/
Stackoverflow links
Scraping sites that require login with Python
Scrape a web page that requires they give you a session cookie first
Fake a cookie to scrape a site in python
Python Scraping Web with Session Cookie
My Advice
I think if you haven't made a web scraper (web-bot or bot-tool) before than you should start with small things like fetching a specific information from a page which doesn't require login then move on to more complex scenarios
As usual Asp.Net uses cookies for session, authorization needs. So basically you just need to make POST request to login page with Login, Password parameters, then you need to obtain cookies from response, and then make new requests for needed pages with these cookies.
By default these cookies are named ASP.NET_SessionId and ASPXAUTH
I have worked on a similar problem but used a generic approach. I used greasemonkey addon in firefox to login on a game and save data on different db. Later I found out that I could've wrote a addon myself (mozilla ref)
Both of these technique will rely on javascript only.(example of a login script of fb in greasemonkey)
The website was on asp.net too! You just need to receive the cookies and login from javascript code. Jsoup is another approach to parse data and login.

Twitter OAuth with Javascript

I'm trying to make a Twitter client with Adobe AIR, how can I successfully use OAuth with Javascript? I mean, I've used jsOauth but it seems to lack the oauth_signature somewhere...
One thing you can try is you can use the approach that is described in the Facebook developers section dedicated to authentication. You want the section that is called "Client-side flow".
In a nutshell they propose that you make an application that will redirect the page it is loaded in to a special URI with it's app_id and backurl in the query parameters. Once Facebook manages your app's permissions, it will redirect the user back to your page with a special access token in a URI fragment, e.g. http://example.com/my_app_page/#token=foobar. This way only your script on the client side can access this token and use it to make requests to the Facebook API.
go have a look at streamie, a twitter client based on node.js. In the source, you can find an extremly good implementation. It's done by cramforce. You find it on github:
https://github.com/cramforce/streamie
jsOAuth uses the Authorization header to pass the OAuth relevant data to the API service.
If you are having issues, by all means email me I'll be happy to look at your code. jsOAuth isn't flawless, I'm fixing bugs as they come up.
Theres a boiler plate for PIN based client auth here: https://gist.github.com/1071227

Categories

Resources