scottbrady91 / angular4-oidcclientjs-example Goto Github PK

Code from scottbrady91.com/Angular

Home Page: https://www.scottbrady91.com/Angular/SPA-Authentiction-using-OpenID-Connect-Angular-CLI-and-oidc-client

TypeScript 12.77% JavaScript 1.76% HTML 19.58% CSS 1.32% C# 62.96% Less 1.62%

angular4-oidcclientjs-example's Introduction

I help developers learn OAuth and web security.

I'm an Engineering Manager at ClearBank and a Pluralsight Author. I specialize in IdentityServer and all things Authentication, Identity, OAuth, and OpenID Connect.

In my day job at ClearBank, I'm an Engineering Manager for one of the Faster Payments teams. I'm currently taking a break from the identity world to focus on my leadership skills.

Previously at 10x Banking, I was a combination of team lead and technical product manager, leading a team of experienced IAM specialists while also championing identity standards and helping with design & architecture. Before that, at Rock Solid Knowledge, I created identity solutions for customers and developed commercial IdentityServer products. This allowed me to play with older protocols such as SAML & WS-Federation and cutting-edge technologies such as FIDO2.

I mainly work with C# and ASP.NET Core, but otherwise, I dabble with languages such as Kotlin, Go, and Typescript.

I sometimes make an appearance on the speaking circuit, whether it's user groups, conferences, or recorded.

👨‍🔧 Website: scottbrady91.com

🐤 Twitter: @scottbrady91

💼 LinkedIn: scottbrady91

🧑 Timeline: my Polywork timeline

angular4-oidcclientjs-example's People

Contributors

Stargazers

Watchers

angular4-oidcclientjs-example's Issues

adding silent-refresh does not work

Hi,
I took your code from the repo and updated UserManagerSettings....It works as it should. But when I try to add:

automaticSilentRenew: true,
silent_redirect_uri: 'http://localhost:4200/silent-refresh.html'

in UserManagerSettings as you have explained in your 'Silent Refresh - Refreshing Access Tokens when using the Implicit Flow' it tries to do silent refresh but then it fails and always getting 'oidc-client.min.js:1 SilentRenewService._tokenExpiring: Error from signinSilent: Frame window timed out' message on the console. I checked other post related to this but didn't find solution.

Thanks

Could not redirect on protected page and access it. And adding auth-callback to url after logging

Hi Scott,

I actually work on a web project with Angular and I would add some Identity Server authentication on it.

I have somes questions related to redirection on redirect url after login.

Foremost, thank you for your example and your tutorial.

https://www.scottbrady91.com/Angular/SPA-Authentiction-using-OpenID-Connect-Angular-CLI-and-oidc-client

However I faced some troubles while putting it into practice.

I begin my process on my home page with this url :

http://localhost:4200/#/pages/dashboard

For the moment, I have no buttons to access the protected component. Also, I used this url to access protected component into my navigator :

http://localhost:4200/#/pages/protected

This url drove me well on identity server authentification page. However, after sign in, the returned url in navigator becomes :

http://localhost:4200/auth-callback#/pages/dashboard

Firstly, how can I avoid the insertion of "auth-callback" in the url ?

Secondly, I am not able to access to my protected page url

Indeed, when I tried to access it, it always redirect me on following url :

http://localhost:4200/auth-callback#/pages/dashboard

Instead of :

http://localhost:4200/auth-callback#/pages/protected

Did I miss something in my configuration ?

Config.cs file on Identity Server Side

new Client
{
    ClientId = "spa",
    ClientName = "SPA Client",

    AllowedGrantTypes = GrantTypes.Implicit,
    AllowAccessTokensViaBrowser = true,

    RedirectUris =
    {
        "http://localhost:4200/auth-callback",
    },

    PostLogoutRedirectUris = { "http://localhost:4200/" },
    AllowedCorsOrigins = { "http://localhost:4200" },

    AllowedScopes = { 
        IdentityServerConstants.StandardScopes.Email,
        IdentityServerConstants.StandardScopes.Profile,
        IdentityServerConstants.StandardScopes.OpenId,
        Utils.IdentityResourcesUtil.Roles,
        "ibis_api"
    }
},

auth.service.ts file on my angular web project :

import { Injectable } from '@angular/core';
import { UserManager, UserManagerSettings, User, WebStorageStateStore } from 'oidc-client';

@Injectable({
  providedIn: 'root',
})
export class AuthService {

  private manager = new UserManager(getClientSettings());
  private user: User = null;

  constructor() {
      this.manager.getUser().then(user => {
          this.user = user;
      });
  }

  isLoggedIn(): boolean {
    return this.user != null && !this.user.expired;
  }

  getClaims(): any {
    return this.user.profile;
  }

  getAuthorizationHeaderValue(): string {
    return `${this.user.token_type} ${this.user.access_token}`;
  }

  startAuthentication(): Promise<void> {
    return this.manager.signinRedirect();
}

  completeAuthentication(): Promise<void> {
      return this.manager.signinRedirectCallback().then(user => {
          this.user = user;
      });
  }

}


export function getClientSettings(): UserManagerSettings {
  return {
    authority: 'http://localhost:5000/',
    client_id: 'spa',
    redirect_uri: 'http://localhost:4200/auth-callback',
    post_logout_redirect_uri: 'http://localhost:4200/',
    response_type: 'id_token token',
    scope: 'email profile openid',
    filterProtocolClaims: true,
    loadUserInfo: true,
    userStore: new WebStorageStateStore({ store: window.localStorage }),
  };

auth-callback.component.ts file

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../services/auth.service';

@Component({
  selector: 'ngx-app-auth-callback',
  templateUrl: './auth-callback.component.html',
  styles: [],
})
export class AuthCallbackComponent implements OnInit {

  constructor(private authService: AuthService) { }

  ngOnInit() {
      this.authService.completeAuthentication();
  }

}

Thank you in advance for your answer.

IdentityServer External auth provider - auth-callback - Redirection - 400 Bad request

I am following
https://www.scottbrady91.com/Angular/SPA-Authentiction-using-OpenID-Connect-Angular-CLI-and-oidc-client and https://www.scottbrady91.com/Angular/Migrating-oidc-client-js-to-use-the-OpenID-Connect-Authorization-Code-Flow-and-PKCE to implement OIDC in SPA(Angular)

I am using aspboilerplate integrated IdentityServer

I've set up everything as per the above articles and I was able to navigate to external auth provider and was also able to enter the required credentials.

While redirecting to angular I am getting 400 - Bad request. Here are the details

Call back URL :

http://localhost:4200/auth-callback?code=b74f38054d4becadaa3c45ce58a83c892e0d25e7fc4bfcc1ef29ce369b477596&scope=openid%20profile%20api1&state=18af0415b22b4614882d3e31113e2717&session_state=yP4rCdCetarKTsX6X0JXYTeV_1Xo8dud9V2FnT-14QE.db913b7a39e26220d8ac07de5a523eb2

Cookies :
Request sent 9095 bytes of Cookie data:

	.AspNetCore.Antiforgery.xkdte50z5pg=CfDJ8FAKJpEizERFtUzdjBClgctpGC-BWtg81DZ33kUapCDBb84U7ILfbqhExQzI3oVOWReKh72cV8hdROZcCh6wK7tbwl14PnWzNIECZGxyYx-K3MINQnZEp3cp-Ury1Z4KaRHs7mqvmf6oc30h6Q-oFxI
	idsrv.external=chunks-2
	idsrv.externalC1=CfDJ8FAKJpEizERFtUzdjBClgcum3jNb_Pj5sm5cfWLtKGcBqkU1VIUHlMdupOgnYwqTNw3bjxOoeVbCR1YR9y6Y2Q6zZvxX2juNv1iiUTwVIcTAG99R0QU8Ki1EJ8uOvaVN-BgUFNXYzcrct69nxfTGj5Ay2wL18-ziLczxnqurAbgTVkgyZs6IWHgtbOwyoyJb3klbQUkt4nmNZbwNSzeYknhDq7ohwEqeva51TIw73lciD2bJpJZnxUFx9eRI7FiJcf6qM3iYzvQ9R1-IRAmTleGEul_KY0eEcf8srxjPDgCRvj_Chy14N0rJdvWvrgio2yfdKTiCam2y-xPporU1oBOupt4zuaKsnPlHzzY9NksO_Gp7TTXJi91d3P2rl9FtBbQVQQDgpuNlwKO_WWIbd_nvcns647_0Cm0-mXiPecFrCC_plifOJ3ZRQHDYd-_ykOR_8WtGVYNigh0LPn4WxHoWJujUneRVaF_ootP4I1-uzcP6oDtTdxzCBgQpsujS_gRsHzZQ4S_EUX90R_BNEfWpg9Z5je0sT4Rma_tBeDBTCtqaZEKng_n4ybbn8xZc0dwuuGsVjYDSLXXoHLhQ55MalqJmRITH2mBNl89on3l2Y_e3_N-T_ScBJOS6HUHhTbKgiA2-R3XP5T_Gd0Fbmhpyrb4uqRJDybQb3muaKwYAJg51PSoiicA927KTcfiVPUzHY7YoENJ8MqBHkonvpjw9QtrWCgn0t4wTgrj_jIkIg9VmIZFReWGDiIw1cQnvA8u0lnPdxXl0D0ywm1eKCcvliHuFiT4KM2nKhUtlg75X5w5AYBFRb8ocx6Gx4zNEuV6cXzsx0-PVkbm7DllcMu3gMchpk47rDrIUjTDqlSjnlM1JaRWbrxXAui5tvZwOdAlI3e3__RIu-hdSJNO_ZgvPkLRUBiv0weNmsUWPjLzSjP8RVj-fWWCj1DuXSeUKcWTeEiXu019Klco48i1eUKB-vqLsUZHWAc8E02A8xF3kyz8OXOIam4tOlBD03-CgUK8zf0ahdtFegsXspJ75Z7Swml8CHpPkHrdZvGrryd-UbRipNpejtde1B9-WnLhpLQjXYCZdCOFndeg9CG1L9uBpaAU9pOB-AzmLqNIa1zi5qS0h9YqlL4wHGnK0iDlSmmK9kpZuTUS2nSEqs9hDwew1asxl7LPF1sMJyhjfDBAOmcHV4kZA_E6w0Y8_JQC4vu8Oda7vVoApvolhhHPqXpmmwbHxwxv1HjmC1UBdGUOJyn1rX6ASFJnEu1mmgqD1mgXizbmPzJd_KzRUkd5F7M0DcTBX3U3_p337g3QG5WJlBE5v_2JBlh6s-G5Lxs7UNXwcEigg6amJEgcIejNKXRbynJ-IKE41kd9PvXeG29d9B27Y37LPQu0xVaH7C7Z46pkASHZVrcPGLOoN0gHBTNwGaDUfca8Sb2bq3umhNjzK5uNxLaEZErCmjQQzUidKHcbWyuHC0ht0X1phOJv6hMTiUroYVaTP-ma_B350Z0euJq4atEPu59-Redz56aYtuKBW13axJs8qtsvXolwkGGboHzB-gj8PjDrT-iHGVMnoXVLkkOM_nYzfY5PwnaSWUdPtXnI6hxTlJomU5Bvhm-7TKLfB4bl3Fel4MM0QdrTQJz28FBTVFizzdksoPB4N_3jfSZsR373mN0wdtqpEjmKNUvGnVNX5wTc_3oMTO0cprxSVXwUK23phkomKHUYMZ8i11Z7T1mZHx5Yci1CMp-mHqTD-fBbmSK7YYvwtsSLeeI7u4cH-IYRl_3YQtxrFLwqTOzWllcz_JgbvwNXPYirLj0EVqGwttipg8QIuNyJIaPAnovTpJVI15ioJKfS9F9xlx-JVETbgxK3Py259pbTu8r-jHEZT0YdlItIZO-t5FM6hlTHAtQ2SuY8kdFQyBlUNZQPpw3ft6cz6mUt-2CcTdZ-xibkEdr7dEAZflSIrhL3Kt4lrdNalI5j68zG_0g9qfcXKTaqyMN0bawAzBfmaWAIp-u1KZb5vi6Kwf9ZEcNYF4fzHjHIOSNmySgiaYt2zH8EvbcJbTQmfBhuLOG6zBDU1-fDTK4-eBPkRJWEh4OTHm0jC8GV_N-80CrbUxjJUzoBWJXReu-sE00d4zBVHTHNJDlShXlyUPb_vqaGCJDFIlEEZUjyvAdwP0eOOeuhSz6jYicK9WwaZgsoLLsyeNZwLEOLftEBAax5ddoUdwe2kwxJ9eMZd_TE4YYzI9ZI37QAjzfhf573n8l2V--UEr-Kt6asTxzNvg1gK7doRns66W7KC6qnL_9ApLeoZ-hOX2QZ2J32D78mk5h4Dtv06lsNm4pBs8855PeZ7ygBu-p1edi1UjEWLzIxHxQ8YNNErP-U75HDgStXVRBY7CuXqz8RVc62Pjrj6z3Z98nV3KfcYJloq-Qejg1oSmFLgHrs5tTecL3caIopMy_MV0XRg6ly7cZtWq_8GQclQP_-6nTGy2ucN9ncj6sSjbFXxtKPV3bLAUm_JFtMfzzjR4TxP8s95zOiBwF5XXlLPu5QzBOoprI4Qf_XhmlTe8_1Z7X_HzCZSfWtgSDMEmcyOXxp4sPeKnh4U7o6ZlKukGz14F7gB94l0ZEHpbtOScRWb88o0fisHQv_G2Erslx3O5sGDMQG8G_W7d6IMBs1FFU1wcy8gmAznDbgFxtEPmXwdcoMY5MxliQQ8SrmREP_fU32jfGox5BiebA10BtQKjctJdnF_KPu3UzFuPGjFncCrpT74J3bR8O7BTUY175pOR2Vw4dtPCubHDeLHzFT8QWsPOO0CUS1kbtlooYbPS292E8lawWmYcFMcYsDq5x40NeX4-NVLuL0DvaqC_tgBLqvjDsrv6hQy6xQBoJt0PtfB-X0n38TCl9jwmpA3IiLR77FEAbpf0RRs4NB1_fIs9nSgK76JFPunxZ8jsgOW1ERNBTjgCaO72tct0l6rtrZAD35fu6KPBCFsofdoRpw5e5hxiq_Py2nYniCv6BkDLezt5wyYW83Zh8RJ1MQgZxNg3mJj0yvs0b3shdmxcjYZruCswCpcYHUCmqsTIjj4yQOHY15c8R50Asq4-eBuf3FhrIY7UWftvY3f3yL4IRQyX93oD0o1SCgpULpzR3dUAJD-QId3fHHbq-fC80Jqs09LP-HA9r7SutOSDpbcH-qD6ZDIVMddxGNOSyEVEN21fNPMUmVD-7u3-B9hmTrmb48HJLAQn9JjN7SdYjlNOoiyzwqZchnmWE3Twuro0S-GBryAqKdF7eQKpPqgtOks03JcXFERS0iRIJLZe3syjY39SZbhYMahkAc0D2TnJdUSxc-g85H_e0GobgE6R74fAwKeFDNrThwaULJBQTq0EWFikOMpZFzylfluw1M9U4ad-f53bYHPcvKFw8giZN6N-VM6qLrg3D3oU5169cXpmbRDeawreIOHvlVoIfhRZu7cSkARO0AGmL9XUrGivRNgMyDXRBIgIn_tbIPFvIrWkhgcZZZZP2t4YFzhn2MvKoHEFAfQHFFQ4jvCv-Waof19dRzbMSjS_Vz9qPzslbUjYATnIykQCeylOybDQKl5b6QVwmz9ioSl9OrJNFbzy9TDXSqjgCnefoHdZyVubpHSCADKJMB4FnLK5IdCFwcn2MSz_FuZzuCzDzR1B_WNTMuLQBR7Ks70uizUOJ8BKI7tuMO9nU9N6AQ7Preb_XRLVFJ31ISl5DvrQxyh__1Uet1IuT1vYrH4owFgaTnwOPRMPNxmnUTJRsbyEFdP6p6kQjV8zrId3qhBDIRMTfuOgT2n4awFqGbIM5DUnag003rbzpqD5zuL1RAlCfwyf2Yx0u0qY3es-zJV9CtlzU7X7YR-GBDSVJCKSqRRNg7YY-B2Y2E53Wudp6DDzVFuGs5G-XGJKzq3mru5h1CWaplCNgpDkdaRId-mfp1p2EP0vmoVkQnlkXqT0oJTsOBSTLKDrCfkniMbmKP_afqWS5jn6BmRDuFjEhdhl6Wa2GkMznTps_g9My
	idsrv.externalC2=TudWp3eg3iUDnXn_uBCELCcSM1M6cxDlaF2RtsIFq74WusG6xZaIXZi033_2psAUpYZ-rKCn-fR-0p9RsHfw4Tot6oTODOcVUeF61Q3Zw6yoXZp497mMT3u-RMB58Yai5pUSMJk1Ex_2H1ekLjks9_ngpns76ARB3dWi_gzblCLQ-zSujcPw7ksoBLlt2X_h4B3w6Y91lCyHkn77NcAKdTiVgRs4-nX33NEr7Rogr3p365AV9vrJqWIl-eP7I0Di4mQn-EUZAd6C1iqBA-Af0wp3Nm2OmJJr-dEoPpppha7wW0_3IGk4_O_0cZjv5e0-63ER0X3cB5ZoKzRarKkdNEm3uBgcexGLOWJyTL8ntrXfytxxC0iP4DiO-wSnydrD0r-k6F9iLd_-pSuz30MnHDAAXn0141EC7gLr-J1EFS3ou2b8ocjIjJUF9jZ_V9IfibMrI_K7o4e-Yk5uhvjIzOq_usu2LgDhLjLIYXYwX_lQPX-D_z9Apn5IfE6iaGpc2ziqocj2uDFEA_j2dKtJBiyRylBcv89BJfWcsNHLybiB1dVBSFeRmQx_Bi24Hv0fkjw-7FLIFnGHv0UM2t09zp6QL4T9K7ggxOZMWp1-l4yIfnJRBDOVzSUcJZLEmAzv-lFcppUOtvrUmERDHItWFI2IF56flIGH5bLv7FJBFCW8Ke4HcI70EiWwBSHvO6JionGOrXpsAmVGW3WbfVH-iTrepjmYeJpzsKJbjBWvtTOy4BjcxjUe7S0UZvrMIpulv-bH8EJhT-ZnSublufZBtnUa5AB8Eo746zPmoEBhFETx_kGMKtwG11Cj_awV2xlY4P7Teb1UsNYvncPHn7B0gPRq-e3MHeqo0O8GgKcnZb9rR96NpBsLqZ64D--9kbYengtKR25guD1lRRb2ijqkC4aCp7hD7ohE5RjggPoxo5wr8ZQA4-c2HT_uwlpe-QpyY_GdFErAW-eT0sSA0JljDVTsgFFt45CP2Hid2gqRX89-vgBVXjmV9rTZHocGEBg-PgQP0TGeGQMg6RWL9ryzsb0auFRBhiAPkyoPonTNKM_Uh2tSVXKZB27T-dAJRXF4qZ6sFzAgQsrJxphmucPUuFw1RnaFGSM3swf4A8JR6egRegMIHq2qci2uEUyQnfSTYLciNvur5OXXkfYCEb73KaYwzI1I32FUnJ3RsrQPSgS-RhNHSlrfHgf6DjAqa5VNk3u7c4RIreVTxI-ZiGjLJgxHxHUuSIyiKnClH1WrZBZ0yVupkmjcNd08jMbAEIUeP43tMg_Mwl9zjN6kGQdbDbRMNqGw6cIv7_6cCPcT0Uc5e8biHEYdLO6MPsCbH9bOEjVluRY76g8-CNQx188rxm_C1-qmxqbjGlHmebmtA9Gm4WR9RJ4ZBZkuMjMNn-rZv6fuVBtOUxzFUj0RZu4p5yhURxLRDh8OAAYj3gMd1TJ4qXrITd6Qa3VCnaCe9WHJgAEmfHjUiFulqTsv6NIFZiZfr4JysHSSk6qDAwdLDHEfb-XjM7EbS6h-2ehU1wLM6HvXv2PMpq05leZ30XYHpM0m-JGT4iOE-23jcEYba8kx8FpPAEvMaxllEMx-U6cXpaSY7gICbk08mrZJoRwqm1x14JsfWnS40NxypgaEm4Ofz32YP0gzg_96wwS5dPgEU56gS6iQLfdLwyuME7KLcVNGRs0fGDH7hsfBZk1FwBpOQO2o60dsxZTtIHqKnftVrn2fhoc2Q6Cpe3GKPHD3fIzga4_umSTZL_uQg_XTi_01IYRr5dSKQ1GwQVM6ELf1o5Un4YiCZ3qOpjioKWLapQwckdUrKjg95Lxlnq7TkkTlB2C33tjgo_UQ-CLxSYEGR78m0USywEfXi6N0LS2MaDmu0rNY_UweMs9EV0r_y2KqqLy_afFrn3IWn5XcmAaDhI59a_yRtkNYXMnKP3rexMYSdHSY10AVgPO88U-_5nelN5CX4zwNnJsyjD8sno59zEPq1UPvW5q72USgnt3wY4YWSPfkkhNBWr16pKSmTUkuaWtbcP9MQg0uwrHhlQAXcM
	idsrv.session=3a7192efc6a9690cb33226c0241d91be
	.AspNetCore.Identity.Application=CfDJ8FAKJpEizERFtUzdjBClgcva9BrL5NevHGMOeN3Y4e-BtNupVoy3JNq-gAf0-xVS97cU9-h7xQXpsv2zJP6nx5leh2DsRxN4uwXPrxiAoJgdfXyTFvhtATpLLRmWPEFnLSH1hD8BTV0U2b2kbBAFl_ny-27_-xoZdV72SVkJcrwAuWCZkNpMcBdGfmNMWXwyL1c8cz684o0oWicEyHvquOdHW_bBpkUrXSQK9b42pln40tPVBlYFLMEgMDKCwWGwYcR8_gx5P0dyobN1R0RHYXFXiwkFNWzz9ZsEpKk9wxWF_Hn7XDNuVV4IiLRwQiVm60njvg15gKUlxPpYQY-8C7oTRPsgZGvSqisVbSlF1EyoLsarDak_Yns21HEQY2AVGs2VxuPidNe6cRdjb5sIRuHUX8kDawttIu8MnrHyLRjaF94Zz-qrCpZfYiHOtfpu7VVg_7HBNusMBOy9xJQLXBftgPamYkCFhnXepQ34RJiM3-1yfQNibj-TaVvSHtt7_lyQdwcnX2MqjxyX3XI7uYqyYT6ela_qBg1C-bTYoiFbiqcv8C_dME9RsBdB_V7q0BtSPvgcHrG5lUJlvksAGyUzo0fQn9dzdEjKU86CaQ_XD349PPznjRe8Tk1E67XqI0CzPhB3RzV_sHdy4Ghfq7MP_WXvOy3hc0mH4TNN03AbB7_aHcIojeHVNh7cyfmcJ-9A6n0jCrSXHxEdf66jjc_VMgxk3nytS_g749s84jAajtxBGnXmqvAnqEYuZZgTAJFMaajq5rrxBU_X_W0DQbErZu3fQU6e_LYrJxAIcXfy4Qh-iynY1flPZBihr0S3qfOxUhrvpB64zq1b3fa9r5edByt9tgBm8KK-wC0b9JjF6kms3rn3YrJIJF00lUG8vZ_MfRr_fU3-e6rG7eQn6YTiQK2ZFfnEo_dzTegfDTJ2fez984jJzJFSC0s47rrb4N2ofoHpAqqqybEWW2UQtURvOU2d5CLRvo32RTI4EBD6bKbv4k92TBpOsZe09ipHmAO9cIBTNfCEkm7AYjv_ZvRrasb6kU7GcrNwRUx1k4fcmDnEeBZZgMbMjWzE6ieJ2miqxOiA3z2vuYcPTMB43vjKjqeAsn5juCx7l4Qo_zdE9UEqLlBSmEOA-UQsdg6m9Dz48QmW0XIxZ1WGVPz2Dbot4zVrgRNg5FzLpUwsvyd3IoLmjSCnvUxNDAXYN2zlUr2ToGVU6O2fYhjmJHRqTVepTebaZ-qjAzex07SR0Oo-LZq0780WKdKIiq5wNNFTVxN30tZuPcfPqd7CBIfZzlkMlyko_RUs18ZiZ8bQaiDLWSbLV-d6nNCO_TSDbLLWkr0gc6BW0ZM8G6BdCVCS6Pb5WlkVGuwejZ5QXSHjPEfqbr06_6FqnrcRts7irjDWnw1GpnT8jkSlwPnLFkcCndm90nWbQ-EKns1qEXQi-m31jdP7m3i83Fyc3pxpcgkTFi0cLfFc1hswdacpBCHPwyDikQ5mszondBiqCHDzZMy635jq8HHREfnJgDNUxkj1WOKnpwCFa6GLWsN1w_U8KpvTEpXM87PRTqIhZW6EfnLzZHuWGpuWCiEATDyyVvgJFIOxQeEHqfXDPPTxl0EuDYCC-9eaw6q0AcgNYbAqlXHWCgqcXshpI1qVu0aQRP_81UT9vk3orUZNZqD-WSA_GHRUTVMedpp-piqDEZ-q35V_NIzhrUwyflpCcTItrhy57-IJbHujRVosl8x6s2A9J_JytTK9y4lqfBe38h6dQtPNOdjhkA_ioWdvWn2KFVLtULnapFScWLm4ew-Gbrxfrmj68JzmsKUOKmm6i0o2Y0JMEg9gsExTh1K3Z_e_DCnfJl3XGgB6Q5rX_qzcvqwyldPn1xJyXealA5KCi38hqsI0wy5-LZhiIUt6PEQX_WNF5wiL9jkT_6-qVfUhlRB87tcqx6YHwdwlYUErsNkrRwZJQrtXxDJoZwEWYy31Ehpi2XVoKTksNGdvHbJcPtFBt7BactgMy6MRu0LVTI8XFhVaG-9LaiHAq9U3c2vblpNjdlBW0nrujZo5MaV5xroyrL3PxZ3j9oj3FzbtgcN_ys5J8FMdhTBAaN5V_YtAWpBH1kP527q_raw1wWdnIvLKQk9hsQJqdldZoKM6mZgyE5_lAWzLs1KN4xwD7Gbz3uQVoaIdIGGsW1iXhB6wJ7WeN9vD6kAJBiI9aHn_iJLmh-QPEWPdMntVipec4UXAACVXPX_QmOvFYxdVhSQp9tdmzpvAfVpQpsbrF29ro0olru0Aimv73wMp4UtIacGSu2T7rHfwkXJ05o9IDuUnjOC9oXMhxLvz_dBwjHeHt_B3BvBQ-XNSEQra0fD0MzJ3GBRqK1vUWRJQzaUmfZF5aE39az8qoRZBAYKFrAzqE8Y2IsEK6UhrJj4QuJ03l_skguhXuraLyH-IO6fnRqF5lZQgO81RIZKDvRlhNrcGJsM6yOotUXXTpVz9xjOtn1rMO1woO0up8kr16vlcRKp_TUh_VqDvV-AbY93ZYBUuvVUiLonGaOK7V3X7uqJGFsh0f27hy7CKYyjviPLo9eEs_oMsjh34cLEzDEPSZtgdqbv6_82ruVRA6S5wKWr6v3HluBVjJP7Q8iBJbLzFfl85ihIjj04hYZQmBUx0E0a646NVETdibYC7zcmdtGOUb045Nifb3A

IdentityServer Config :

public static class IdentityServerConfig
{
    public static IEnumerable<ApiResource> GetApiResources()
    {
        return new List<ApiResource>
        {
                  new ApiResource("api1", "My API")
        };
    }

    public static IEnumerable<IdentityResource> GetIdentityResources()
    {
        return new List<IdentityResource>
    {
        new IdentityResources.OpenId(),
        new IdentityResources.Profile()
    };
    }

    public static IEnumerable<Client> GetClients()
    {
        return new List<Client>
        {
             new Client
            {
                   ClientId = "angular_spa",
                    ClientName = "Angular 4 Client",
                    AllowedGrantTypes = GrantTypes.Code,
                    RequirePkce = true,
                    RequireClientSecret = false,
                    AllowedScopes = new List<string> {"openid", "profile", "api1"},
                    RedirectUris = new List<string> {"http://localhost:4200/auth-callback", "http://localhost:4200/silent-refresh.html"},
                    PostLogoutRedirectUris = new List<string> {"http://localhost:4200/"},
                    AllowedCorsOrigins = new List<string> {"http://localhost:4200"},
                    AllowAccessTokensViaBrowser = true
            }
        };
    }
}

Angular Configurations :

export function getClientSettings(): UserManagerSettings {
  return {
	authority: 'http://localhost:44380/',
	client_id: 'angular_spa',
	redirect_uri: 'http://localhost:4200/auth-callback',
	post_logout_redirect_uri: 'http://localhost:4200/',
	response_type: "code",
	scope: "openid profile api1",
	filterProtocolClaims: true,
	loadUserInfo: true
  };
}

Kindly let me know what could have gone wrong

please change the following code

Hi,

I found a problem with your code that fixed issue with my on refreshing the browser and losing the data which I struggled for weeks.

change this:
private user: User = null;

this this:
private user: User;

What I found is that this fire on initialization and when you refresh browser and it is injected as a provider it will reset the value. Ultimately thinking your are logged in on the back end, but not actually loggedin on the front end because you can't retrieve any user data.

could not complete authentication: Error: Unauthorized (401) - IE Browser Windows 7

Hi All,

We are facing the could not complete the authentication: Error: Unauthorized (401) in IE browser window 7 OS.

The IE Browser version is IE Edge.

could not complete authentication: Error: Unauthorized (401)
ERROR Error: Uncaught (in promise): TypeError: Unable to get property 'profile' of undefined or null reference
TypeError: Unable to get property 'profile' of undefined or null reference

Create redirect auth_callback to a protected site

Hi Scott,

first I want to say thank you for your sample. It works as demo but I am missing some real life ascpects it could consider ;-)

According to http://openid.net/specs/openid-connect-core-1_0.html you just have to define a redirect uri registered at the IdP thats it.

Well there are open questions looking at your sample:

Should the auth_callback route be protected by an AuthGuard? Only authorized user should activate that route?
If not, my real life application has ONLY protected routes. The Register route is done at another application and the Login is done by the IdP mvc ui. So when my auth_callback route has an AuthGuard
then the auth_callback_component with the authService.completeAuthentication() function will NEVER be called because the AuthGuard is called FIRST doing this:

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Observable<boolean> | Promise<boolean> {
      if(this.authService.isLoggedIn()) {
        return true;
      }

      this.authService.startAuthentication();
      return false;
  }

The authService.isLoggedIn check wether the user is !== null thus the user was not reloaded here yet by the completeAuthentication function the startAuthentication function will be called. This again triggers the auth_callback route and everything starts again... now it gets recursive...

As I said my app has only protected routes. And making a redirect after authorization to the auth_callback route always hits the AuthGuard first which wants to start the authentication again as the user is null.

Do you get my dilemma?
Maybe you have an idea :-)

get new access token without redirect to authorization endpoint

How do I get a new Token from Token Endpoint after expiration of the token without going to the Authorization Endpoint and then redirect to Callback Endpoint?
(so that the user does not understand it)

It is possible to add to route parameters in redirect_uri?

Hi
How can we add the router parameters into redirect_uri is it possible to do?

Protected-Page and API are still accessible after logout from identity server!

Protected-Page and API are still accessible after logging out from identity server!

Any Ideas or solutions? :)

where do i save this information, unable to access after callback.

Hi,

Thank you for tutorial, I am having issue with saving information of user data, so i can access it to other pages, able to access on callback url, but not anywhere else when information is in url. Can you help me out please.

https://github.com/premiumwd/a

how do i retrieve the file userinfo once authentication completes? This file is responsible for getting claims.

user object not reset when complete silent refresh

hi, I implemented silent refresh operation in this project, but after each silent refresh operation, the user object in auth service is not set to the new information, which causes the problem in isLoggedIn and getAuthorizationHeaderValue function.
How to set the user object from silent-refresh.html file?

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.