Is there a way to comsume APi's from a seperate Angular Application #846

12 Answer(s)

• 

  0

  gterdem created 3 years ago

  Senior .NET Developer

  Are you trying to access a different web api from your client application (angular) or its backend projects (web api), from web api to web api or from angular to web api?

  If you are trying to connect from angular app, did you consider creating a different endpoint in your own backend project to get data from diffferent web api and host as proxy hence you can also authorize those endpoint aswell.

  Can you give more details?

  Save Cancel
• 

  0

  learnabp created 3 years ago

  we are trying to create a front end app which is basically runs as a Office Add In using the following library

  https://www.initgrep.com/posts/javascript/angular/microsoft-office-addin-using-angular-cli

  and we want to use ABP as backend and access API's from the angular app. in aspnetzero we could get a token but with identity server how do we get token by passing username and pass word?

  Save Cancel
• 

  1

  bunyamin created 3 years ago

  Hello,

  For your case, I've created a sample project and pushed it to this repo

  Here are my steps:

  • Created a new project by running the command abp new CustomAngularAppWithIdentityServer -u angular -csf -t app Note: I've chosen angular as UI, because it will generate some config in identity-server which we will use.
  • Navigated to CustomAngularAppWithIdentityServer folder.
  • Created a new angular project by running ng new custom-angular
  • Within the new angular project, I've installed some packages by running npm install @abp/ng.core @ngxs/store
  • I've copy-pasted whatever is inside in environment.ts and environment.prod.ts from angular to custom-angular project.
  • Within app.module.ts, I've imported the following modules

  import { registerLocale } from '@abp/ng.core/locale';
  import { CoreModule } from '@abp/ng.core';
  import { NgxsModule } from '@ngxs/store';
  
  @NgModule({
    // ...
    imports: [
      // ...
      CoreModule.forRoot({
        environment,
        registerLocaleFn: registerLocale(),
      }),
      NgxsModule.forRoot([]), // <- this is needed by CoreModule and we will remove this dependency by v5
    ]
  })
  export class AppModule {}
  

  With this done, we are ready to go.

  With ABP v4, we use code-flow for authentication. That's why you need to redirect the user to the Identity Server and get a token. Our core package does it for you. All you need to call is authService.initLogin()

  I've put two buttons in app.component.html

  The first one for login and the other one for retrieving users after successful login.

  Take a look at app.component.ts

  Here is everything in action

  

  Save Cancel
• 

  0

  learnabp created 3 years ago

  perfect thats exactly what we need .... we also want to take advantage of the abp generate-proxy each time we update the services rather then updating manually could you pleaae show us how we can do that in the custom-angular app in the example you have generated for us ?

  Save Cancel
• 

  1

  bunyamin created 3 years ago

  Hello,

  I've updated the app in the samples repo

  Here are what I did to create proxies.

  • First, you need to run npm install @abp/ng.schematics --save-dev. This package is used by abp-cli to generate proxies.
  • Then, you can simply run abp generate-proxy --module identity to generate services for the Identity Module.

  And that's it. You can now enjoy your generated proxies :)

  You can see that I've replaced RestService with the generated IdentityUserService in app.component.ts

  Also, just with the CoreModule from @abp/ng.core, you can even utilize abpLocalization pipe as follows:

  {{ "::LongWelcomeMessage" | abpLocalization }}.

  Save Cancel
• 

  0

  learnabp created 3 years ago

  Thank you for the info @bunyamin this is excellent.

  Just have a final question about how we can validate and check permissions what are the methods which are in @abp\ng.core to check if the user has been granted the permisssion to show and hid admin buttons?

  Save Cancel
• 

  0

  learnabp created 3 years ago

  Just tried running abp generate-proxy and getting the below error

  we have switched to using the MVC template with the custom-anular app so do i need to do some config on the *.Web project in the aspnet folder?

  Your help would be greatly appricated

  Save Cancel
• 

  0

  bunyamin created 3 years ago

  Please refer to the Permission Management docs. Since, you installed @abp/ng.core into your project, it is available to you.

  It seems that the error is missing from your message.

  Save Cancel
• 

  0

  learnabp created 3 years ago

  here is the error

  PS C:\Projects\GitLab\DesertFire.Ppm\word-angular> abp generate-proxy [18:44:59 INF] ABP CLI (https://abp.io) [18:45:00 INF] Version 4.2.0 (Stable) [18:45:03 WRN] Couldn't determinate version of "@abp/ng.schematics" package. [Invalid Module] Backend module "app" does not exist in API definition. PS C:\Projects\GitLab\DesertFire.Ppm\word-angular>

  Save Cancel
• 

  0

  bunyamin created 3 years ago

  Make sure your backend has a module called app available. You can check it by making a request to https://yourdomain.com/api/abp/api-definition?includeTypes=true. This will return a json which will be used to generate proxies.

  E.g.

  

  If you do not explicity choose a module, the default is app. You can choose a module by passing a parameter after --module. E.g.

  abp generate-proxy --module identity

  Save Cancel
• 

  0

  learnabp created 3 years ago

  Thanks for your reply @bunyamin we are running the custom-angular app inside of Word Addin which uses IE Edge Legacy Web Viewer

  It seems that when I login and supply credentials the AccessToken is not retrived on first attempt i have to press on the Login button quite a few times before it sucessfullt logins.

  COuld you please suggest why this behaviour is happening ?

  Save Cancel
• 

  0

  bunyamin created 3 years ago

  Hello vnetonline,

  It seems that your original problem is solved and your latest question is out of the scope of this thread. I'll close this issue.

  If you'd like, you can open up a new ticket.

  Best regards, Bunyamin

  Save Cancel