使用 LinkedIn 的 Angular 6 社交登录

Posted 2023-03-07

【中文标题】使用 LinkedIn 的 Angular 6 社交登录

【英文标题】：Angular 6 social login with LinkedIn

【发布时间】：2019-04-18 18:52:03

【问题描述】：

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

【问题讨论】：

如果代码不可执行，请不要让代码sn-p。您应该编辑这篇文章并使用 作为示例代码。也不要将图像用于错误消息，只需以纯文本形式列出即可。

我遇到了同样的错误。看起来linkedin的js sdk最近被改变了。 web.archive.org/web*/platform.linkedin.com/in.js 我们在本周初工作的代码不再工作，我们没有更改，也没有更新 sdk 文档。跨度>

@a.stringham 正是这就是我面临的问题..但无法提出任何可能的解决方案，也没有太多讨论这个问题

【参考方案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

类似的问题- Is sign in with LinkedIn API CDN(https://platform.linkedin.com/in.js) broken?

---

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