使用 LinkedIn 进行 Angular 6 社交登录

Question

在过去的几天里，我一直在尝试实现 LinkedIn 上的用户登录，但出现错误，并且在 Google 上搜索没有结果。

1. 当我的登录页面加载时，即使我没有单击 LinkedIn 登录按钮，LinkedIn 的弹出窗口也会自动打开。

2. 当我单击该按钮时，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);
    });
  }

}

Answer 1

可能您正在使用 Javascript SDK，如果是，那么 -

LinkedIn 不再支持 JavaScript SDK。推荐的方法是使用 OAuth 2.0 和 LinkedIn 的 API。

我们的 JavaScript 和移动软件开发套件 (SDK) 将停止工作。开发人员需要直接从他们的应用程序迁移到使用 OAuth 2.0。

https://engineering.linkedin.com/blog/2018/12/developer-program-updates

类似的问题 - 使用 LinkedIn API CDN(https://platform.linkedin.com/in.js) 登录是否已损坏？

LinkedIn 登录的另一种方式是使用 OAuth 2.0 的 LinkedIn Rest API

使用 OAuth 2.0 实现 LinkedIn Rest API 的一些有用链接 -

• http://shanalikhan.github.io/2015/09/02/OAuth-2.0-working-with-LinkedIn.html
• https://medium.com/@ellesmuse/how-to-get-a-linkedin-access-token-a53f9b62f0ce