Error loading angular-oauth2-oidc

origicom commented 7 years ago

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 commented 7 years ago

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 { }

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

### 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

Password flow

<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>


### 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



### Test
ng serve --port 8080
<i>I think it is important for implicitFlow but I'm not sure)</i>

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

manfredsteyer commented 7 years ago

Hi yannyann,

thanks for provider this example.

Wishes, Manfred

manfredsteyer commented 7 years ago

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:angular-oauth2-oidc@1.0.14",
    "npm:angular-oauth2-oidc@1.0.14": {
      "base64-js": "npm:base64-js@1.2.0",
      "js-base64": "npm:js-base64@2.1.9",
      "sha256": "npm:sha256@0.2.0"
    }
    [...]
  }
});

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

Wishes, Manfred

damontgomery commented 7 years ago

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. :(

manfredsteyer / angular-oauth2-oidc