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.