В последние несколько дней я пытался реализовать вход пользователя в LinkedIn, но я получаю ошибки, и поиск в Google не принес результатов.
Когда загружается моя страница входа, автоматически открывается всплывающее окно для LinkedIn, даже если я не нажимаю на кнопку входа в LinkedIn.
Когда я нажимаю на кнопку, откроется всплывающее окно входа в LinkedIn.Но после предоставления учетных данных я получаю следующие ошибки:
Это мой app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { ReactiveFormsModule, FormsModule} from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MaincomponentComponent } from './maincomponent/maincomponent.component';
import { HomeComponentComponent } from './maincomponent/home-component/home-component.component';
import { SignupComponentComponent } from './maincomponent/signup-component/signup-component.component';
import { EqualValidatorDirective } from './directives/equal-validator.directive';
import { UniqueEmailValidatorDirective } from './directives/unique-email-validator.directive';
import { UniqueUsernameValidatorDirective } from './directives/unique-username-validator.directive';
import { UniquePhoneNumberValidatorDirective } from './directives/unique-phone-number-validator.directive';
import { DatePipe } from '@angular/common';
import { TokenValidationComponentComponent } from './maincomponent/token-validation-component/token-validation-component.component';
import { LoginComponentComponent } from './maincomponent/login-component/login-component.component';
import { SocialLoginModule, AuthServiceConfig } from 'angularx-social-login';
import { LinkedInLoginProvider} from 'angularx-social-login';
const config = new AuthServiceConfig([
{
id: LinkedInLoginProvider.PROVIDER_ID,
provider: new LinkedInLoginProvider('81fbs3fvxxwl73')
}
]);
export function provideConfig() {
return config;
}
@NgModule({
declarations: [
AppComponent,
MaincomponentComponent,
HomeComponentComponent,
SignupComponentComponent,
EqualValidatorDirective,
UniqueEmailValidatorDirective,
UniqueUsernameValidatorDirective,
UniquePhoneNumberValidatorDirective,
TokenValidationComponentComponent,
LoginComponentComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
SocialLoginModule
],
providers: [DatePipe,
{
provide: AuthServiceConfig,
useFactory: provideConfig
}
],
bootstrap: [AppComponent]
})
export class AppModule { }
А вот и мой компонент
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { AuthService } from 'angularx-social-login';
import { LinkedInLoginProvider } from 'angularx-social-login';
import { UserApiService } from '../../services/user-api.service';
import { Login } from '../../models/Login.model';
import { NgForm } from '@angular/forms';
import { SocialUser } from 'angularx-social-login';
import swal from 'sweetalert2';
@Component({
selector: 'app-login-component',
templateUrl: './login-component.component.html',
styleUrls: ['./login-component.component.scss']
})
export class LoginComponentComponent implements OnInit {
login: Login;
userRoles: any;
return_url: any;
role_id: any = '5b119f9f80c2292148006613';
user: SocialUser;
activeRec = {
'background-color': '#fdb614',
'color': '#fff'
};
activeJobSeeker = {
'background-color': 'white',
'color': '#fff'
};
constructor(private userApi: UserApiService, private router: Router, private route: ActivatedRoute, private authService: AuthService) { }
ngOnInit() {
this.userApi.getUserRoles().subscribe((data: any) => {
this.userRoles = data.data.roles;
});
this.resetForm();
}
resetForm(form ?: NgForm) {
if (form != null) {
form.reset();
}
this.login = {
username: '',
password: ''
};
}
changeRole(role_id_param, role) {
this.role_id = role_id_param;
if (role === 0) {
this.activeRec = {
'background-color': '#fdb614',
'color': '#fff'
};
this.activeJobSeeker = {
'background-color': 'white',
'color': '#fff'
};
} else {
this.activeJobSeeker = {
'background-color': '#fdb614',
'color': '#fff'
};
this.activeRec = {
'background-color': 'white',
'color': '#fff'
};
}
}
OnSubmit(form: NgForm): void {
this.userApi.userAuthentication(form.value.username, form.value.password).subscribe((data: any) => {
if (data.status === true) {
localStorage.setItem('userToken', data.data.token);
this.return_url = this.route.snapshot.queryParams['returnUrl'] ;
if (typeof this.return_url === 'undefined') {
swal({
type: 'success',
title: 'Yeah',
text: 'Welcome to UberManPower',
showConfirmButton: false,
timer: 1500
});
this.router.navigate(['']);
} else {
console.log('TEST');
}
} else {
swal({
type: 'error',
title: 'Oops...',
text: data.message
});
}
});
}
signInWithLinkedIn(): void {
this.authService.signIn(LinkedInLoginProvider.PROVIDER_ID).then((user) => {
this.user = user;
console.log(this.user);
});
}
}