Füügt Instagram Login fir Är NodeJS App mat PassportJS

Léiert wéi Instagram's API mat Oauth funktionnéiert, a implementéiert de vollen Loginflow mat MongoDB.

Haut wäerte mir léieren wéi den Instagram Login an eng NodeJS Applikatioun addéiere mat PassportJS (ee vun de populäersten Wee fir Authentifikatioun an NodeJs ze managen). Mir léiere wéi Instagrams APIen funktionnéieren an de komplette Loginflow mat der Datebank (MongoDB) implementéieren.

Wéi funktionnéiert Instagram Login?

Instagram benotzt Oauth2.0 fir Authentifikatioun an Autorisatioun. Instagram Login ka fir konventionell Apps a serverlos Apps ëmgesat ginn. Mir wäerte séier a béid Methode kucken.

Als Standard Oauth2.0 brauch Instagram API en Access_token fir Authentifikatioun. Dës access_tokens si spezifesch fir e Benotzer an Zäitgebonnen. Also wann se an der Zukunft oflafen, musst Dir Iech e refresh Token froen.

Drënner sinn déi dräi einfach Schrëtt fir en access_token fir Instagram ze kréien:

1- Direkt Benotzer op Instagram Autorisatioun URL.

2- Benotzer aloggen (wann net schonn ugemellt) an erlaben Permissiounen fir Instagram Donnéeën ze kréien.

3- Instagram redirect den Uruff op Är spezifizéiert URL mat engem Code Parameter wou Dir dëse Code mat engem access_token op der Server Säit austauscht.

Fir Serverlos Apps wäert Instagram Zougang_token an der Viruleedung URL addéieren. (Dëst ass eng manner sécher Method an net recommandéiert).

Viraussetzung

  • Node js
  • Express JS
  • Pass JS
  • Registréiert eng App mat Instagram

Registréiert eng App mat Instagram

Ier mer weiderfuere musse mir e Client bei Instagram registréieren.

Gitt op Instagram Entwéckler Konsol a erstellt eng nei Client App. Wann Dir Iech registréiert, kritt Dir e ClientID a ClientSecret.

Meescht wahrscheinlech benotzt Dir e Localhost fir dëst z'entwéckelen. Beim Registréiere musst Dir eng Viruleedung URL addéieren. Mine war,

http: // localhost: 3000 / autor / instagram / callback

Dir kënnt Ären eegene wielen, erënnert just drun, wann Dir Localhost a Port 3000 benotzt (Standard NodeJs Hafen) Är URL sollt mat http ufänken: // localhost: 3000.

Captcha Problem

Wann Dir en neie Client App registréiert, kënnt Dir mat engem Captcha Problem stoen. Fir dat ze léisen, kënnt Dir den Diable Content Security Plugin benotzen.

Login mat Instagram

Mir benotze passport.js, PasspostJS ass eng Go-to Bibliothéik fir verschidden Arten vun Authentifikatiounen an Ärer Uwendung ëmzesetzen. Et ass e Mëttelware fir Är NodeJs App.

Loosst eis eng Express App erstellen andeems.

ausdrécklech insta-authent

Fir Simplicitéit, füügt de folgende Code an app.js. Dir kënnt et refactor wann Dir de Flux verstan hutt.

Passpost-instagram installéieren

npm installéiert Pass-instagram

Import Dateien noutwendeg

var Instagram = erfuerderen ('Pass-instagram'); const InstagramStrategy = Instagram.Strategy;

Initialize Passport JS

Mir initialiséieren elo d'PassportJs. Wann Är Applikatioun Sessioun benotzt (dat wahrscheinlech ass et), da musst Dir och eng Passuniounssessioun benotzen. PassportJS serialiséieren an deserialiséiere Benotzerinstanze bis an vun der Sitzung. Gitt sécher d'express.session () virum passport.session () ze benotzen fir sécher ze sinn datt d'Umeldungsessioun am richtege Bestellung restauréiert gëtt.passport.session () ännert den Req Objet an ännert de 'Benotzer' Wäert deen de Moment der Sessioun ID (vum Client Cookie) an de deserialiséierte User Objet. Am Fall vum Umeldung, passportJs läscht einfach d'Informatioun vun de Benotzer mat der DeserializeUser.

app.use (pass.initialiséieren ()); app.use (Pass.session ());
passport.serializeUser ((Benotzer, gemaach) => {gemaach (null, Benotzer)}) passport.deserializeUser ((Benotzer, gemaach) => {gemaach (null, Benotzer)})

Pass Instagram Strategie

Verschidde Applikatioun wéi Instagram, Twitter oder Google kënnen ënnerschiddlech Authentifikatiounsmethoden hunn. PassposJS bundelt verschidde Authentifikatiounsmechanismen a Moduler, déi als Strategie genannt ginn. Mir benotze Instagram Strategie fir eis Applikatioun.

Fir Instagram Strategie ze konfiguréieren addéiere mir clientID, clientSecret, callbackURL an passen och eng Callback Method fir d'Authentifikatioun ze verschaffen.

passport.use (nei InstagramStrategy ({clientID: "YOUR_CLIENT_ID", clientSecret: "YOUR_CLIENT_SECRET", callbackURL: "YOUR_CALL_BACK_URL"}, (accessToken, refreshToken, Profil, gemaach) => {}))

Mir benotzen eng Datebank (MongoDB) fir d'Informatioun vun eisem Benotzer an access_token ze späicheren. Dir wäert an Ärer Datebank kontrolléieren ob de Benotzer scho gëtt oder net an erstellt eng nei Entrée fir nei Benotzer.

passport.use (nei InstagramStrategy ({clientID: "YOUR_CLIENT_ID", clientSecret: "YOUR_CLIENT_SECRET", callbackURL: "YOUR_CALL_BACK_URL"}, (accessToken, refreshToken, profile, done) => {User.findOne ({'instagram.id': profile.id}, Funktioun (err, user) {if (err) callback (err) zréckginn;
if (Benotzer) {Retour gemaach (null, Benotzer); // Kontrolléieren ob de Benotzer scho gëtt}
const {id, full_name, username, profile_picture, bio, Websäit, zielt: {media, follegt, Follow_by}} = profile._json.data;
const new_user = neie Benotzer ({instagram: {id, accessToken, voll_numm, username, profile_picture, bio, Websäit, zielt: {media, follegt, follow_by}}});
new_user.save (Funktioun (err, user) {// spuert en neie Benotzer a mongo if (err) {throw err;} return done (null, user);}); }); }))

Rout Configuratioun

Elo wäerte mir e puer Weeër konfiguréieren fir e Loginflow ze kreéieren.

app.get ('/ auth / instagram', pass.authenticate ('instagram'));
app.get ('/ auth / instagram / callback', pass.authenticate ('instagram', {successRedirect: '/ profile', failRedirect: '/ login'}));

Mir schloen / autoriséieren / instagram an eiser Applikatioun fir d'Authentifikatiounsfloss an eiser Applikatioun ze initiéieren. Dëst wäert ons Instagram Authentifikatioun initiéieren andeems de Benotzer op Instagram redirigéiert (Wann net scho ageloggt).

Ënnert der Hood

Loosst eis kucken wat geschitt ënner der Hood? Wann Dir d'Passport Authentifikatioun urufft, geet et op Instagram, eemol de Benotzer fäerdeg ass, schreift Instagram eis Callback URL mat engem Code, dëse Code gëtt fir Access_token op der Server Säit vum PassportJS austauscht. Wa mir net PassJS benotzen, musse mir dëst selwer maachen. PassportJS fiert intern Autorisatioun an Authentifikatioun fir eis.

Eemol PassportJS kritt den access_token, eis Callback Method déi instagramInit an eisem ass, Fall gëtt opgeruff fir de Login Prozess ze kompletéieren.

const instaConfig = {clientID: CLIENT_ID, clientSecret: CLIENT_SECRET, callbackURL: CALLBACK_URL};
const instagramInit = Funktioun (accessToken, refreshToken, profile, callback) {User.findOne ({'instagram.id': profile.id}), Funktioun (err, user) {if (err) returnback callback (err);
if (Benotzer) {zréckgeruff zréckruffen (null, Benotzer); // Kontrolléieren ob de Benotzer scho gëtt}
const {id, full_name, username, profile_picture, bio, Websäit, zielt: {media, follegt, Follow_by}} = profile._json.data;
const new_user = neie Benotzer ({instagram: {id, accessToken, voll_numm, username, profile_picture, bio, Websäit, zielt: {media, follegt, follow_by}}});
new_user.save (Funktioun (err, user) {if (err) {throw err;} zréckruffen (null, user);}); }); };
passport.use (nei InstagramStrategy (instaConfig, instagramInit));

Hei kontrolléiere mir ob mir e Benotzer schonn an eiser Datebank hunn oder net, Wann e Benotzer net existéiert, schafe mir e Benotzer a passen en Uruff un PassportJS, déi duerno d'Demande serialiséieren an deserialiséieren an intern d'Demande weider op / Profil weiderginn.

app.get ('/ Profil', sureAuthenticated, (Ufro, Äntwert) => {const {instagram} = request.user; Äntwert.render ('Profil', {Benotzer: instagram});});

Mir ruffen d'UrsaachAuthentifizéiert als Éischt nodeems mir Hit / Profil hunn. Loosst eis eis versekerAuthentifizéiert Method gesinn. Dës Method ass einfach ze kontrolléieren ob d'Ufro authentifizéiert ass oder net.

Funktioun suergtAuthentifizéiert (Ufro, Äntwert, nächst) {if (request.isAuthentifizéiert ()) {zréckkomm nächst (); } Äntwert.redirect ('/'); }

Dëst ass eise volle Flux. Mir wäerten och eng Profilmethod implementéieren fir dem Benotzer seng Informatioun an eng Logout Method ze weisen.

app.get ('/ Profil', sureAuthenticated, (Ufro, Äntwert) => {const {instagram} = request.user; Äntwert.render ('Profil', {Benotzer: instagram});});
app.get ('/ logout', Funktioun (req, res) {req.logout (); res.redirect ('/');});

Voll Aarbechtscode

Dir kënnt de ganzen Code hei kontrolléieren.

Dir musst den config-template.json nei config.json ëmbenennen an Är Umeldungsinformatiounen addéieren an och eng Mongo URL addéieren. Dir kënnt mLab fir e Cloud-Mongo benotzen.

Konklusioun

Dir braucht PassportJS net fir dësen Zweck ze benotzen awer et ass eng vun de bekanntste Bibliothéik am Node-Ökosystem mat méi wéi 120k Downloads wöchentlech. Et bitt méi wéi 500 Strategien fir Authentifikatioun, ginn domat eng Allround-Léisung fir Är Authentifikatiounsgestioun.

Weist eis wat Dir an den Kommentarer opbaut, a loosst eis wëssen ob Dir iergendwou hale bleift a mir freeën eis Iech ze hëllefen.

Extra Zooss (Instagram Privat APIen)

Niewent offiziellen APIen fir Är Uwendung mat Instagram z'integréieren hunn hir Entwéckler hir eege Bibliothéike erstallt fir mat Instagram ze schaffen ouni offiziell APIen ze benotzen. (Instagram APIs ware ganz schlecht am Ufank, sou datt vill Entwéckler Léisunge erstallt hunn). Dir kënnt e puer Beispiller hei an hei kucken.

Notizen

Instagram huet ugefaang seng API-Support ofzeschafen an déi aktuell Versioun vum API gëtt bis zum Joer 2020 komplett ofgeschloss. Dir kënnt op Instagram APIs duerch de Facebook Entwéckler Portal zougräifen, awer se ënnerstëtzen de Moment nëmme Geschäftskonten. Och Instagram huet viru kuerzem Instagram Graph API gestart (Zougang duerch de Facebook Entwéckler Portal).

Eng Web Oder Mobile App bauen?

Crowdbotics ass de séiersten Wee fir eng Applikatioun ze bauen, ze starten an ze skalaéieren.

Entwéckler? Probéiert de Crowdbotics App Builder fir séier z'erreechen an Apps mat ville populäre Kaderen z'installéieren.

Beschäftegt oder net technesch? Maacht mat Honnerte vu glécklechen Teams déi Software bauen mat Crowdbotics PMs an Expert Entwéckler. Scope Timeline a Käschte mat Crowdbotics Managed App Development gratis.