Error loading angular-oauth2-oidc

[origicom]

Hi Manfred,

I just spend over a hour to get things work, but I keep getting this error. As I am out of options, any help would be appreciated.

I took an Angular2 seed and NPM installed angular-oauth2-oidc

At my web.module.ts I did the import and their it will go wrong. Keep getting this error:

Error loading http://localhost:5555/node_modules/angular-oauth2-oidc.js as "angular-oauth2-oidc" from http://localhost:5555/web.module.js

[yannyann]

I tested with angular-quick-start and SystemJS SystemJS (system.config.js) but I couldn't make it work.
After I tried with https://github.com/AngularClass/angular2-webpack-starter (WebPack) and with angular-cli (https://github.com/angular/angular-cli) it looks like better.

There is some modifications that I made to make it work.

Assumption

I Assume that we create a project with angular-cli (It is maybe not necessary but ...)

1 Install the dependency

• npm install --save angular-oauth2-oidc

2 in app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { HomeComponent } from './home.component' //here

import {  OAuthService } from 'angular-oauth2-oidc';  //here

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent   //here
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [OAuthService], //here
  bootstrap: [AppComponent]
})
export class AppModule { }

Notice that I imported OAuthService instead of OAuthModule and added it into providers instead of in the imports. (I already imported HomeComponent)

3 in the home.component.ts

import { OAuthService } from 'angular-oauth2-oidc';   // and not import { OAuthService } from 'angular2-oauth2/oauth-service';

4 : Advice

Use at first the implicit flow component (because for the password component you should create or form that is not present in the readme. )

In practice

If you want to use the password flow you can do like this. (I am a beginner in angular2 and in js world)
Assume that you doesn't want to use implicit flow

PS : I cannot promise that this code work because my project is differently constructed.

home.component.html

<h3>Password flow</h3>
    <div>
        username : <input  [(ngModel)]="username" placeholder="username">
    </div>
    <div>
        password : <input  [(ngModel)]="password" placeholder="password">
    </div>
    <div>
        <button class="btn btn-default" (click)="loginWithPassword()">Login with password workflow</button>
    </div>
   <div>{{token}}</div>

home.component.ts

import { Component } from '@angular/core';
import { OAuthService } from 'angular-oauth2-oidc';

 
@Component({
    selector: 'home-component',
    templateUrl: "app/home.component.html" 
})
export class HomeComponent {

    public username: string;
    public password: string;
    public token: string;

    constructor(private oauthService: OAuthService) {
    }
    

    public loginWithPassword() {
        console.log("password flow");
        console.log(this.username);
        console.log(this.password);
        this.oauthService.fetchTokenUsingPasswordFlow(this.username, this.password).then(
            result => {
                this.token = this.oauthService.getAccessToken();
            },
            error => {
                console.log(error);
                this.token = error;
            })
    }
    
    public logoff() {
        this.oauthService.logOut();
    }
    
}

app.component.ts

import { Component } from '@angular/core';

import { OAuthService } from 'angular-oauth2-oidc';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';


  constructor(private oauthService : OAuthService, private appState: AppState){   

    this.configureWithPasswordFlow();
  }
    private configureWithPasswordFlow(){
        this.implicitFlow=false;
        // The SPA's id. Register SPA with this id at the auth-server
        this.oauthService.clientId = "demo-resource-owner";

        // set the scope for the permissions the client should request
        // The auth-server used here only returns a refresh token (see below), when the scope offline_access is requested
        this.oauthService.scope = "openid profile email voucher offline_access";

        // Use setStorage to use sessionStorage or another implementation of the TS-type Storage
        // instead of localStorage
        this.oauthService.setStorage(sessionStorage);

        // Set a dummy secret
        // Please note that the auth-server used here demand the client to transmit a client secret, although
        // the standard explicitly cites that the password flow can also be used without it. Using a client secret
        // does not make sense for a SPA that runs in the browser. That's why the property is called dummyClientSecret
        // Using such a dummy secreat is as safe as using no secret.
        this.oauthService.dummyClientSecret = "geheim";

        // Load Discovery Document and then try to login the user
        let url = 'https://steyer-identity-server.azurewebsites.net/identity/.well-known/openid-configuration';
        this.oauthService.loadDiscoveryDocument(url).then(() => {
            // Do what ever you want here
        });
    }

}

app.component.html

<home-component></home-component>

Test

ng serve --port 8080
I think it is important for implicitFlow but I'm not sure)

Example

(combine the 2 workflows )
Show https://github.com/yannyann/angular-oauth2-oidc-yann-test for more information

[manfredsteyer]

Hi yannyann,

thanks for provider this example.

Wishes,
Manfred

[manfredsteyer]

Hi origicom,

thanks for this info. As yannyann mentioned, things are more easy with webpack or the CLI, which uses wepback. The reason is that webpack aligns with the conventions of NodeJS and loads everything automatically after it has been installed into node_modules.

It will also work with SystemJS, but in this case you need to configure the library and all of its 3 dependencies with System.config. I've quickly generated a configuration with jspm (jspm.io) that works:

System.config({
  baseURL: "/",
  defaultJSExtensions: true,
  paths: {
    "github:*": "jspm_packages/github/*",
    "npm:*": "jspm_packages/npm/*"
  },

  map: {
    "angular-oauth2-oidc": "npm:[email protected]",
    "npm:[email protected]": {
      "base64-js": "npm:[email protected]",
      "js-base64": "npm:[email protected]",
      "sha256": "npm:[email protected]"
    }
    [...]
  }
});

If you want, you can share a working sample for this here.

Wishes,
Manfred

[damontgomery]

I started to try this with angular-quick-start and SystemJS and I kept having issues. I manually updated my map with your guide so it looks like,

     // Oauth
      "angular-oauth2-oidc": "npm:angular-oauth2-oidc/dist/index.js",
      "npm:angular-oauth2-oidc": {
        "base64-js": "npm:base64-js/index.js",
        "js-base64": "npm:js-base64/base64.js",
        "sha256": "npm:sha256/lib/sha256.js"
      }

I'm not sure if it's correct to link to the specific files, but that seemed to make progress.

Then each of the modules was trying to load modules like rxjs and couldn't find the right files. I started manually updating the libraries, but I'm going to try and use the CLI option instead since you've said you had success there. :(