Facebook pieteikšanās pievienošana, izmantojot lietojumprogrammu React.js

Mūsdienās Facebook pieteikšanās ir daļa no autentifikācijas mehānisma blakus Google pieteikšanās tīmekļa lietojumprogrammās vai mobilajās lietotnēs. Faktiski, izmantojot Facebook pieteikšanos, to var izdarīt tikai priekšpusē, jo tas izmanto Facebook SDK Javascript. Par laimi, ir reakcijas facebook pieteikšanās modulis, ko mēs izmantosim šim React.js FB pieteikumvārdam.

Šī apmācība ir sadalīta vairākos posmos:

• 1. solis: iestatiet Facebook lietotni
• 2. solis: instalējiet lietotni create-reaģēt un izveidojiet lietotni React.js
• 3. solis: instalējiet un konfigurējietrea-facebook-login
• 4. solis: parādiet pierakstīšanos, izmantojot Facebook pogu un pamata lietotāja profilu
• 5. solis: palaidiet un pārbaudiet React.js pieteikšanās lietotni

Šai apmācībai ir nepieciešami šādi rīki, ietvari un moduļi:

1. Node.js (ar NPM vai dziju)
2. React.js (min. Versija 16.8)
3. reaģēt-facebook-login
4. Termināla vai mezgla komandrinda
5. IDE vai teksta redaktors (mēs izmantojam Visual Studio kodu)

Pirms doties uz galvenajām darbībām, pārliecinieties, vai esat instalējis Node.js un varat palaist NPM vai dziju. Lai tos pārbaudītu, ierakstiet šīs komandas.

1. solis: iestatiet Facebook lietotni

Lai iestatītu Facebook lietotni un iegūtu lietotnes ID/noslēpumu, dodieties uz vietni Facebook Developers Apps https://developers.facebook.com/apps/ . Piesakieties, izmantojot savu Facebook izstrādātāja kontu vai akreditācijas datus.

Noklikšķiniet uz | _+_ | pogu vai MyApps -> Izveidot lietotni pogu.

kur nopirkt rit

Ievadiet parādāmo nosaukumu (mēs izmantojam | _+_ | nosaukumu), pēc tam noklikšķiniet uz | _+_ | pogu. Noteikti izmantojiet derīgu nosaukumu, ko atļauj Facebook izstrādātāji.

Pēc tam, kad esat pārbaudījis dialoglodziņu captcha un noklikšķinājis uz pogas Iesniegt, tagad varat redzēt lietotnes ID un slepenību, ierakstīt to piezīmju grāmatiņā.

Kreisajā izvēlnē noklikšķiniet uz izvēlnes Iestatījumi un pēc tam uz Pamata. Ritiniet uz leju un pēc tam noklikšķiniet uz | _+_ | pogu, pēc tam izvēlieties vietni. Aizpildiet vietnes URL ar atzvanīšanas URL OAuth autentifikācijas atzvanīšanas URL, mēs izmantojam šo atzvanīšanas URL | _+_ |.

Noklikšķiniet uz | _+_ | pogu un tagad Facebook lietotnes ir gatavas lietošanai kopā ar jūsu React.js lietojumprogrammu.

2. solis: instalējiet lietotni create-reaģēt un izveidojiet lietotni React.js

Lai izveidotu jaunu lietojumprogrammu React.js, mēs izmantosim rīku izveidot-reaģēt. Izveidot-reaģēt-lietotne ir rīks, lai no komandrindas vai CLI izveidotu lietotni React.js. Tātad jums nav jāinstalē vai jākonfigurē tādi rīki kā Webpack vai Babel, jo tie ir iepriekš konfigurēti un slēpti, lai jūs varētu koncentrēties uz kodu. Ievadiet šo komandu, lai to instalētu.

Tagad mēs varam izveidot jaunu lietotni React.js, izmantojot šo rīku.

Šī komanda izveidos jaunu lietotni React ar nosaukumu | _+_ | un šis process var aizņemt minūtes, jo visas atkarības un moduļi tiek instalēti arī automātiski. Pēc tam dodieties uz jaunizveidoto lietotņu mapi.

Atveriet projektu savā IDE vai teksta redaktorā un skatiet package.json saturu.

Šī React versija ir versija, kas jau izmanto React Hooks kā noklusējumu. Tagad, | _+_ | klasi vairs neizmanto. Sanitārijas nolūkos pirmo reizi palaidiet šo React lietotni, ierakstot šo komandu.

Un šeit mēs ejam uz jaunāko React.js lietojumprogrammu, kas izmanto React Hooks ar to pašu sākotnējo mājas lapu.

3. solis: instalējiet un konfigurējietrea-facebook-login

Mēs izmantosim NPMJS atrodamo React Facebook pieteikšanās moduli/bibliotēku ar nosaukumu reage-facebook-login. Lai to instalētu, ierakstiet šo komandu.

Tā kā tagad Facebook pieteikšanās piespiež izmantot tikai HTTPS, mums ir jāpārveido šī lietotne React.js, lai tā darbotos ar HTTPS. Atvērt un rediģēt | _+_ | tad modificējiet startu skriptu objektā.

4. solis: parādiet pierakstīšanos, izmantojot Facebook pogu un pamata lietotāja profilu

Tagad mēs parādīsim pierakstīšanos ar Facebook pogu un parādīsim pamata lietotāja profilu pēc veiksmīgas pieteikšanās. UI mēs izmantosim React Bootstrap moduli. Ievadiet šo komandu, lai to instalētu.

augšupielādējiet failu github repozitorijā

Lai izmantotu Bootstrap CSS no CDN, atveriet un rediģējiet | _+_ | tad pievienojiet to pirms.

Pēc tam atveriet un rediģējiet | _+_ | tad nomainiet visus React.js kodus ar šo.

5. solis: palaidiet un pārbaudiet React.js pieteikšanās lietotni

Lai palaistu šo Facebook pieteikšanās lietotni React.js, vienkārši ierakstiet šo komandu.

referenceerror logs nav definēts nextjs

Pārlūkprogramma tiks automātiski atvērta, un jūs redzēsit šo lapu, ja nebūs Facebook pieteikšanās sesijas.

Noklikšķiniet uz | _+_ | pogu, tad tiks parādīts Facebook pieteikšanās dialoglodziņš.

Aizpildiet lietotājvārdu un paroli, kas tiek izmantota kā Facebook izstrādātāju konts, jo iepriekšējā Facebook lietotnes iestatīšanā mēs izmantojam izstrādes režīmu. Pēc tam noklikšķiniet uz pieteikšanās pogas.

Noklikšķiniet uz pogas Turpināt kā savu vārdu, un tā atgriezīsies iepriekšējā lapā ar šiem datiem.

Tas ir, React.js apmācība: Facebook pieteikšanās piemērs. Pilnu avota kodu varat atrast mūsu GitHub .

Paldies!

#reactjs #react #facebook #webdev #javascript