3

Implementing Angular Code Flow with PKCE using node-oidc-provider

 3 years ago
source link: https://damienbod.com/2021/09/13/implementing-angular-code-flow-with-pkce-using-node-oidc-provider/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Implementing Angular Code Flow with PKCE using node-oidc-provider

This posts shows how an Angular application can be secured using Open ID Connect code flow with PKCE and node-oidc-provider identity provider. This requires the correct configuration on both the client and the identity provider.

The node-oidc-provider clients need a configuration for the public client which uses refresh tokens. The grant_types ‘refresh_token’, ‘authorization_code’ are added as well as the offline_access scope.

clients: [
{
client_id: 'angularCodeRefreshTokens',
token_endpoint_auth_method: 'none',
application_type: 'web',
grant_types: [
'refresh_token',
'authorization_code'
],
response_types: ['code'],
redirect_uris: ['https://localhost:4207'],
scope: 'openid offline_access profile email',
post_logout_redirect_uris: [ 'https://localhost:4207' ]
}
,]

The Angular client is implemented using angular-auth-oidc-client. The offline_access scope is requested as well as the prompt=consent. The nonce validation after a refresh is ignored.

import { NgModule } from '@angular/core';
import { AuthModule, LogLevel } from 'angular-auth-oidc-client';
@NgModule({
imports: [
AuthModule.forRoot({
config: {
authority: 'http://localhost:3000',
redirectUrl: window.location.origin,
postLogoutRedirectUri: window.location.origin,
clientId: 'angularCodeRefreshTokens',
scope: 'openid profile offline_access',
responseType: 'code',
silentRenew: true,
useRefreshToken: true,
logLevel: LogLevel.Debug,
ignoreNonceAfterRefresh: true,
customParams: {
prompt: 'consent', // login, consent
},
},
}),
],
exports: [AuthModule],
})
export class AuthConfigModule {}

That’s all the configuration required.

Links:

https://github.com/panva/node-oidc-provider

https://github.com/damienbod/angular-auth-oidc-client

3 comments

  1. […] Implementing Angular Code Flow with PKCE using node-oidc-provider (Damien Bowden) VMware Eases Kubernetes Dev Woes with Tanzu Application Platform (Darryl K. Taft) Announcing the General Availability of VMware Tanzu Kubernetes Grid 1.4 (Donna Lee) Next.js “New Post” Node Script (Elijah Manor) Azure Machine Learning Environments (Luis Valencia) Is Blazor the Future or Just Another Walled Garden? (Matthew MacDonald) Creating a Game in Blazor – Part 1 – Moving Objects (Paul Michaels) Node.js Performance Monitoring (Stackify) ESLint v8.0.0-beta.2 released (ESLint Team) I completely ignored the front end development scene for 6 months. It was fine (Brad Frost) Train your machine learning models on any GPU with TensorFlow-DirectML (Clarke Rahrig) Node v16.9.1 (Current) (Richard Lau) […]

  2. […] Implementing Angular Code Flow with PKCE using node-oidc-provider – Damien Bowden […]

Leave a Reply Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK