In my Angular app I need to authenticate some visitors with Azure e some guests with Keycloack. I'm trying using MSAL2/Azure and Keycloack. I can login/logout with these providers only separately. So, I made a comment in app.module.ts
//{
// provide: APP_INITIALIZER,
// useFactory: initializeKeycloak,
// multi: true,
// deps: [KeycloakService]
// },
and I moved the Keycloack provider in a component
authkeyc.component.ts
#Component({
selector: 'app-authkeyc',
templateUrl: './authkeyc.component.html',
styleUrls: ['./authkeyc.component.scss'],
providers: [
{
provide: APP_INITIALIZER,
useFactory: initializeKeycloak,
multi: true,
deps: [KeycloakService]
}
]
})
but I can't use "keyclockService.login()" in the component.
Some ideas?
Thanks in advance.
Sergio
Related
I am working on nestjs backend app.I have google access token from google auth playground and i want to retrieve user data from this token using jwt ex. like curl http://locahost:3000/user/profile -H "Authorization : Bearer jwt".I have used jwt strategy from stackoverflow Authenticate Google JWT in NestJs question but unable to get data getting unauthorized error.
Below is my code and jwt strategy
JWT Stragy:
#Injectable()
export class JwtStrategy extends PassportStrategy(Strategy) {
constructor(private configService: ConfigService){
super({
secretOrKeyProvider: passportJwtSecret({
cache: true,
rateLimit: true,
jwksRequestsPerMinute: 5,
jwksUri: 'https://www.googleapis.com/oauth2/v3/certs',
}),
jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
issuer: 'https://accounts.google.com',
algorithms: ['RS256'],
});
}
async validate(payload: any): Promise<unknown> {
// const { email } = payload;
console.log('payload t',payload)
return payload;
}
}
App module:
#Module({
imports: [
PassportModule.register({ defaultStrategy: 'jwt' }),
// JwtModule.register({
// secretOrPrivateKey: 'secretKey',
// signOptions: { expiresIn: '60s' },
// }),
AuthModule
],
controllers: [AppController],
providers: [AppService],
})
export class AppModule {}
Auth module:
#Module({
imports: [
ConfigModule.forRoot(),
],
providers: [JwtStrategy],
exports: [JwtStrategy],
})
export class AuthModule {}
I have an app which uses MongoDb and I am connecting to MongoDb by calling MongooseModule.forRoot in replies.module.ts, now I have another module called replies.module.ts and I want to connect to another collection but in the same database, should I use the same method in the new module and just change the collection name? does it won't create a duplicate connection to mongo? what is the best practice for that?
Reviews module: reviews.module.ts
#Module({
imports: [
MongooseModule.forRoot('mongodb+srv://user:password#url/reviews?retryWrites=true&w=majority',),
MongooseModule.forFeature([{name: 'Review', schema: ReviewSchema}
])],
controllers: [ReviewsController],
providers: [ReviewsService]
})
Replies module: replies.module.ts
#Module({
imports: [
MongooseModule.forRoot('mongodb+srv://user:password#url/replies?retryWrites=true&w=majority',),
MongooseModule.forFeature([{name: 'Replies', schema: RepliesSchema}
])],
controllers: [RepliesController],
providers: [RepliesService]
})
I think you can do what you want by naming your connections:
app.module.ts:
#Module({
imports: [
MongooseModule.forRoot('mongodb+srv://user:password#url/reviews?retryWrites=true&w=majority', { connectionName: 'ReviewsDB' }),
MongooseModule.forRoot('mongodb+srv://user:password#url/replies?retryWrites=true&w=majority', { connectionName: 'RepliesDB' })
]})
export class AppModule implements NestModule {}
Then you can use your models, for examples in dedicatied modules:
review.module.ts :
#Module({
imports: [
MongooseModule.forFeature([{ name: Review.name, schema: ReviewSchema }], 'ReviewsDB')
],
providers: [ReviewService],
exports: [ReviewService],
})
export class ReviewModule {}
And the for replies:
reply.module.ts :
#Module({
imports: [
MongooseModule.forFeature([{ name: Reply.name, schema: ReplySchema }], 'RepliesDB')
],
providers: [ReplyService],
exports: [ReplyService],
})
export class ReplyModule {}
Do not forget to set the connection name of the wanted database in your forFeature declaration
My whole application is built as a Library and with RoutingModules and Page.
I have no problem with my Routing as is. But as soon as i open my Capacitor compiled Application in an Emulator and use change Routes for more than one time i cannot use the Back Button.
When i do so my View crashes, mainly the router outlet and i cannot click on anything in the content of my Application. The only working modules are the ones not provided by my router outlet but in the html
library.components.html
<components-header></components-header>
<div [#slide]="getDepth(outlet)">
<router-outlet #outlet="outlet"></router-outlet>
</div>
<components-footer></components-footer>
<components-loading *ngIf="Loading"></components-loading>
library.routing-module.ts
const routes: Routes = [
{
path: 'homepage',
component: HomepageComponent,
data: { animation: 1 }
},
{
path: 'report',
component: ReportComponent,
data: { animation: 2 }
},
{
path: 'settings',
component: SettingsComponent,
data: { animation: 4 }
},
];
#NgModule({
imports: [RouterModule.forRoot(routes, { useHash: true })],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.module.ts
import { AppComponent } from './app.component'
import { LibraryModule } from 'my-lib'
#NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
IonicModule.forRoot(),
LibraryModule.forRoot(Environment),
LibraryModule.scan(AppComponent)
],
providers: [
//File,
{
provide: RouteReuseStrategy,
useClass: IonicRouteStrategy
},
],
bootstrap: [AppComponent]
})
export class AppModule { }
it makes no difference if i import the RoutingModule directly inside the Application or only in the Library.
iam trying to create my own component using Ionic 3 i follow this steps
Step 1 - create the component using command line
ionic g component collapse
Step 2 - add within app.module
...
declarations: [
CollapseComponent
],
...
entryComponents: [
CollapseComponent
],
...
Step 3 - Trying to use the tag
collapse
but i have this bug.
I've tried many alternatives and nothing has worked.
collapse.ts file
import { Component } from '#angular/core';
#Component({
selector: 'collapse',
templateUrl: 'collapse.html'
})
export class CollapseComponent {
text: string;
constructor() {
console.log('Hello CollapseComponent Component');
this.text = 'Hello World';
}
}
* component.mudule.ts file
import {NgModule} from '#angular/core';
import {PopoverComponent} from './popover/popover';
import {CollapseComponent} from './collapse/collapse';
import {IonicModule} from "ionic-angular";
#NgModule({
declarations: [
PopoverComponent,
CollapseComponent
],
imports: [
IonicModule,
],
exports: [
PopoverComponent,
CollapseComponent
]
})
export class ComponentsModule {
}
You have to write your component like that :
#Component({
selector: 'collapse',
templateUrl: `<URL>`
})
export class CollapseComponent {
}
By default, component tags have a prefix like app. You can also try <{prefixe}-collapse>.
selector field is the most important
I made a button related to login with facebook.
when I click the button, it doesn't work at all.
I added the codes.
what should I do?
please, help me!
I have done that and it's working fine on the real device.If you have any question, please comment below.
Play with Git Repo.
Cloud Plugin for more info.
Note: Fork above git repo and play with it.
app.module.ts
import { CloudSettings, CloudModule } from '#ionic/cloud-angular';
const cloudSettings: CloudSettings = {
'core': {
'app_id': 'd32c02d2'
},
'auth': {
'facebook': {
'scope': ['public_profile', 'email']
}
}
};
#NgModule({
declarations: [
],
imports: [
CloudModule.forRoot(cloudSettings)
],
bootstrap: [IonicApp],
entryComponents: [
],
providers: [
]
})
export class AppModule { }
home.html
<button ion-button block type="button" (click)="fbLogin()">Fb Login</button>
home.ts
import { Component } from '#angular/core';
import { FacebookAuth, User } from '#ionic/cloud-angular';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public facebookAuth: FacebookAuth, public user: User) {
}
fbLogin() {
this.facebookAuth.login();
}
}