Ajouter Facebook Login dans une application React Native
https://enappd.com/blog/facebook-login-in-react-native-apps/89/
https://developers.facebook.com/docs/react-native/login/
Résumé des étapes pour intégrer le Facebook Login
- créer une ap dans Facebook developer Console, récuper l’Id de l’app
- Installer le package pour React Native
- Implémenter le code 2 composants sont nécessaire
LoginButton,LoginManager
Bien suivre les instructions de cette videos, j’ai suivi le tuto, j’ai pu faire marcher sur Android, mais pas sur IOS qui refuse de builder malgré le paramétrage, la solution a été proposée sur Stackoverflow, solution non intuitive si on n’est pa développeur natif.
Ce lien propose une solution quand le projet ne veut lus builder après l’installation de fbsdk sur IOS.
Facebook Login et le système existant de connexion à votre application
Si vous faites coexister votre système de login et celui de Facebook Login, des questions intéressantes peuvent se poser. A la première connexion, l’utilisateur n’a pas de compte sur votre application, il peut choisir soit de recourir à votre système, soit à celui de Facebook. Je suppose que l’ backend de l’appli est un serveur sous PHP (ex Laravel ou Symfony), et que l’application React Native communique par Rest API, donc authentification par JWT.
Votre système de création de compte et de connexion
- Création de compte : l’utilisateur entre email et mot de passe et valide la création
- l’utilisateur se connecte en entrant email et mot de passe
- le serveur envoit un token d’authentification qui sera stocké sur l’application, et envoyé à chaque requête Ajax
Création avec Facebook Login
- L’utilisateur clique sur le bouton Facebook Login, s’authentifie, et Facebook envoit un Access Token
Mais voilà à ce stade il a le choix de créer son compte ou non. S’il crée un compte sur l’application, on doit pouvoir recueillir son email automatiquement (c’est possible avec Facebook Login de demander l’email, nom et prénom), envoyer vers le serveur (s’assurer que le compte n’existe pas déjà en comparant l’email), la création de compte étant fini, il faut pouvoir renvoyer un token d’authentification vers l’application qui stockera le token.
Obtenir l’email avec le facebook login
import React, { Component } from 'react';
import { View } from 'react-native';
import { LoginButton, AccessToken, LoginManager, GraphRequestManager, GraphRequest } from 'react-native-fbsdk';
export default class Login extends Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<LoginButton
onLoginFinished={
(error, result) => {
LoginManager.logInWithPermissions(['public_profile', 'email']).then(
function (result) {
if (result.isCancelled) {
console.log("Login cancelled");
} else {
console.log(
"Login success with permissions: " +
result.grantedPermissions.toString()
);
AccessToken.getCurrentAccessToken().then(
(data) => {
console.log(data)
let accessToken = data.accessToken;
const responseInfoCallback = (error, result) => {
if (error) {
console.log(error)
alert('Error fetching data: ' + error.toString());
} else {
console.log(result)
alert('Success fetching data: ' + result.toString());
}
}
const infoRequest = new GraphRequest(
'/me',
{
accessToken: accessToken,
parameters: {
fields: {
string: 'email,name,first_name,middle_name,last_name'
}
}
},
responseInfoCallback
);
// Start the graph request.
new GraphRequestManager().addRequest(infoRequest).start();
}
)
}
},
function (error) {
console.log("Login fail with error: " + error);
}
);
}
}
onLogoutFinished={() => console.log("logout.")} />
</View>
);
}
};
Anoter que la section
LoginManager.logInWithPermissions(['public_profile', 'email']).then(
function (result) {
if (result.isCancelled) {
console.log("Login cancelled");
} else {
console.log(
la façon dont est géré la promesse ne permet pas de lire le bon mot clé this, donc si on passait une props, elle ne sera pas récupérable on aura un undefined, la bonne technique est:
LoginManager.logInWithPermissions(['public_profile', 'email']).then( (result) => {
if(!result){
console.log("Login cancelled");
}
else {
// le code quand tout est bon
}
https://github.com/lakshmantgld/react-native-fbsdk-example
https://developers.facebook.com/docs/facebook-login/multiple-providers/
Voir aussi Intégrer Google SignIn
