質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Twitter

Twitterは、140文字以内の「ツイート」と呼ばれる短文を投稿できるサービスです。Twitter上のほぼ全ての機能に対応するAPIが存在し、その関連サービスが多く公開されています。

Authentication

Authentication(認証)は正当性を認証する為の工程です。ログイン処理等で使われます。

受付中

RailsAPI + Vue でのTwitter認証を実装したいです。

starship
starship

総合スコア0

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Twitter

Twitterは、140文字以内の「ツイート」と呼ばれる短文を投稿できるサービスです。Twitter上のほぼ全ての機能に対応するAPIが存在し、その関連サービスが多く公開されています。

Authentication

Authentication(認証)は正当性を認証する為の工程です。ログイン処理等で使われます。

0回答

0リアクション

0クリップ

145閲覧

投稿2022/09/30 14:06

編集2022/09/30 14:08

前提

フロントエンド:Vue(localhost:8080)
バックエンド:RailsAPI(localhost:3000)
以下の教材を使ってLineのようなチャットアプリを作成後、機能を追加中。
https://www.techpit.jp/courses/195/curriculums/198/sections/1313/parts/5296

APIでの認証には
deviseとdevise_token_authを使ってトークン認証を実装していました。
omniauthとomniauth-twitterを使ってTwitter認証を実装中にエラーが発生しました。

実現したいこと

  • Twitter認証

発生している問題・エラーメッセージ

Access to XMLHttpRequest at 'https://api.twitter.com/oauth/authorize?oauth_token=-FolHQAAAAABhEN5AAABg452l40' (redirected from 'http://localhost:3000/auth/twitter?use_authorize=true') from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

該当のソースコード

Gemfile

# 認証部分など gem 'rack-cors' gem 'devise', '~> 4.8', '>= 4.8.1' gem 'devise_token_auth', '~> 1.2' gem 'omniauth', '1.9.1' gem 'omniauth-twitter'

Welcome.vue

// Twitter認証のフロント部分 async authTwitter () { this.error = null console.log("try!!!") try { // ここでAPIに通信を送る const res = await axios.get('http://localhost:3000/auth/twitter', {}) if (!res) { throw new Error('Twitterアカウントを登録できませんでした') } if (!this.error) { setItem(res.headers, res.data.data.name) this.$emit('redirectToChatRoom') } console.log({ res }) return res } catch (error) { this.error = 'アカウントを登録できませんでした' } }

omniauth_callbacks_controller.rb

# フロントからのリクエストを受けるController class Auth::OmniauthCallbacksController < DeviseTokenAuth::OmniauthCallbacksController skip_before_action :skip_session def redirect_callbacks super end def omniauth_success super update_auth_header end def omniauth_failure super end #以下省略 end

試したこと

https://qiita.com/ngron/items/7ff5a1114e8e3daaa243
この記事を見て発生しているエラーは、TwitterAPIのCORS設定によるものでこちら側ではどうしようもないものだと理解したものの、RailsAPIとVue環境下でのTwitter認証を実装する手段がよくわかりません。
いくつか記事を見てもバックエンド側の実装のみでフロントの実装方法は見当たりませんでした。
(https://qiita.com/natsukingdom-yamaguchi/items/15142bd4ad77679afb04
https://qiita.com/AQeNku/items/94485432184257799106 )
お力添えよろしくお願いします。

補足情報(FW/ツールのバージョンなど)

ruby '2.7.1'
rails (6.0.5.1)

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Twitter

Twitterは、140文字以内の「ツイート」と呼ばれる短文を投稿できるサービスです。Twitter上のほぼ全ての機能に対応するAPIが存在し、その関連サービスが多く公開されています。

Authentication

Authentication(認証)は正当性を認証する為の工程です。ログイン処理等で使われます。