Att integrera Facebook logga in på ditt Reagera ansökan

Integrera Facebook logga in på ditt Reagera ansökan


räkna>

Förutom av logga in med e-postadress och lösenord, sociala medier inloggning är mycket populära i dessa dagar. Om du vill växa användarbas snabbt, det är svårt att föreställa sig att du inte vill att sociala medier logga in. I denna tutorial, jag kommer att hjälpa dig att genomföra en Facebook logga in flödet på din Reagera ansökan.

Det finns 2 metoder för att genomföra sociala medier logga in

  • Använda sociala medier Javascript SDK. Det fungerar bra för någon Enda Sida Ansökan som Reagerar, Kantiga, VueJS, etc. SDK gör mest hårt arbete och du har bara att ringa logga in och hantera återuppringning. Den här metoden fungerar bara för att Facebook och Google eftersom endast dem har stöd för Javascript SDK.
  • Använda sociala medier REST API. Nästan alla sociala medier webbplats (som inkluderar Facebook, Google, Twitter, Github, LinkedIn osv.) stöder denna metod. Men de är INTE Enda Sida Ansökan vänlig sedan brukar det kräver att vår ansökan om att omdirigera till sociala medier login-sidan, vilket bryter ansökan staten (såvida du inte har sparat) så att de är mer lämplig när din webbplats är utförda av en server istället användarens webbläsare. Vi kan undvika detta problem genom att använda ett popup-fönster, men låt oss diskutera om denna metod i ett annat inlägg.

Låt oss börja

Steg 1:

för att integrera sociala medier logga in på alla plattformar, måste du skapa en app på den plattformen. För Facebook, du måste gå till https://developers.facebook.com/apps/ och klicka på Lägg till en Ny App från Min app dropdown. Efter att din app är skapad klickar du på appen och gå till Produkter > Facebook Login > Inställningar för att ställa in Omdirigerings-URL.

Steg 2:

Detta är den kod som du behöver för att kopiera till index.html för att möjliggöra Facebook logga in. Du ska sätta in det direkt efter <kropp> – taggen. Du behöver för att ersätta -app-id av din app-ID.

<script>
fönstret.fbAsyncInit = function () {
FB.init({
appId: '1813842465324998',
autoLogAppEvents: sant,
xfbml: true,
version: "v2.11'
});

// Sända en händelse när FB objektet är redo
var fbInitEvent = new Event('FBObjectReady');
dokument.dispatchEvent(fbInitEvent);
};

(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
om d.getElementById(id)) { return; }
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

Höger efter raden FB.init. Vi skapar en ny händelse objekt “FBObjectReady” och sända denna händelse objekt. Denna händelse låt oss veta när FB objektet är redo som vi kommer att använda i vår FacebookLoginButton komponent.

Nu ska vi genomföra vår Facebook logga in-knappen.

Steg 3 — Genomföra Facebook Login-Knappen komponent

Vi skapa denna komponent eftersom vi vill återanvända den var som helst i vår ansökan. Efter att ha skapat denna komponent, kan vi placera i login-formuläret eller i huvudmenyn eller var som helst som du vill ha Facebook login-funktion.

Nu skapa en ny fil FacebookLoginButton och klistra in följande kod:

importera Reagera, { Komponent } 'reagerar';

exportera standard klass FacebookLogin sträcker Komponent {

componentDidMount() {
dokument.addEventListener('FBObjectReady".initializeFacebookLogin);
}

componentWillUnmount() {
dokument.removeEventListener('FBObjectReady".initializeFacebookLogin);
}

/**
* Init FB objekt och kolla Facebook Login status
*/
initializeFacebookLogin = () => {
detta.FB = - fönstret.FB;
detta.checkLoginStatus();
}

/**
* Kontrollera inloggningsstatus
*/
checkLoginStatus = () => {
detta.FB.getLoginStatus(det här.facebookLoginHandler);
}

/**
* Kontrollera inloggningsstatus och samtal logga in api är användaren inte är inloggad i
*/
facebookLogin = () => {
if (!detta.FB) return;

det här.FB.getLoginStatus(svar => {
if (svar.status = = = "ansluten") {
detta.facebookLoginHandler(svar);
} else {
detta.FB.logga in(det här.facebookLoginHandler, {omfattning: 'public_profile'});
}
}, );
}

/**
* Hantera inloggning svar
*/
facebookLoginHandler = svar => {
if (svar.status = = = "ansluten") {
detta.FB.api('/me', userData => {
låt resultat = {
...svar,
användare: userData
};
detta.rekvisita.onLogin(true);
});
} else {
detta.rekvisita.onLogin(false);
}
}

render() {
låt {barnen} = i detta.rekvisita;
return (
<div onClick={detta.facebookLogin}>
{barnen}
</div>
);
}
}

Låt mig förklara alla metoder i komponenten.

Först av allt, när componentDidMount är kallade, vi lägger till en händelse lyssnaren att lyssna till händelse FBObjectReady och initiera vår del. Vi behöver göra det för att om vi kallar alla metoder i FB objekt och FB är odefinierad, vår app kommer att kasta fel. När vår del är omonterad på componentWillUnmount – metoden, som vi kallar dokument.removeEventListener för att städa upp våra lyssnare och förhindra minnesläcka.

Nu på metoden initializeFacebookLogin vi tilldela FB objekt som en egenskap hos vår del och ringa en metod för att kontrollera inloggningsstatus. Efter att metoden facebookLoginHandler kommer att kontrollera inloggningsstatus. Om inloggningen lyckas, det får användaren information och samtal onLogin callback som är rekvisita som överförs från förälder komponent.

render-metoden, vi svepa barn av en p och ställ in föraren för onClick händelsen.

Steg 4 — Integrera Facebook knappen logga in i vår app

Här är källkoden av App.js. Jag skapade den här appen med skapa-reagera-app.

importera Reagera, { Komponent } 'reagerar';
importera logotyp på." /logotyp.svg';
importera './App.css';
importera FacebookLoginButton från". /FacebookLoginButton';

- klass App förlänger Komponent {

staten = {
användarnamn: null -
};

onFacebookLogin = (loginStatus, resultObject) => {
om (loginStatus === true) {
detta.setState({
användarnamn: resultObject.användaren.namn
});
} else {
alert ("Facebook login error');
}
}

render() {
const { användarnamn } = i detta.statligt;

tillbaka (
<div className="App">
<header className="App-header">
<h1 className="App-avdelning">Reagera Sociala Medier Logga in</h1>
</header>

<div className="App-intro">
{ !användarnamn &&
<div>
<p>Klicka på en av de knappen nedan för att logga in</p>
<FacebookLoginButton onLogin={detta.onFacebookLogin}>
< - knappen>Facebook</ - knappen>
</FacebookLoginButton>
</div>
}
{username &&
<p>Välkommen tillbaka, {användarnamn}</p>
}
</div>
</div>
);
}
}

App.js vi wrap Facebook-knappen av-komponent FacebookLoginButton. När användaren klickar på denna knapp, kommer det att autentisera användaren konto på Facebook och kallar onFacebookLogin efter avslutat. Om inloggningen lyckas, det lagrar användarnamn i staten och göra välkomna meddelande.

Tack för att läsa denna handledning.

Om du har någon oro, tveka inte att skicka mig ett meddelande eller lämna en kommentar.

We will be happy to hear your thoughts

Leave a reply