Angulaire 2 Facebook Login

Je suis en train d'élaborer un site web qui a besoin d'être connecté avec Facebook compte. Je suis à l'aide Angulaire 2 et, bien sûr, texte dactylographié. Il fonctionne, Mais pas exactement ce que je voulais. Je ne peux pas reprendre les informations de l'utilisateur.

Let's go pour le code:

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);
    });
}
}

En gros, Quand le chargement de la page j'ai vérifier si l'utilisateur est connecté à Facebook, si pas, j'appelle la méthode de connexion. Le moi méthode est utilisé pour récupérer les informations sur les utilisateurs, comme son nom, prénom etc. Quand je suis connecté en condition navigateur de la console d'imprimer la ligne suivante:

Object {id: "666", name: "Paulo Henrique Tokarski Glinski", first_name: "Paulo", gender: "male", picture: Object…}

Tout est ok! Mais je veux obtenir que l'Objet et le mettre dans un objet Utilisateur! Quelque chose comme ça:

m'méthode:

this.user = result;    
console.log(this.user);

Mais il suffit que l'utilisateur existe à l'intérieur de la méthode. Si je l'imprimer à l'extérieur, sa ne retourne rien.
Je veux juste imprimer les noms d'utilisateurs, etc. à la page web du site. J'ai fait presque la même chose avec Angular JS et bien travaillé.

S'il vous plaît! Aidez-moi!

OriginalL'auteur Paulo Tokarski Glinski | 2016-06-12

  1. 7

    vous pouvez utiliser de la graisse flèche fonctions à utiliser le même contexte ... 

    login() {
  FB.login((result: any) => {
    this.loged = true;
    this.token = result;
  }, { scope: 'user_friends' });
}
    Merci homme, mais maintenant j'ai d'autres question. Je peux obtenir et mettre le résultat dans mon user var, mais j'ai besoin de faire quelque chose, comme un clic sur un bouton, pour actualiser le résultat dans ma page.Je suis également à l'aide de la flèche en fonction de mon me() méthode.
    oui , vous avez besoin d'utiliser ngZone pour résoudre ce problème ... s'il vous plaît reportez-vous à angular.io/docs/ts/latest/api/core/index/NgZone-class.html si vous avez encore besoin de plus d'aide, vous pouvez répondre ...

    OriginalL'auteur reda igbaria

  2. 3

    Pour l'facebook SDK javascript, il suffit d'ajouter la ligne suivante dans votre index.html

    <script src="//connect.facebook.net/en_US/sdk.js"></script>

    et dans ngOnInit() :

        `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
    });`

    OriginalL'auteur EL missaoui habib

  3. 3

    Angulaire 2 de niveau de Service mise en œuvre

    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)); 
}

    Appelant niveau de la fonction, ce code sera dans le composant de votre redirect URI

    //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']);     
}
    Il ressemble à votre configProvider a l'facebook clientSecret? Pas vraiment une bonne idée de les garder dans le front-end.

    OriginalL'auteur Ajeet Singh

  4. 0

    this a un tas de quelque chose de magique. Il aide si vous avez une capture de la classe this dans une variable et utiliser que dans les rappels (de manière à éviter de faire attention à ce que leur this est)?

    par exemple

    login() {
var self = this;
FB.login(function(result) {
self.loged = true;
self.token = result;
}, { scope: 'user_friends' });
}
    je ne voudrais pas utiliser la vieille auto/cette solution de contournement plus. flèche fonctions sont la voie à suivre pour cela, ou de se lier(ce). puisque c'est une des fonctions anonymes, je pencherais pour une flèche de la fonction.
    Bien sûr, si vous ne vous souciez pas si ça fonctionne sur IE developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/... — je n'étais même pas sûr que c'était l'OP de l'ensemble du problème, donc je pensais que je venais de donner suis exemple.
    il est l'aide de ES6 (comme tous les graves js développeur de nos jours), de sorte qu'il est plus probable à l'aide de babel à transpile son code à l'ES5. pas de problème avec IE. personne n'utilise l'ES6 sans transpiler (je suppose).

    OriginalL'auteur Rob Starling