-I don’t know why it doesn’t work when I launch it. I’m using Angular 17 stadalone combined with Okta-signin-widget. Can someone help me?
app.config.ts
import { ApplicationConfig, importProvidersFrom } from ‘@angular/core’;
import { provideRouter } from ‘@angular/router’;
import { routes } from ‘./app.routes’;
import { provideClientHydration } from ‘@angular/platform-browser’;
import { provideHttpClient } from ‘@angular/common/http’;
import { OKTA_CONFIG, OktaAuthConfigService } from ‘@okta/okta-angular’;
import { OktaAuthModule,OktaCallbackComponent } from’@okta/okta-angular’;
import { OktaAuth } from ‘@okta/okta-auth-js’;
import oicd_config from ‘./oicd_config’;
const oktaAuth= new OktaAuth(oicd_config.oidc);
export const appConfig: ApplicationConfig = {
providers: [provideRouter(routes), provideClientHydration(), provideHttpClient(),{provide:OKTA_CONFIG, useValue:{oktaAuth}},
importProvidersFrom(
OktaAuthModule
)],
// authParams là các thông số xác thực bổ sung được truyền vào trong yêu cầu xác thực tới Okta
//PKCE (Proof Key for Code Exchange) là bảo vệ mã xác thực (authorization code) khỏi việc bị lấy cắp trong quá trình chuyển giao giữa ứng dụng và máy chủ xác thực.
};
// oidc thường là một phần của cấu hình để sử dụng OpenID Connect (OIDC) để xác thực người dùng.
app.router.ts
import { RouterModule, Routes } from ‘@angular/router’;
import { ProductsListComponent } from ‘./components/products-list/products-list.component’;
import { ProductDetailsComponent } from ‘./components/product-details/product-details.component’;
import { CartDetailsComponent } from ‘./components/cart-details/cart-details.component’;
import { CheckoutComponent } from ‘./components/checkout/checkout.component’;
import { OktaAuthModule,OktaCallbackComponent,OKTA_CONFIG } from’@okta/okta-angular’;
import { LoginComponent } from ‘./components/login/login.component’;
export const routes: Routes = [
{path: ‘login/callback’,component:OktaCallbackComponent},
{path: ‘login’,component:LoginComponent},
{path: ‘search/:key’,component:ProductsListComponent},
{path: ‘products/:id’,component:ProductDetailsComponent},
{path: ‘category/:id’,component:ProductsListComponent},
{path: ‘category’,component:ProductsListComponent},
{path: ‘products’,component:ProductsListComponent},
{path: ‘cart-details’,component:CartDetailsComponent},
{path: ‘checkout’,component:CheckoutComponent},
{path: ‘’, redirectTo:‘/products’, pathMatch:‘full’},
{path: ‘**’,redirectTo:‘/products’, pathMatch:‘full’}
];
console.log(window);
export default{
oidc : {
clientId: ‘********’,
issuer: **********',
redirectUri: ‘http://localhost:4200/login/callback’,
pkce: true,
scopes: ['openid', 'profile', 'email'] // Phạm vi truy cập
}
}
