Wrap javascript API? - javascript

We are looking for your input regarding architectural design of a Javascript API and a .Net (Rest) API.
Background
We are building an enterprise solution with several different channels (Site, App etc) that are consuming data through a service layer, or API. The API is on one hand a .Net WebAPI that are communicating with the business layer but we are also thinking of wrapping external Javascript services (Communication with Google Maps, Google Analytics, Social Login etc) in some sort of API, or maybe SDK. The idea is to have the possibility to quick change components in the Javascript Library (Replace Social Login Provider with someone else).
What is your ideas regarding the Javascript? Should that just be a SDK that wraps other libraries?
Thank you,
Robert

I think it will depend on how much control you want to give to your client side development groups. If the UI development group is faster (and on different release schedules) than the group that manages this SDK, then the SDK will just get in the way (unless they are in lock step with the UI group). It would be better to just give them access to the server side APIs then let me compose the page as they see fit.

Related

connect react.js to Google Collab

I want to make a simple image classification app such that the training/classification is done in a Python script. I want to create a web app for it (preferably in React.js) where the user can select parameters or the activation function etc.
To link the front-end with backend, I was planning to use the flaskAPI. However, since the training data could be large, I wanted to use GoogleColab for the ML/Python part. Is it possible to run my front-end such that it's linked to Google Colab? I couldn't find any relevant examples.
Here's an example using Flask.
https://colab.research.google.com/drive/1F-b8Vv_jaThi55_z0VLYLw3DDVnPYZMp
Here is a simple, step-by-step demo of how to build a Python-Flask application, host it in Google Colab and then access it from the public internet ( using a public URL) using NGROK tunnels. The demo is available in GitHub Repository. The first five apps have no machine learning component but demonstrate basic input-output abilities. There are two machine learning apps, one with linear regression and one with decision tree that is used for Image Classification. While we do not use React.js we do address the issue of accessing a ML model through a web API. Do note that the ML models have to built separately and should be available for loading into the Colab VM either from Google Drive ( as in this case) or from/through some other mechanism.

Azure Active Directory for securing Custom JS Frontend and Java Rest API

I've currently got a REST API (written in Java using Spring) and a frontend for that API (written in Javascript using Express) which will query that API for the data to display. I've not gotten too far along in the frontend, and wanted to add in my Authorization/Authentication. I would like to use Azure Active Directory (AAD) for this - we have users in AAD, so this is what we're pursuing. I understand that I can use the MSAL.js library to get an access_token that I can then send to my Java REST API for validation. However, I'm not able to find any decent documentation or examples for this specific case, though. I see a some Javascript Single Page Application (SPA) documentation and examples, but seeing as this is AuthN/AuthZ, I don't want to have a kinda correct solution, because this is important stuff. I also want to make sure I'm handling caching, sign outs, etc, in the right manner.
If anyone could point me in the direction of some documentation, examples, readings, etc, I'd be very appreciative!
Thanks!
You can use MSAL.js to easily integrate with the front end of your API for authentication/authorization of your users.
For java web apps, you can use the MSAL4J authentication library, so that the application can be integrated with the Microsoft identity platform. It allows you to log in to a user or application using a Microsoft identity (Azure AD, Microsoft account, and Azure AD B2C account) and obtain a token to call the Microsoft API.
For more details, please check:here.

Cloud explorer web client

Does anyone knows a javascript based open sources cloud explorer. I look for something more for the UI. I want to use it as a base to integrate capabilities for managing multiple accounts and communicate between them. Adding audio,photo, video player etc.
Thank' s in advance!
There are many, many 'file explorer'-type tree views. For example (from a superficial Google Search): https://www.jstree.com/ or https://www.uptickhq.com/react-keyed-file-browser/ for React.js. You would have to handle the 'multiple accounts that communicate with each other' separately to implementing the tree view.
This would likely be in form of a server-based API that did this and passed data to your client, where your tree used the information from the API to draw the tree, or you could probably use a library like browser-request/jquery-ajax/etc. to fetch from your different accounts directly to your browser (bearing in mind that there are probably some CORS limitations for this).

Create a GET request to Coinbase with JavaScript

I have very basic knowledge in JS and C#, and now I'm trying to build my first web app with JS. I want to create a web app which creates a GET request to Coinbase website and takes the current price of Bitcoin, Ethereum and etc. and show it in my web app.
Can you provide me a website where i can start with?
Thank you.
Coinbase has a maintained API you can use to fetch the data you need. They support various solutions (REST, Websocket, etc.), depending on your requirements.
Resources for getting started with general web development is an entirely different beast. I would suggest Angular's Heroes Tutorial, and from there read up on AJAX or Websockets (for the latter, I suggest socket.io).
Expect 100-250 hours work.

Identity Server 4 + Identity Framework + React front-end

I'm looking for advice on how to properly put an environment like this together. There's a ton of info out there and a ton of material to cover in the Quickstarts, but I'm still feeling fairly lost after 3 days of trial-and-error. I'm familiar w/ Identity Framework in the .NET Framework, but have never worked with Identity Server prior to this.
We've got a microservices setup built on Node and MySql...a series of services in Docker containers which talk to their own db nodes in a MySql cluster. We have a single management UI built in React & Redux - it will run from an AWS bucket.
I've been tasked with authenticating this React front-end using Identity Server. We will NOT be doing auth on the APIs with it. I've suggested building the authentication UI in .NET Core using Identity Framework, since it gives us everything we need "out of the box".
Eventually, The two Identity apps will be our SSO for all applications written against these APIs, and even those that aren't. Furthermore, I'll need to incorporate AD at some point to allow internal company users to pass through w/o manually authenticating.
What (I think) we need is the following:
Identity Server 4 running in its own container
Core Identity MVC app running in own container
Use oidc-client on front-end to authenticate
What I've done so far, is follow these two tutorials:
http://docs.identityserver.io/en/release/quickstarts/6_aspnet_identity.html#new-project-for-asp-net-identity
http://docs.identityserver.io/en/dev/quickstarts/7_javascript_client.html
My result is a running Identity Server and Identity Core MVC app running together in the same project (two different ports.) After following the JS client tutorial, I have their example code running - it redirects me to the MVC login, which authenticates against Identity Server, then returns this result:
{
"sid": "8e60eb65960d967834cb3eb4fdcbbd49",
"sub": "dfc90bd1-cad4-45d0-84bd-174e8a6ca891",
"auth_time": 1516296631,
"idp": "local",
"amr": [
"pwd"
],
"preferred_username": "me#gmail.com",
"name": "me#gmail.com"
}
Clicking logout fails, but that's because the controller example in the first tutorial doesn't include a GET for a logout, like the example controller buried in the JavaScriptClient example.
It feels like I'm getting somewhere but at the same time, I now fully realize how little I know. Could use advice, or even just a pointer to the correct Quickstarts to achieve what I'm looking for.
Base Setup
Based on what i read ideally what you want to do is break it up into 3 components
Identity Management component
API Component
MVC/MVVM component
For the Identity Management component use this quickstart as example ASPNetIdentity + IS4 EF or this one without the EF component.
Your API should be only authorizing (not authenticating) with all the authentication and registration occurring on ID4 server.
Your frontend (MVVM or MVC client) should be registered with ID4 server with all the bells and whistles as per tutorials:
MVC
Javascript
This should enable you to have a API(s) that is/are secured, single IdentityManagement source (basically build onto it to be a true SSO/Federated Gateway), all while separating the front end of your application(s).
Hope this helps.
Additional Info:
Further to the answer there are libraries you can use (or build yourself) for OIDC client for react that you can put into your front-end to help you achieve some results quicker.
FYI I use angular + id4 with AspCoreIdentity + AspCore API.
All that i need to do is create the link between javascript client and ID4 (as per tutorial and ID4 and Web API. We used the industry library for oidc-connect in angular to put in the settings for the ID4 server and Web API.
The beauty of this is once you do the basic setup on ID4 there is not much required to build on it for more advanced features.
Just keep in mind that these are separate components and treat them exactly as that. Helped me with the confusion and lack of knowledge.
Windows and AD login (future state):
Keeping these components separate, will enable you to integrate AD into the ID4 Server much easier and quicker without having to make modifications to API or Frontend app. Example leveraging Windows login here.

Categories

Resources