Автор оригинала: Chris Harrington.
Более позднее я видел небольшие приложения, реализующие войти с Twitter, Google, Github, LinkedIn и т. Д. Я думаю, что это отличный шаг по ряду причин. Во-первых, поэтому мне не нужно подписаться на еще один аккаунт в еще одном сайте, а во-вторых, потому что разработчики приложений больше не должны реализовывать свою схему регистрации пользователя со всеми тренировками: забытые пароли, электронные письма для активации и так далее Отказ
Я уверен, что многие разработчики у них есть те кусочки кода как часть их инструментов, но для тех, кто этого не, подписания OAUTH настолько проще построить. Я написал руководство сегодня, который описывает, как реализовать войти с Twitter. И потому что я действительно в Node.js в данный момент, он будет написан с JavaScript.
Для тех из вас, кто просто хочет резать на погоню, Я сделал серверный коду, доступный здесь.
Есть несколько вещей, которые нам нужно будет начать.
- Приложение с Twitter. Вам понадобится приложение для разработчиков для использования с Twitter. Если вы не знакомы, как работают OAUTH Sign Ins, как правило, что происходит, что вы нажимаете на кнопку «Войти с Twitter» и направлены на страницу Twitter с именем приложения на нем, с дополнительным логотипом. Эта страница, почему вам нужно создать приложение. Идти здесь управлять вашими приложениями Twitter. После того, как ваше приложение создано, сделайте ноту «токена потребителей» и «Потребительские элементы» под «ключами и токенами доступа»; Нам понадобится их позже.
- Базовое приложение Express-Backed Node.js. Нет ничего, что говорит, что нам нужно использовать Express, но в этом руководстве будет вращаться вокруг построения приложения Node.js с заземления с Express. Я собираюсь предположить, что у читателя уже установлен Node.js, поэтому теперь нам просто нужно будет инициализировать приложение Node.js, как таковой:
npm init npm install express node-twitter-api bluebird --save
Узел-Twitter-API Пакет – это то, что мы собираемся использовать в запутанный куча более сложных внутренних работ Реализация ОАУТ. Он построен специально для Twitter. Я тоже получил Bluebird Там тоже, что это всеобъемлющее обещание выполнение.
План
Таким образом, идея вот что когда пользователь появляется на ваш сайт, он или она может войти в систему, используя Twitter вместо регистрации с использованием пользовательской реализации. Это имеет пару частей.
- Пользователь нажимает на вход с помощью кнопки Twitter.
- Ваш интерфейсный код отправляет запрос на ваш серверный код, указывающий, что пользователь хочет войти в систему с Twitter.
- Ваш серверный код отправляет запрос OAUT в Twitter, указывая на то, что нам нужно
Запросить токен
Отказ Это шаг, который нам нуженТокен потребителей
иПотребительский секрет
из вашего приложения Twitter. - Если все идет хорошо в конце Twitter, мы получаем
Запросить токен
и аЗапросить секрет
от них. На данный момент мы перенаправляем пользователя к заранее определенному URL (по Twitter) с этим токеном как часть строки запроса. - Страница, которую мы перенаправляем, пользователю требует, чтобы он или она вошел в его учетную запись Twitter. После подписания и согласия на термины приложения пользователь перенаправляется обратно к приложению с тем же
Запросить токен
и другой ценность, на этот разОАУТ верификатор
Отказ - Теперь мы используем
Запросить токен
иЗапросить секрет
вместе сОАУТ верификатор
Чтобы получитьТокен доступа
, Также из Twitter. - Предыдущий запрос возвращает
Токен доступа
иДоступ к секрету
, оба из которых используются в третьем и окончательном запросе в Twitter, что является проверкой учетных данных и получить информацию о аутентифицированной информации пользователя.
Флаг Много шагов.
Пользователь нажимает кнопку входа в
Таким образом, самый первый шаг для этого потока – это когда пользователь нажимает «Войти с Twitter!» кнопка. Вот какой-то действительно базовый код, который использует jQuery для отправки запроса Ajax на наш серверный код для генерации Запросить токен
и перенаправьте пользователя в знак Twitter на странице.
Как только пользователь нажимает кнопку входа, запрос направлен на Get <Некоторые домен>/Запрос-токен
Отказ Не волнуйся; Этот запрос будет перенаправлять пользователя в знак Twitter на странице на стороне сервера.
Получите токен запроса и перенаправьте пользователя, чтобы войти
Теперь на стороне сервера вот маршрут для обработки /request-token
запрос.
"use strict"; var Twitter = require("node-twitter-api"), secret = include("secret"); module.exports = function(app) { var twitter = new Twitter({ consumerKey: secret.twitter.consumerKey, consumerSecret: secret.twitter.consumerSecret, callback: secret.twitter.callbackUrl }); var _requestSecret; app.get("/request-token", function(req, res) { twitter.getRequestToken(function(err, requestToken, requestSecret) { if (err) res.status(500).send(err); else { _requestSecret = requestSecret; res.redirect("https://api.twitter.com/oauth/authenticate?oauth_token=" + requestToken); } }); }); ... };
Здесь мы создаем экземпляр узла-Twitter-API, используя сохраненные Потребительский ключ , Потребительский секрет и Обратный вызов URL из которых первые два назначены вашему применению Twitter.
Примечание: Убедитесь, что вы не храните эти значения в публично видимом месте, как GitHub. Если вы это сделаете, те, кто с нематериальными целями может угонировать ваше приложение Twitter.
На успешный запрос мы берем Запросить токен
и отправить его как Oauth_token
Значение строки запроса в URL-адрес перенаправления. Это отправляет пользователя в страницу в Twitter на странице и позволяет использовать или отклонить запрос разрешений приложения. Как только они сделали это, Twitter отправит пользователя к URL, указанному как «Callback» при создании экземпляра Twitter.
Обрабатывать результат перенаправления из Twitter к вашему обратным вызовам
После того, как пользователь вписался, он или она будет перенаправлена на URL-адрес, который мы указали, когда мы создали экземпляр Twitter, поэтому теперь мы должны создать эту страницу.
Все наши страницы обратного вызова здесь запрашивают Токен доступа
с нашего сервера. Мы сталкиваемся к строке запроса с нашей страницы обратного вызова к запросу, потому что он содержит требуемое Oauth \ _token
и Oauth \ _verifier
Значения, оба из которых непосредственно из Twitter.
Обрабатывать запрос на токен доступа
Теперь нам нужно обрабатывать запрос с нашей страницы обратного вызова для токена доступа.
"use strict"; var Twitter = require("node-twitter-api"), secret = include("secret"); module.exports = function(app) { var twitter = new Twitter({ consumerKey: secret.twitter.consumerKey, consumerSecret: secret.twitter.consumerSecret, callback: secret.twitter.callbackUrl }); var _requestSecret; ... app.get("/access-token", function(req, res) { var requestToken = req.query.oauth_token, verifier = req.query.oauth_verifier; twitter.getAccessToken(requestToken, _requestSecret, verifier, function(err, accessToken, accessSecret) { if (err) res.status(500).send(err); else twitter.verifyCredentials(accessToken, accessSecret, function(err, user) { if (err) res.status(500).send(err); else res.send(user); }); }); }); };
Этот код существует в том же файле, что и маршрут для запроса-токена, но я скрыл некоторых из другого кода, чтобы сохранить раздел фрагмента. Чтобы получить Токен доступа
и Доступ к секрету
нам нужно ранее извлечено Запросить секрет
а также прошедший в Запросить токен
и верификатор
значения. Мы передаем их к getaccesstoken
Функция, которая разговаривает с Twitter и если все идет хорошо, возвращает востребованные значения. Мы используем их, чтобы позвонить verifycredentials
и извлечь подписанный в информации пользователя, направьте из Twitter и отправьте его прямо на наш обратный вызов.
Следующие шаги?
Отсюда, это обычно хорошая идея хранить пользователь где-то для легкого поиска, поэтому пользователю не нужно войти в Twitter каждый раз, когда он или она прибывает на ваш сайт, но это за пределами объема этой статьи.
Как я уже упоминал выше, я убрал код сервера и хранится на Github Если кто-то хочет посмотреть. Это не совсем так же, как то, что здесь, как я бы поставил кучу вещей в один файл ради легкого преподавания, но это довольно близко. Если у вас есть какие-либо вопросы, дайте мне знать в комментариях, и я посмотрю, смогу ли я помочь. Спасибо за прочтение!