node.js - 使用 LinkedIn 的 Angular 6 社交登录

问题描述

在过去的几天里，我一直在尝试在 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);
    });
  }

}

标签： node.jsangularnode-moduleslinkedin-api

node.js - 使用 LinkedIn 的 Angular 6 社交登录

问题描述

解决方案

推荐阅读