.net core, angular and application settings - angularjs

We currently have our API set up in azure and use deployment slots which each have their own app settings. For example, on our live slot we set our connection string to the live database. On our dev slot we set the connection string to the test database.
So, I have been tasked with doing something similar with our SPA. I created it using .net core and angular. Currently it has a constant set up:
.constant('apiUrl', 'https://ourlive.api.com')
I have a few set up and I just comment out the ones I am not using. What I have been tasked with, is putting these into the application settings and using deployment slots for different URLs. For example, the live slot will use the Live URL and the Dev slot will use the Dev URL.
I read that you can do this using npm but this isn't an option for us because we are using .net and the npm doesn't seem to work like that. Is there another way we can read the application settings?

Per my understanding, your scenario is a purely HTML + angularjs SPA, although they are running in a .NET core runtime. And your requirement is that you want to get the slot application settings in your SPA application. If I have any misunderstanding about your structure, please feel free to let me know.
You can try to leverage the .net core runtime to get the application settings in slot, and expose as an RESTful API for your SPA application.
And in your SPA application, you can create a server, to call your .net core's API, and you can inject this server and call this api when your SPA bootstrap in and keep the settings in $rootscope for your entire SPA application.
For slot application settings, you can refer to https://learn.microsoft.com/en-us/azure/app-service-web/web-sites-staged-publishing#configuration-for-deployment-slots for more info.

Related

Confusion of which Azure AD app Authentication platform redirect configuration to use

I am utterly confused about which platform configurations to use under Azure AD app's Authentication blade.
There are 2 platform configurations I am confused about:
"Web"
"Single-page application"
The app I have registered is a React JS app, which in my mind, is both a Web app AND a SPA.
This "rabbit hole" get's deeper as I'm trying to configure redirect URIs so i can use MSAL.js to authenticate and authorize within the app.
Essentially, it comes down to this (for my http://localhost:5000 development environment):
If I specify my URI under Web, then I get error:
AADSTS9002326: Cross-origin token redemption is permitted only for the 'Single-Page Application' client-type.
And from what ive been reading, Web platform is the way to go (not SPA).
Can somebody shed any light onto this convoluted area?
Which platform configuration should I be using for a ReactJS app?
Thank you.
• React js is mostly used to develop SPA (single page application) as it is a web application or website that interacts with the web browser by dynamically rewriting the current web page with new data from the web server, instead of the default method of the browser loading entire new pages. This means that the URL of your website will not change completely (page will not reload), instead it will keep getting content and rewriting the DOM with it instead of loading a new page. The goal is faster transitions that make the website feel more like a native app.
• When building you react-app, you can see that there is only one App.js from where your entire web-app is loaded in fragments and components. This behaviour of rendering components and pages on a single page and changing the DOM (is a single page behaviour and hence the name), instead of loading a new page with new content, this makes it feel like a single application.
• So, when you are using react js as a building code platform, I would suggest you use SPA as the platform in Azure AD app registration. That does not mean you cannot use react js to create an app on a remote web server and deploy it, you can but for hosting react js coded application script and running it as a worker process and provide a desirable output you need script execution backend runtime like ‘ngrok’ and ‘node.js’ to supplement the execution and provide compatibility with the web server environment.
Please refer below links for more information: -
Why is React Js called as Single Page Application
https://learn.microsoft.com/en-us/answers/questions/315313/azure-app-registration-causing-the-following-error.html

How to use API as backend in ionic mobile app development?

I am having a web application built using JAVA spring which has API feature to read and write into database.
Now i have to develop an ionic mobile app for the same application. How to read and write data into database.
I know Firebase and other alternatives can do the job.
But i need my own API code(written for web app) to be used. Is there any way to achieve that?
I guess calling the respective API when the web application is live is achievable.
But how can i achieve that while developing(When the web app is under construction)
Well depending on how you set up the API this could become quite difficult.
You're saying/guessing that you can call the API when the webapplication is live. This makes me assume you've created a REST API? Or did you create a Spring MVC application?
If the webapplication is directly linked to your Spring application (f.e. going to localhost:8080/my-profile shows a page (not JSON) of your profile) then I'm not sure if you can achieve the above mentioned target.
If you get a JSON response, or are somehow able to retrieve it from the webpage, you can just simply call (in typescript:)
this.http.get('http://localhost:8080/my-profile').map(response => console.log(response.json() );
Else, you probably will have to create a basic REST API (check out Spring boot for a 5 minute setup) and provide it, either with hardcoded data or connect it with your database.

Pure Angularjs Single-Sign Up with ADFS

Does anyone know is it possible to do a single sign up web application with ADFS in a "pure" angularjs enviroment? I am at the point to decide which framework for my next project. One of the main requirement is the ability to do "single sign up" with ADFS, but I don't want to "mix" angularjs with asp.net, just make thing more complicated. I would like to go pure angular without any asp.net framework, is it even possible?
I know there are a lot of questions on this topic, but it seems no one is really answering the question. Is it because it's not doable?
By the way, It is an intranet web application.
The problem is not with your ADFS server, the ADFS protocol itself, AngularJS, JavaScript or the browser.
It's with the way you tell your client-side application that the user is logged in from your server-side application.
As far as I know there is no way to do "pass-through" authentication over HTTP so you will need to have your users go through the preauthentication step.
With ASP.NET you get an access token "for free" because the ASP.NET application runs on a machine that's in the "trusted" ADFS network. Your browser on the other hand is not. The only way for ADFS to know you are who you say you are is to preauthenticate you.
I just implemented it using the Azure Active Directory for JavaScript library. After IT registered my app for me, I was up and running in 10 mins. There is an AngularJs example in the source code. https://github.com/AzureAD/azure-activedirectory-library-for-js
You should also register your development workstation so you can test locally.

How could I centralise AngularJS configuration when part of an ASP.NET MVC project?

I have an AngularJS SPA served up as part of an ASP.NET MVC application. Within this I have an Angular factory which accesses a REST API elsewhere on our intranet. We have various instances of this API for development, production and UAT. I'd like to be able to configure the URL of this API within something like the web.config so that when I build each different solution configuration the correct URL is provided to the factory.
Unfortunately I'm working within an environment where I cannot use npm (it's complicated - suffice it to say that NTLM proxy authentication combined with a smartcard login don't play nicely with npm), so a lot of front-end build tools that seem like they might have been helpful aren't available to use.
Currently I'm just thinking of adding a method on a controller which returns a value in the web.config, but this doesn't seem terribly elegant. Perhaps there's a better way?

ASP.NET web api SPA project layout

I am building a proof-of-concept line-of-business Single Page App. I want to use ASP.NET web api for the REST service layer, and Backbone.js and Require.js on client. I would like to use modular structuring of js files and templates (Require.js) so the source code of the app would not end up in one html page.
I havent found an example how to lay out the project in Visual Studio, and what project type should I choose. Should Web Api be in one project, and web application in another, or should it be mixed. Any advice or best practice would be very appreciated.
Thanks!
What I did previously for the same goals was to put the WebApi and Web application in the same project. It makes thigs easier from the point of view that you will everything set up when you create the project in Visual Studio.
There is a slight problem in having the webapi in a different project: since you have to put that on a separate hosting or eventually on the same hosting but bound on a different port or virtual directory, it may need some time setting up IIS... eventually in the past we used the Url rewrite module to redirect calls from the Web App to the Web Api application. There may be simpler settings but again it will require a bit of time, depending on your confidence in setting up IIS...
For starter/proof of concept probably having everything on the same application will make things smoother. You may want to keep Domain Models and DB access in separate projects so if eventually you end up splitting the WebApi from the Web App you can still reference those two without problems.
In the end, the Web Application will only have one controller with one action (Home/Index maybe) and this will be the point of contact that will deliver all your html/css/js to the client. Being a SPA, everything from now on will be managed by Backbone on the client (navigation too), with the occasional call to your JSON Web Api endpoints to get and post data.

Resources