將前端連接到後端：passportjs-facebook，angular2，expressjs，身份驗證

tldr：我如何路由到Facebook進行身份驗證，然後檢索並使用返回的json對象以用於回調函數？將前端連接到後端：passportjs-facebook，angular2，expressjs，身份驗證

我的快遞後臺和Facebook身份驗證策略正在工作，我可以鍵入localhost:3000/users/auth，它會將我重定向到Facebook，在那裏我登錄並使用json成功和我的令牌重定向到users/auth/callback。它將我的配置文件數據填充到mongodb後端。

但我不知道如何將它連接到我的角2前端。我有一個登錄按鈕，我想重定向到Facebook，我創建了一個身份驗證服務，但我不知道如何處理它，我嘗試了路由到它，我試圖這不正確，我需要路由到該頁面，然後檢索回調JSON，但我不知道如何。

@Injectable() 
export class AuthService { 

    constructor(private http: Http, 
       private router: Router) { } 

    private users: User[] = []; 

    isLoggedIn: boolean; 

    login() { 
    this.isLoggedIn = false; 
    return new Promise((resolve) => { 
     this.http.get('http://localhost:3000/users/auth', {withCredentials: true}) 
     .subscribe((data) => { 
      if(data.json().success) { 
      window.localStorage.setItem('auth_key', data.json().token); 
      this.isLoggedIn = true; 
      } 
      resolve(this.isLoggedIn); 
     }) 
    }) 
    }

來源

2017-02-09 seanEd

我強烈建議你自己動手，並用hellojs做到這一點。這個令人敬畏的圖書館將使任何在公園散步的東西都可以連接。 Facebook，Twitter，谷歌，以及其他許多人在passport只爲Facebook提供的地方非常有用。而且你不需要自己整合每一個。

這裏是一個組件，它會工作，如果你正確添加的lib到您的項目：

import { Component } from '@angular/core'; 
import { Router } from '@angular/router'; 
import { Http } from 'http' 
import { UsersService } from './services/user.service' 
import * as hello from 'hellojs'; 
import { Observable } from 'rxjs/Rx'; 

@Component({ 
    moduleId: module.id, 
    templateUrl: 'login.component.html', 
    styles: [` 
    `] 
}) 

export class LoginComponent { 
    // hellojs needs your facebook client id 
    FACEBOOK_CLIENT_ID : number = 000000000000 

    constructor(private http: Http, 
       private router: Router, 
       private usersService: UsersService) { 

      // if you correctly included hellojs in your angular2 app, this function will do the magic 
      hello.on('auth.login', function(auth) { 
       // console.log(auth) 
       let authedSocial = auth; 
       // Call user information, for the given network 
       hello(auth.network).api('me').then(function(r) { 
        let authedSocialData = r; 
        console.log(authedSocialData) // prints user data to console 
       }) 
      }) 

      hello.init({ 
       facebook: this.FACEBOOK_CLIENT_ID 
      }, { 
       redirect_uri: 'redirect', 
       oauth_version: '1.0a' 
      }) 
    } 

    helloSign(type: string) { 
     hello(type).login() // Call login() function 
    } 

    // Signin button click handler 
    helloLogout(network) { 
     hello(network).logout(function(e){ 
      log("logout",e) 
     }); 
    } 

    // Example call to service that should save user, your login function should go in this service 
    login(s: any) { 
     let r = JSON.parse(s) 
      this.usersService.createOrUpdateSocialUser(r.first_name, r.last_name, r.name, r.account_type, r.account_id, r.img) 
       .subscribe(result => { 
        if (result === true) { 
         console.log('user loged in') 
        } else { 
         // do something with error 
        } 
       }); 
    } 
}

而在你login.component.html只需添加一個登錄鏈接/按鈕：

<a (click)="helloSign('facebook')" >Log in with Facebook Mate</a>

來源

2017-02-10 04:27:03 FRECIA

將前端連接到後端：passportjs-facebook，angular2，expressjs，身份驗證

回答

相關問題