将前端连接到后端：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，身份验证

回答

相关问题