Дадайце ўваход у Instagram у дадатак NodeJS з дапамогай PassportJS

Даведайцеся, як API Instagram працуе з Oauth, і рэалізаваць поўны паток уваходу з дапамогай MongoDB.

Сёння мы даведаемся, як дадаць лагін у Instagram да прыкладання NodeJS пры дапамозе PassportJS (адзін з самых папулярных спосабаў кіравання аўтэнтыфікацыяй у NodeJs). Мы даведаемся, як дзейнічаюць API Instagram і рэалізаваць поўны паток уваходу пры дапамозе базы дадзеных (MongoDB).

Як працуе лагін у Instagram?

Instagram выкарыстоўвае Oauth2.0 для праверкі сапраўднасці і аўтарызацыі. Уваход у Instagram можа быць рэалізаваны для звычайных прыкладанняў і без сервераў. Мы хутка разгледзім абодва метаду.

Згодна са стандартным Oauth2.0, для праверкі сапраўднасці API Instagram патрабуецца access_token. Гэтыя access_tokens характэрныя для карыстальніка і абмежаваныя часам. Таму, калі яны скончацца ў будучыні, вам трэба папрасіць абнавіць маркер.

Ніжэй прыведзены тры простыя крокі, каб атрымаць доступ_такену для Instagram:

1- Прамы URL аўтарызацыі карыстальніка ў Instagram.

2- Уваход карыстальніка (калі ён яшчэ не ўвайшоў) і прадастаўленне дазволу на доступ да дадзеных Instagram.

3- Instagram перанакіруе выклік на ваш паказаны URL з параметрам кода, дзе вы будзеце абменьвацца гэтым кодам з access_token на баку сервера.

Для прыкладанняў без сервера, Instagram дадасць access_token ў URL перанакіравання. (Гэта менш бяспечны метад і не рэкамендуецца).

Папярэдні рэквізіт

  • Вузел js
  • Экспрэс JS
  • Пашпарт Ж.С.
  • Рэгіструйце прыкладанне ў Instagram

Рэгіструйце прыкладанне ў Instagram

Перш чым рухацца наперад, нам трэба зарэгістраваць кліента ў Instagram.

Перайдзіце на кансоль распрацоўшчыка Instagram і стварыце новае прыкладанне кліента. Пасля рэгістрацыі вы атрымаеце clientID і clientSecret.

Хутчэй за ўсё, вы будзеце выкарыстоўваць localhost для распрацоўкі гэтага. Падчас рэгістрацыі вам трэба дадаць URL для перанакіравання. Мая была,

http: // localhost: 3000 / auth / instagram / callback

Вы можаце выбраць свой уласны, памятайце, калі вы выкарыстоўваеце localhost і порт 3000 (порт NodeJs па змаўчанні), ваш URL павінен пачынацца з http: // localhost: 3000.

Праблема з Captcha

Рэгіструючы новае прыкладанне кліента, вы можаце сутыкнуцца з праблемай капчу. Каб вырашыць гэта, вы можаце выкарыстоўваць убудова Diable Content Security.

Уваход з дапамогай Instagram

Мы будзем выкарыстоўваць passport.js, PasspostJS - гэта бібліятэка, у якой можна ўкараніць у ваш дадатак розныя тыпы праверкі сапраўднасці. Гэта праграмнае забеспячэнне для вашага прыкладання NodeJs.

Давайце створым экспрэс-прыкладанне з дапамогай.

экспрэс інста-аўт

Для прастаты дадайце наступны код у app.js. Вы можаце аднавіць рэфактар ​​пасля таго, як вы зразумееце паток.

Усталюйце passpost-instagram

npm ўсталяваць пашпарт-інстаграм

Імпартуйце неабходныя файлы

var Instagram = requ ('пашпарт-інстаграм'); const InstagramStrategy = Instagram.Strategy;

Ініцыялізаваць пашпарт JS

Зараз мы ініцыялізуем PassportJs. Калі ваша праграма выкарыстоўвае сеанс (хутчэй за ўсё, ёсць), вам таксама трэба выкарыстоўваць пашпарт. PassportJS будзе серыялізаваць і дэсерыялізаваць асобнікі карыстальнікаў да сесіі і пасля. Пераканайцеся ў тым, што выкарыстоўвайце express.session () перад passport.session (), каб пераканацца, што сесія ўваходу аднаўляецца ў правільным парадку.passport.session () змяняе аб'ект req і змяняе значэнне "user", якое ў цяперашні час ідэнтыфікуе сеанс (з кукі-кліента) у десериализированный аб'ект карыстальніка. У выпадку выхаду з сістэмы passportJs проста выдаляе інфармацыю пра карыстальнікаў з дапамогай deserializeUser.

app.use (passport.initialize ()); app.use (passport.session ());
passport.serializeUser ((user, done) => {зроблена (null, user)}) passport.deserializeUser ((user, done) => {done (null, user)})

Пашпартная стратэгія Instagram

У розных дадатках, такіх як Instagram, Twitter або Google, могуць быць розныя спосабы аўтэнтыфікацыі. PassposJS звязвае розныя механізмы аўтэнтыфікацыі ў модулі, якія называюцца стратэгіямі. Мы выкарыстоўваем стратэгію Instagram для нашага прыкладання.

Для налады стратэгіі Instagram мы дадамо clientID, clientSecret, callbackURL, а таксама перададзім метад зваротнага званка для апрацоўкі аўтэнтыфікацыі.

passport.use (новы InstagramStrategy ({clientID: "YOUR_CLIENT_ID", clientSecret: "YOUR_CLIENT_SECRET", callbackURL: "YOUR_CALL_BACK_URL"}, (accessToken, refreshToken, профіль, зроблена) => {}))

Мы выкарыстоўваем базу дадзеных (MongoDB), каб захаваць інфармацыю нашага карыстальніка і access_token. Вы праверце ў сваёй базе дадзеных, ці існуе карыстальнік ці не, і створыце новы запіс для новых карыстальнікаў.

passport.use (новы InstagramStrategy ({clientID: "YOUR_CLIENT_ID", clientSecret: "YOUR_CLIENT_SECRET", callbackURL: "YOUR_CALL_BACK_URL"}, (accessToken, refreshToken, профіль, зроблена) => {User.findOne (' profile.id}, функцыя (памылка, карыстальнік) {if (err) зваротны званок (памылка);
калі (карыстальнік) {return done (null, user); // Праверце, ці існуе карыстальнік}
const {id, поўнае імя, імя карыстальніка, profile_picture, бія, сайт, лічыцца: {медыя, вынікае, follow_by}} = profile._json.data;
const new_user = новы карыстальнік ({instagram: {id, accessToken, full_name, імя карыстальніка, profile_picture, бія, сайт, лічыцца: {мультымедыя, вынікае, follow_by}}});
new_user.save (функцыя (памылка, карыстальнік) {// захаванне новага карыстальніка ў mongo, калі (памылка) {кінуць err;} вярнуцца зроблена (null, карыстальнік);}); }); }))

Канфігурацыя маршрутаў

Зараз мы наладзім некаторыя маршруты для стварэння патоку ўваходу.

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

Мы націсніце / auth / instagram у нашым дадатку, каб пачаць паток аўтэнтыфікацыі ў нашым дадатку. Гэта пачне нашу аўтэнтыфікацыю ў Instagram, перанакіраваўшы карыстальніка ў Instagram (калі яшчэ не ўвайшлі ў сістэму).

Пад капотам

Давайце паглядзім, што адбываецца пад капотам? Пасля таго, як вы патэлефануеце ў праверку сапраўднасці пашпарта, ён пераходзіць у Instagram, калі карыстальнік скончыць, Instagram націсне на наш URL зваротнага званка з кодам, гэты код будзе заменены на access_token на баку сервера PassportJS. Калі мы не выкарыстоўваем passportJS, нам трэба зрабіць гэта самастойна. PassportJS ажыццяўляе аўтарызацыю і праверку сапраўднасці для нас.

Пасля таго, як PassportJS атрымае access_token, наш метад зваротнага званка, які ў нашым instagramInit, будзе выкліканы для завяршэння працэсу ўваходу.

const instaConfig = {clientID: CLIENT_ID, clientSecret: CLIENT_SECRET, зваротны званокURL: CALLBACK_URL};
const instagramInit = функцыя (accessToken, refreshToken, профіль, зваротны званок) {User.findOne ({'instagram.id': profile.id}, функцыя (памылка, карыстальнік) {if (err) вяртанне званка (памылка);
if (user) {return callback (null, user); // Праверце, ці існуе карыстальнік}
const {id, поўнае імя, імя карыстальніка, profile_picture, бія, сайт, лічыцца: {медыя, вынікае, follow_by}} = profile._json.data;
const new_user = новы карыстальнік ({instagram: {id, accessToken, full_name, імя карыстальніка, profile_picture, бія, сайт, лічыцца: {мультымедыя, вынікае, follow_by}}});
new_user.save (функцыя (памылка, карыстальнік) {if (err) {кінуць памылку;} зваротны званок (null, user);}); }); };
passport.use (новы InstagramStrategy (instaConfig, instagramInit));

Тут мы правяраем, ці ёсць у нас карыстальнік ужо ў нашай базе, ці не. Калі карыстальніка не існуе, мы створым карыстальніка і перададзім зваротны званок PassportJS, які затым серыялізуе і дэсерыялізаваць запыт і ўнутрана накіроўвае запыт у / профіль.

app.get ('/ profile', secureAuthentication, (запыт, адказ) => {const {instagram} = request.user; response.render ('профіль', {карыстальнік: instagram});});

Мы патэлефануем па-першае, каб пераканацца / прафіляваць. Давайце паглядзім наш метад забеспячэння праверкі. Гэты метад проста правярае, ці з'яўляецца запыт аўтэнтыфікаваны ці не.

функцыя secureAuthentication (запыт, адказ, наступны) {if (request.isAuthentication ()) {return next (); } response.redirect ('/'); }

Гэта наш поўны паток. Мы таксама будзем рэалізоўваць метад профілю, каб паказаць інфармацыю карыстальніка і спосаб выхаду.

app.get ('/ profile', secureAuthentication, (запыт, адказ) => {const {instagram} = request.user; response.render ('профіль', {карыстальнік: instagram});});
app.get ('/ logout', function (req, res) {req.logout (); res.redirect ('/');});

Поўны працоўны код

Вы можаце праверыць поўны код тут.

Вам трэба дадаць перайменаванне config-template.json ў config.json і дадаць свае ўліковыя дадзеныя, а таксама дадаць URL манго. Вы можаце выкарыстоўваць mLab для выкарыстання хмарнага манга.

Выснова

Вам не трэба выкарыстоўваць PassportJS для гэтай мэты, але гэта адна з самых вядомых бібліятэк у экасістэме вузла з больш чым 120 тыс. Загрузак штотыдзень. Ён забяспечвае больш за 500 стратэгій аўтэнтыфікацыі, такім чынам, становіцца ўсебаковым рашэннем для кіравання аўтэнтыфікацыяй.

Пакажыце нам, што вы будуеце ў каментарах, і дайце нам ведаць, калі вы дзе-небудзь затрымаліся , і мы будзем рады дапамагчы вам.

Дадатковы соус (Instagram Private API)

Акрамя афіцыйных API для інтэграцыі вашага прыкладання з Instagram распрацоўшчыкі стварылі ўласныя бібліятэкі для працы з Instagram без выкарыстання афіцыйных API. (API API ў пачатку былі вельмі дрэннымі, таму многія распрацоўшчыкі стварылі абыходныя шляхі). Вы можаце паглядзець некаторыя прыклады тут і тут.

Нататкі

Instagram пачаў аслабляць падтрымку API, і бягучая версія API будзе цалкам састарэла да 2020 года . Вы можаце атрымаць доступ да Instagram API праз партал распрацоўнікаў Facebook, хаця яны падтрымліваюць толькі бізнес-рахункі. Акрамя таго, Instagram нядаўна запусціў API Instagram Graph (доступ праз партал распрацоўшчыкаў у Facebook).

Стварэнне прыкладання для Інтэрнэту ці мабільных праграм?

Crowdbotics - гэта самы хуткі спосаб стварэння, запуску і маштабавання прыкладання.

Распрацоўшчык? Паспрабуйце Crowdbotics App Builder для хуткага будаўніцтва лясоў і разгортвання прыкладанняў з рознымі папулярнымі рамкамі.

Заняты ці нетэхнічны? Далучайцеся да сотняў шчаслівых каманд, якія ствараюць праграмнае забеспячэнне з прэм'ер-міністрамі Crowdbotics і экспертнымі распрацоўшчыкамі. Графік дзеяння і кошт з Crowdbotics Managed Development Development бясплатна.