Identity Server 4 + Identity Framework + React front-end - javascript

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.

Related

Azure AD Authentication on React Frontend with Node.js Backend

I would like to add an Azure AD configuration to my React&Node.js project. What I want is to log in on Frontend using Azure AD and then send a request with f.e axios to my backend written in Node.js, so that Node.js knows that the user is logged in and can perform the request. I was reading tutorials/documentation on Microsoft site for all day, but I still don't know how and where to start. Basically, almost every Microsoft Tutorial is either to call a Microsoft Graph API from Node.js or from React.js. I completely do not want to use Microsoft Graph. I just want to have simple login on frontend and protected endpoints from un-logged user on backend. The other tutorials that I find are too complicated f.e https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/tree/main/3-Authorization-II/1-call-api . I understand the concept of App registration, client id, tenant id and etc. but I simply don't know how to write a code that: login, send the request with token - then is accepted/declined by Node.js .
If by any chance, somehow did an application like that, or can provide me a link to a well written tutorial, so I would understand and recreate it in my scenario, I would be grateful.

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.

Nativescript Javascript and Watson Cloud SDK Integration

So I am attempting to use the Watson Assistant module of the Watson Developer Cloud SDK.
I wish to use this lib in a Nativescript APP, with the end goal being I utilize the abilities of the library to take have a chat screen in the app, and take user data and send it to the bot, and vice versa.
Link: https://github.com/watson-developer-cloud/node-sdk
I am trying to use the Node.js SDK, however upon installing I get the first error of Buffer not defined.
I have then gone through this guide, and installed Nodefiy
Link: https://www.nativescript.org/blog/how-to-use-any-npm-module-with-nativescript
I then placed require(nativescript-Nodefiy) within the app.js of the application, and within the assistant.js of the Watson NPM module.
This got rid of the Buffer error, however, continuing on, I then got "Stream module not found", then https module not found, and the list continues.
I then found this article on Kinvey Business logic:
Link: https://devcenter.kinvey.com/nativescript/reference/business-logic/reference.html#watson-module
The way they show it, shows that the Watson-develop-cloud SDK should just work with Nativescript.
I'm at a lose now what to do next, I would love to get it working, but knowledge resources are limited.
Any help and guidance would be awesome.
const HomeViewModel = require("./home-view-model");
require("nativescript-nodeify");
var AssistantV1 = require('watson-developer-cloud/assistant/v2');
function onNavigatingTo(args) {
const page = args.object;
page.bindingContext = new HomeViewModel();
}
exports.onNavigatingTo = onNavigatingTo;
This is the only code I have in the "home-page.js" file, having just installed the "watson-developer-cloud" sdk, and then putting the "require('watson-develop-cloud...')" throws an error saying "Buffer" not defined
I can see you mention Kinvey in your question, however I do not know to what extend you are familiar with the platform.
Progress® Kinvey™ is a serverless cloud backend platform for rapidly building enterprise mobile apps and experiences at consumer-scale. Developer productivity is dramatically accelerated using open source frontend frameworks integrated with a low-code backend that enable out of the box integrations with enterprise and legacy systems. You can easily deliver multi-channel externally facing apps faster without worrying about infrastructure, platform and DevOps.
Kinvey offers variety of SDKs using which you can build native, hybrid, web and IoT apps. Indeed one of the SDKs that Kinvey offers is for NativeScript. Please save this link, as it is the official DevCenter documentation for Kinvey's NativeScript SDK.
Continuing on your post, I see that you've read about the Kinvey Business Logic feature. It is a NodeJS code execution runtime that allows you to customize the behavior of requests to your backend by providing a means to implement server-side business logic. Kinvey Business Logic enables developers to focus on the unique functional business logic of a mobile application, while Kinvey handles the work of receiving, parsing, and routing requests, connecting to and querying data stores, and enabling mobile-specific functionality. Please refer to this link to get more information about the core-concepts of Kinvey Business Logic.
One of the greatest benefits of using Kinvey Business Logic is that you have access to a series of API modules that can be used to manipulate or action on a request. To your information, one of those modules is called IBM Watson. The IBM Watson module provides support for integrating with the IBM Watson APIs. This library exposes the "watson-developer-cloud" library.
Please feel free to go through the information that I've shared above, and familiarize yourself with Kinvey. Feel free to also join Kinvey's Customer Support portal.
I hope, I have informed you well.

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.

Wrap javascript API?

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.

Categories

Resources