Javascript Angular 2 Facebook登录
我正在开发一个网站,需要登录Facebook帐户。我使用的是Angular 2,当然还有打字脚本。它能工作,但不完全是我想要的。我无法收回用户的信息 让我们转到代码:Javascript Angular 2 Facebook登录,javascript,facebook,typescript,angular,Javascript,Facebook,Typescript,Angular,我正在开发一个网站,需要登录Facebook帐户。我使用的是Angular 2,当然还有打字脚本。它能工作,但不完全是我想要的。我无法收回用户的信息 让我们转到代码: import {Component} from 'angular2/core'; import {Main} from './pages/main/main'; declare const FB: any; @Component({ selector: 'my-app', templateUrl: 'app/app.h
import {Component} from 'angular2/core';
import {Main} from './pages/main/main';
declare const FB: any;
@Component({
selector: 'my-app',
templateUrl: 'app/app.html',
directives: [Main]
})
export class AppComponent implements OnInit {
token: any;
loged: boolean = false;
user = { name: 'Hello' };
constructor() { }
statusChangeCallback(response: any) {
if (response.status === 'connected') {
console.log('connected');
} else {
this.login();
}
}
login() {
FB.login(function(result) {
this.loged = true;
this.token = result;
}, { scope: 'user_friends' });
}
me() {
FB.api('/me?fields=id,name,first_name,gender,picture.width(150).height(150),age_range,friends',
function(result) {
if (result && !result.error) {
this.user = result;
console.log(this.user);
} else {
console.log(result.error);
}
});
}
ngOnInit() {
FB.getLoginStatus(response => {
this.statusChangeCallback(response);
});
}
}
基本上,当页面加载时,我检查用户是否登录到Facebook,如果没有,我调用login方法。me方法用于获取用户信息,如其姓名等。当我登录条件浏览器控制台时,打印以下行:
Object {id: "666", name: "Paulo Henrique Tokarski Glinski", first_name: "Paulo", gender: "male", picture: Object…}
一切都好!但是我想得到那个对象,并把它放到一个用户对象中!诸如此类:
me方法:
this.user = result;
console.log(this.user);
但是用户只是存在于方法内部。如果我在外部打印,它将不返回任何内容。我只想在网站页面上打印用户名等。我对Angular JS做了几乎相同的事情,并且工作得很好
求你了!救救我
这个
包含了一系列的魔力。如果您在变量中捕获类的this
,并在回调中使用它(以避免关心它们的this
是什么),这有帮助吗
e、 g
您可以使用fat arrow函数来使用相同的上下文
login() {
FB.login((result: any) => {
this.loged = true;
this.token = result;
}, { scope: 'user_friends' });
}
对于facebook javascript SDK,只需在index.html中添加以下行
<script src="//connect.facebook.net/en_US/sdk.js"></script>
Angular 2服务级别实现
import {Injectable} from '@angular/core';
import { Location } from '@angular/common';
import { Http, Response, Headers, RequestOptions,URLSearchParams } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { ConfigService } from "app/core/services/config.service";
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
@Injectable()
export class AuthService {
constructor(private http: Http,
private configProvider:ConfigService) {
}
authenticateFacebook(){
window.location.href = 'https://www.facebook.com/v2.9/dialog/oauth?client_id='+
this.configProvider.config.facebook.clientId +
'&redirect_uri='+ this.configProvider.config.facebook.redirectURI + '&scope=public_profile';
}
getAccessToken(authenticationCode: string){
var authProviderUrl = 'https://graph.facebook.com/v2.9/oauth/access_token';
var authParameters = {
client_id: this.configProvider.config.facebook.clientId,
redirect_uri: this.configProvider.config.facebook.redirectURI,
client_secret: this.configProvider.config.facebook.clientSecret,
code: authenticationCode
};
var params = [];
for (var k in authParameters) {
params.push(k + '=' + authParameters[k]);
}
var authOpenURI = authProviderUrl + '?' + params.join('&');
return this.http.get(authOpenURI)
.map(res => res.json())
.catch(err => Observable.throw(err));
}
getUserFacebookProfile(accessToken:string):Observable<any>{
var fields = ['id', 'email', 'first_name', 'last_name', 'link', 'name','picture.type(small)'];
var graphApiUrl = 'https://graph.facebook.com/v2.5/me?fields=' + fields.join(',');
return this.http.get(graphApiUrl+'&access_token='+accessToken+'')
.map(res => res.json())
.catch(err => Observable.throw(err));
}
我不会再使用旧的自我/解决方法了。箭头函数是实现这个或绑定(this)的方法。因为它是一个匿名函数,所以我会选择arrow函数。当然,如果你不在乎它是否在IE上工作--我甚至不确定这是OP的全部问题,所以我想我只举一个例子。他正在使用ES6(就像现在所有严肃的js开发人员一样),所以他很可能使用babel将代码传输到ES5。IE没有问题。没有人使用ES6而不使用transpiler(我猜)。谢谢你,但现在我有其他问题。我可以获取结果并将其放入我的
user
var,但我需要做一些事情,比如单击按钮,以刷新页面中的结果。我还在me()
方法中使用箭头函数。是的,您需要使用ngZone来解决此问题。。。如果您还需要更多帮助,请参阅,您可以回复…您的configProvider似乎拥有facebook clientSecret?把它放在前端并不是个好主意。
`FB.init({
appId : 'your-app-id',
cookie : false,
xfbml : true, // parse social plugins on this page
version : 'v2.5' // use graph api version 2.5
});`
import {Injectable} from '@angular/core';
import { Location } from '@angular/common';
import { Http, Response, Headers, RequestOptions,URLSearchParams } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { ConfigService } from "app/core/services/config.service";
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
@Injectable()
export class AuthService {
constructor(private http: Http,
private configProvider:ConfigService) {
}
authenticateFacebook(){
window.location.href = 'https://www.facebook.com/v2.9/dialog/oauth?client_id='+
this.configProvider.config.facebook.clientId +
'&redirect_uri='+ this.configProvider.config.facebook.redirectURI + '&scope=public_profile';
}
getAccessToken(authenticationCode: string){
var authProviderUrl = 'https://graph.facebook.com/v2.9/oauth/access_token';
var authParameters = {
client_id: this.configProvider.config.facebook.clientId,
redirect_uri: this.configProvider.config.facebook.redirectURI,
client_secret: this.configProvider.config.facebook.clientSecret,
code: authenticationCode
};
var params = [];
for (var k in authParameters) {
params.push(k + '=' + authParameters[k]);
}
var authOpenURI = authProviderUrl + '?' + params.join('&');
return this.http.get(authOpenURI)
.map(res => res.json())
.catch(err => Observable.throw(err));
}
getUserFacebookProfile(accessToken:string):Observable<any>{
var fields = ['id', 'email', 'first_name', 'last_name', 'link', 'name','picture.type(small)'];
var graphApiUrl = 'https://graph.facebook.com/v2.5/me?fields=' + fields.join(',');
return this.http.get(graphApiUrl+'&access_token='+accessToken+'')
.map(res => res.json())
.catch(err => Observable.throw(err));
}
//Facebook authentication check
if (window.location.href.indexOf("code") > -1){
var code = window.location.href.substring(window.location.href.indexOf("?") + 1).split('&')[0].split('=')[1];
this.getFaceBookProfile(code);
}
//Get profile from facebook
getFaceBookProfile(code:string){
this.authService.getAccessToken(code).subscribe(oathAccessData => {
this.authService.getUserFacebookProfile(oathAccessData.access_token).subscribe(profile => {
this.userProfile = new UserProfile(profile.name,profile.email, profile.picture.data.url,"facebook",
profile.id);},err => { console.log(err); });},err => { console.log(err);});
this.router.navigate(['/dashboard']);
}