Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Ruby

Как использовать OmniAuth-Twitter в Rails-приложении

Difficulty:BeginnerLength:MediumLanguages:

Russian (Pусский) translation by Marat Amerov (you can also view the original English article)

В этом уроке вы узнаете, как дать возможность пользователям вашего приложения входить в систему, используя свою учетную запись Twitter. Это упрощается с помощью таких инструментов, как OAuth.

Вы будете использовать OmniAuth-Twitter, который содержит стратегию Twitter для OmniAuth.

Давай углубимся!

Начало

Начните с создания Rails-приложения. Запустите с вашего терминала команду, чтобы сделать это:

Откройте свой Gemfile и добавьте bootstrap gem.

Установите гем, выполнив команду:

Переименуйте app/assets/stylesheets/application.css в app/assets/stylesheets/application.scs.

По завершении добавьте следующие строки кода для импорта bootstrap.

Создайте партиал с именем _navigation.html.erb, который будет содержать код навигации; Партиал должен быть расположен в каталоге app/views/layouts.

Скопируйте код ниже в свою IDE. Он использует Bootstrap для создания панели навигации вашего приложения.

Чтобы использовать навигацию, вам необходимо отобразить ее в лайоуте приложения. Подкорректируйте свой лайоут приложения так, как показано ниже.

Создайте PagesController с  действием index, введя команду ниже в ваш терминал.

Отредактируйте сгенерированное представление для действия index, таким образом.

В приведенном выше коде мы используем класс jumbotron - это компонент Bootstrap, который позволяет нам расширить viewport, чтобы продемонстрировать маркетинговое сообщение. Об этом вы можете узнать из документации Bootstrap.

Откройте файл роутинга, чтобы добавить свой root_path.

Когфигурация OmniAuth-Twitter

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

Twitter Application Management

В URL коллбека, введите адрес своего сайта плюс "auth/twitter/callback". Если вы находитесь на локальной машине, ваш URL-адрес коллбека должен быть следующим: http://127.0.0.1:3000/auth/twitter/callback.

Вы будете перенаправлены на страницу информации о приложении в Twitter. Перейдите на вкладку Keys and Access Tokens, чтобы получить свои ключи. Скопируйте ключи и сохраните их в безопасное место - мы воспользуемся им в ближайшее время.

URL-адрес коллбека - это URL-адрес, по которому пользователь будет перенаправлен в приложение после успешной проверки подлинности и успешной авторизации (запрос также будет содержать данные пользователя и токен). Все стратегии OmniAuth ожидают, что URL коллбека будет равен "/auth/:provider/callback". :provider берет название стратегии. В этом случае стратегия будет "twitter", как вы указали в инициализаторе.

Откройте свой Gemfile, чтобы добавить гем omniauth-twiiter.

Теперь создайте инициализатор для OmniAuth в каталоге config/initializers. Здесь будет содержаться конфигурация для OmniAuth. Сделайте его похожим на то, что получитось у меня ниже.

На этом этапе Вам нужно будет использовать ключи и токены доступа, которые вы сохранили ранее. Вам необходимо сохранить это приватно, так как вы не должны добавлять их в публичный репозиторий при коммите.

Для этого нужно использовать гем. Откройте Gemfile еще раз и добавьте гем. Добавьте его в свой Gemfile так:

Чтобы установить гем, запустите.

В каталоге вашего приложения создайте файл с именем .env.

Откройте его и добавьте свои ключи и токены:

Откройте .gitignore и добавьте только что созданный файл.

После этого ваши ключи и токены доступа будут в безопасности! Чтобы узнать больше о том, как использовать dotenv-rails, обратитесь к странице на GitHub.

Время работать роутингом. Откройте файл роутов и добавьте роут ниже.

Вам нужно добавить ссылку для входа в Twitter для своей навигации. Откройте файл навигации и настройте его таким образом.

Из вышесказанного, Вы хотите показать ссылку для входа в систему с помощью Twitter только тогда, когда пользователь не выполнил вход.

Создание сессий

Для обработки регистрации пользователей вам потребуется контроллер сессий. Создайте файл для этого в вашем каталоге контроллеров; Вот как это должно выглядеть.

Действие create помогает создать сеанс для пользователей, чтобы они могли войти в ваше приложение. Без этого пользователи не имеют возможности входа в систему.

В этот момент вам понадобится метод current_user. Это поможет Вам проверить, вошел ли пользователь в систему или нет.

Откройте app/controllers/application_controller.rb и добавьте следующее.

Модель User

Теперь создайте модель для своих пользователей. Для этого запустите команду.

Это должно создать файл миграции, который выглядит следующим образом.

Теперь, запустите миграцию базу данных:

Откройте свою модель пользователя и отредактируйте следующим образом:

В приведенном выше коде хранится некоторая информация, принадлежащая пользователю. Это включает name, profile_image, token и secret пользователя. Если ваше приложение требует больше, чем это, Вы можете перейти к странице OmniAuth-Twitter.

Удаление сессий

В своем приложении вы хотите предоставить пользователям возможность выхода из системы. Для этого вам понадобится действие destroy в вашем SessionController. Затем в вашу навигацию будет добавлена ​​ссылка.

Добавьте действие destroy в SessionController.

Затем добавьте эту ссылку для выхода в вашу навигацию, чтобы навигация выглядела так.

Откройте config/routes.rb, чтобы обновить роуты с учетом только что созданного вами действия.

Запустите сервер rails и зайдите на http://localhost:3000, чтобы узнать, что у вас получилось.

Заключение

В этом уроке Вы узнали, как включить OmniAuth-Twitter в ваше Rails-приложение. Вы видели, как получить данные пользователей с помощью OmniAuth-Twitter, которые вы создали в своей модели User. Вы смогли создать SessionControllers для обработки входа и выхода пользователей вашего приложения.

Надеюсь, вам это было полезно. В будущем Вы увидите, как сделать то же самое для Facebook, Google и LinkedIn.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.