Generally, this question is about how to use some dynamic content from a backend inside a module.config function in AngularJS.
Specifically, this question is regarding the GoogleMapApi provider in angular-google-maps
In my Angular Application the Google Maps API key is stored in a Firebase backend. What I would like to do is to set the API key for the GoogleMapApiProvider
.config(function(uiGmapGoogleMapApiProvider) {
uiGmapGoogleMapApiProvider.configure({
key: 'your api key',
});
})
I know that I only have Providers and Constants available in the Angular module config function. So I struggle to think of a way to get the necessary API key from my Firebase backend using the $firebaseProvider
Any help or direction is most appreciated!
Thanks!
Related
I have a frontend that I designed in ReactJS on AWS Amplify with my Senior Project team and am looking to bring in data from API Gateway. I have a link I deployed that I tested in Lambda on the AWS console which works correctly. I am looking for some guidance on pulling in the data from that url to the frontend to use for a list. I can supply more information if you would like, please let me know what you need and any tips would be great! Thank you.
Assumption :
As mentioned in your question i assume that you already aware how to create API Gateway,deploy API and now you have API gateway url to access rest API.
Fetch data into react :
Example you have following cruds API
GET /students List all students
GET /students/1 Load a studentsby id
POST /students Create a students
PUT /students Update a students
DELETE /students/1 Delete a students by id
Fetching data:
import { API } from 'aws-amplify';
API.get('students', '/students', {}).then(result => {
this.todos = JSON.parse(result.body);
}).catch(err => {
console.log(err);
})
Security :
You need to secure rest API either use API key or Authorizer
https://github.com/vaquarkhan/aws-amplify-workshop-react
https://www.freecodecamp.org/news/going-serverless-with-react-and-aws-amplify-part-2-creating-and-using-serverless-services-d401ba346eeb/
https://gerard-sans.medium.com/create-a-rest-api-integrated-with-amazon-dynamodb-using-aws-amplify-and-vue-5be746e43c22
I am creating an AngularJS client to interact with two ASP.Net Core (v2.0) APIs, all of which are to be secured with Azure AD. Because of a requirement to use roles and groups we will be using the v1 endpoint and therefore ADAL.js. The UI client must be a separate project from each API, additionally the UI project is not a Visual Studio project, rather VSCode with npm. In the UI project I am using:
AngularJS 1.6.9
UI-Router 1.0.15
ADAL.js 1.0.17
After a long time of trial and error, I finally got the UI to authenticate to the API after I took the following steps:
In the UI project I included endpoints in the Adal init() function:
var endpoints = {
'http://localhost:8000/api0/': '<API_0_CLIENT_ID HERE>',
'http://localhost:8001/api1/': '<API_1_CLIENT_ID HERE>',
};
adalAuthenticationServiceProvider.init(
{
tenant: 'slurm.onmicrosoft.com',
clientId: '00000000-0000-0000-0000-XXXXXXXXXX',
endpoints: endpoints
},
$httpProvider
);
There are two endpoints, one is the base url for each API, and each has the corresponding clientId for that API as assigned when each api was registered in Azure AD. Also, the UI project, when registered in Azure AD, is granted appropriate permissions to each api. Once I did set these endpoints in the init() function, and the UI had each clientId of the APIs, the UI was able to authenticate properly to both APIs. This is the SO question that finally clued me in to try this: 32352325
If I do not provide the endpoints in the UI project, a token is not even passed back to the API and therefor authentication fails.
What I am not sure of (there is no clear documentation), is whether the UI clientId should be set as the audienceId in each API or keep each API client id embedded in the UI.
Questions:
1) For an AngularJS UI project that is separate from each API, and each project is registered separately in Azure AD, do we register the UI clientId as an audience with each API or allow the client to know each API clientId?
2) Why are endpoints seemingly required to be specified in the ADAL init() function on the client? Or am I using them incorrectly?
Based on the ReadMe of this Azure-Samples project, it would appear the UI should know the clientId of each API (under Step 3, Configure the WebApp it says):
In the TodoListWebApp project, //...// Find the TodoListResourceId property and replace the value with the Application ID of the TodoListService app
But, this example is not an SPA example and therefore does not use the implicit flow.
Much thanks in advance!
This is what I eventually deduced (after lots of digging and trial and error). Again the example assumes the UI is a separate project from any APIs. For the original questions above:
1) For an AngularJS UI project that is separate from each API, and
each project is registered separately in Azure AD, do we register the
UI clientId as an audience with each API or allow the client to know
each API clientId?
The Client UI knows about each API but uses the App ID URI
2) Why are endpoints seemingly required to be specified in the ADAL
init() function on the client? Or am I using them incorrectly?
Read on.
For each API your UI will access, there needs to be an endpoint declared in the endpoints map structure. For example, say I am trying to access 2 separate APIs registered in AAD with the following relevant info:
Tenant: slurm.onmicrosoft.com
API_0
Home Page URL: 'https://localhost:8000'
App ID URI: 'https://slurm.onmicrosoft.com/00000000-0000-0000-0000-aaaaaaaaaaaa'
API_1
Home Page URL: 'https://localhost:4000'
App ID URI: 'https://slurm.onmicrosoft.com/00000000-0000-0000-0000-bbbbbbbbbbbb'
adalAuthenticationServiceProvider.init(
{
tenant: 'slurm.onmicrosoft.com',
clientId: '00000000-0000-0000-0000-XXXXXXXXXX',
endpoints: {
'localhost:8000': 'https://slurm.onmicrosoft.com/00000000-0000-0000-0000-aaaaaaaaaaaa',
'localhost:4000': 'https://slurm.onmicrosoft.com/00000000-0000-0000-0000-bbbbbbbbbbbb',
}
},
$httpProvider
);
The following are the references:
Go to http://www.cloudidentity.com/blog/2015/02/19/introducing-adal-js-v1
Scroll to section Calling API via CORS
Follow the link to the github example:
https://github.com/Azure-Samples/active-directory-angularjs-singlepageapp-dotnet-webapi
On the github example readme
Go to Step 3: Configure the To Go API to use your Azure Active
Directory tenant
See step #7 which states:
Enter a mapping of the To Go API endpoint location to its resource
identifier, or App ID URI. The name of the property of the endpoints
object should be the location of the To Go API.
Also if you look into the code example you will see in the web.config of the ToGoAPI it indicates the 'Audience' value is set to the App ID URI of the ToGoAPI
Note: The App Id URIs used above are intentionally left in a format similar to the default values Azure AD will
provide when you register an application. These can be changed (just make sure you change it everywhere).
Note 2: In the endpoints map you see that the keys do not include the scheme and to not fully match the corresponding Home Page URL. When I included the scheme i.e https:// I got 401 responses from the API
I have AWS API gateway that uses cognito temporary credentials.
I want to setup angular native $http service to use api with required aws4 authentication headers.
I tried to use https://github.com/mhart/aws4 but I'm getting InvalidSignatureException
Is there any way to generate aws4 auth headers for front-end applications? Does anyone have experience setting app API Gateway without autogenerated SDK?
I wrote an angular module - angular-aws-apig on top of aws4 npm package. It provides an interceptor for $http service.
angular.module('app', ['angular-aws-apig'])
.config(function Config($httpProvider, APIGInterceptorProvider) {
APIGInterceptorProvider.config({
headers: {},
region: 'us-east-1',
service: 'execute-api',
urlRegex: ''
})
/* #ngInject */
APIGInterceptorProvider.headersGetter = function(myService, request) {
myService.doSomething();
return request.headers;
};
/* #ngInject */
APIGInterceptorProvider.credentialsGetter = function(store, request) {
return store.get('credentials');
};
$httpProvider.interceptors.push('APIGInterceptor');
});
It allows to resolve AWS IAM credentials before the request. It could be handy to use with AWS Cognito or Auth0 as they provide temporary IAM Credentials in exchange of user token. Those credentials then could be used to securely access APIGateway.
I would expect the aws4 library to work - it may be something in the way you are using it. If you can post some code it may help to diagnose.
The easiest way to integrate an API Gateway API is to use the generated JS SDK for your API. If you don't want to use it, you still may be able to re-use some of the SigV4 utilities in the generated SDK and integrate the signing process into your Angular client.
Thanks,
Ryan
I'm trying to setup an alternative to Firebase with loopback API REST(with mongodb connector) in NodeJS, when I implement it with the $http ressource to my PhoneGap apps in AngularJS,
it is not update in realtime like Firebase.
My factory is like:
function syncUsers(){
return $http.get(userUrl).then(function(res){
return res.data;
});
in my controllers:
UserSrv.syncUsers().then(function(res)
{ $scope.data.users = res});
my question is : why my apps don't update the old data, and why I need to refresh the apps to have the new data ?
Thank you.
Ok even if I don't know how to implement it, I need to use pub/sub
Strong loop work on it.
https://github.com/strongloop/strong-pubsub/issues/7
I am unable to access the session values which is set by node.js in Angular.js controller. I am using the Express framework. How to resolve it? Here is my code.
app.use(express.cookieParser());
app.use(express.session({
secret: '1234567890QWERTY',
cookie: { httpOnly: false }
}));
//setting the values
cookies.set('username',username);
req.session.username=username;
Presumably you want to do something like show the username in your angular app. As I mentioned in this answer, the hard part to Angular is not thinking about what data the server has, but thinking about data the server should provide to the browser via API.
My general model is to have the angular page start up without any data and have a low-level controller invoke a service (say AuthenticationService or IdentityService) that requests relevant data from the server, e.g. HTTP GET /api/identity. That will return a block of JSON that the page can then store in that low-level controller. Any deeper controller can then access the identity (or whatever) data loaded in that first request.