🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Vue.js

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

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Go

Go(golang)は、Googleで開発されたオープンソースのプログラミング言語です。

REST

REST(Representational State Transfer)はwebアプリケーションの構築スタイルの一種です。HTTP GET/POSTによってリクエストを送信し、レスポンスはXMLで返されます。SOAPのようなRPCの構築と比べるとサーバからクライアントを分離することが出来る為、人気です。

Q&A

解決済

1回答

1256閲覧

Vue + Go + firebaseで認証する方法を教えていただきたいです.

s.kozy

総合スコア16

Vue.js

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

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Go

Go(golang)は、Googleで開発されたオープンソースのプログラミング言語です。

REST

REST(Representational State Transfer)はwebアプリケーションの構築スタイルの一種です。HTTP GET/POSTによってリクエストを送信し、レスポンスはXMLで返されます。SOAPのようなRPCの構築と比べるとサーバからクライアントを分離することが出来る為、人気です。

0グッド

1クリップ

投稿2019/09/20 21:15

編集2019/09/21 23:01

firebaseをから送られたjwt使ってfrontendとAPI両方で認証するシステムを作成しています.
下記のQiitaの記事を参考にしました.
Qiita参考記事

しかし,下記のエラーが返ってきていて認証できません.

error verifying ID token: ID token has invalid 'aud' (audience) claim; expected "vue-auth-491e7" but got "transfer-go"; make sure the ID token comes from the same Firebase project as the credential used to authenticate this SDK; see https://firebase.google.com/docs/auth/admin/verify-id-tokens for details on how to retrieve a valid ID token

qiitaの記事ではlocalStorage.setItem('jwt', res.user.qa)となっていますが,
自分の環境では上記のコードでは取り出せなかったためlocalStorage.setItem('jwt', res.user.ma)に変更しました.

signIn: function () { firebase.auth().signInWithEmailAndPassword(this.email, this.password).then(res => { console.log(res.user.ma) localStorage.setItem('jwt', res.user.ma) this.$router.push('/') }, err => { alert(err.message) }) }

APIにrequestを投げる時にheaderからjwtを取り出してAPIに投げています.

apiPrivate: async function () { let res = await axios.get('http://localhost:8000/private', { headers: {'Authorization': `Bearer ${localStorage.getItem('jwt')}`} }) this.msg = res.data }

main.goには記事のコードをそのまま記述しました.

func authMiddleware(next http.HandlerFunc) http.HandlerFunc { return func(w http.ResponseWriter, r *http.Request) { opt := option.WithCredentialsFile(os.Getenv("GOOGLE_APPLICATION_CREDENTIALS")) app, err := firebase.NewApp(context.Background(), nil, opt) if err != nil { fmt.Printf("error: %v\n", err) os.Exit(1) } auth, err := app.Auth(context.Background()) if err != nil { fmt.Printf("error: %v\n", err) os.Exit(1) } authHeader := r.Header.Get("Authorization") idToken := strings.Replace(authHeader, "Bearer ", "", 1) token, err := auth.VerifyIDToken(context.Background(), idToken) if err != nil { fmt.Printf("error verifying ID token: %v\n", err) w.WriteHeader(http.StatusUnauthorized) w.Write([]byte("error verifying ID token\n")) return } log.Printf("Verified ID token: %v\n", token) next.ServeHTTP(w, r) } } func public(w http.ResponseWriter, r *http.Request) { w.Write([]byte("hello public!\n")) } func private(w http.ResponseWriter, r *http.Request) { w.Write([]byte("hello private!\n")) } func main() { allowedOrigins := handlers.AllowedOrigins([]string{"http://localhost:8080"}) allowedMethods := handlers.AllowedMethods([]string{"GET", "POST", "DELETE", "PUT"}) allowedHeaders := handlers.AllowedHeaders([]string{"Authorization"}) r := mux.NewRouter() r.HandleFunc("/public", public) r.HandleFunc("/private", authMiddleware(private)) fmt.Println("Server Start!") log.Fatal(http.ListenAndServe(":8000", handlers.CORS(allowedOrigins, allowedMethods, allowedHeaders)(r))) }

なぜこのエラーが起こっているのかの原因と解決策を教えていただきたいです.
よろしくお願いいたします.

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

firebase側でJWTを作成していると思いますが、その設定がきちんとできていなさそうです。
コードは問題ないように見えます。

投稿2019/11/22 12:29

anonyrabbit

総合スコア78

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問