Youtube Data API + firebase + nuxt + vuex + typescript + sass開発時のメモ

4347 ワード
Firebase TypeScript nuxt.js Vuex YouTubeAPI TypeScript テキストリンク

俺が躓いたエラーをメモ

sassじゃなくてscss

vueファイルの中身のスタイルシートでエラーが出たら、langをsassじゃなくてscssにすると動く場合もある

<style lang="scss" scoped>
</style>

sass-loader入れてるのに、何故かscss。

youtubeApiを叩く時はnpm使ってはいけない

npmにGoogeAPIsというモジュールがGoogle純正であるが、これはwebpack非対応らしく Cannot find module 'child_process'というエラーが出てnuxtが動かない。

幸い、googleAPIはURLの構文が簡単だからライブラリ使わず直に文字列操作出来るからナシでいく。

typescriptでextendは使ってはいけない

vueファイルでexport defaultするオブジェクトは、asyncData等 vue標準には無いプロパティが追加されている。export default Vue.extend({});とすると、そんなプロパティが無い とエラーになってしまうのでexport default {}の書き方にする。
typescriptの意味が半減してるからなんとか解決出来たらいいんだがな。

node-sassは最新バージョンを使ってはいけない

2019/09/01時点ではsass-loaderのv8系は相性が悪いのでv7系を指定する事

options has an unknown property 'indentedSyntax'. These properties are valid:のエラーが出る。issueは以下。

nuxtはsrc dirを指定する

nuxtはlayoutsやpages等、予約されたサブフォルダを配置する必要がある。標準ではプロジェクトルートに配置されるが、ソースコードはsrcディレクトリに纏めたい。

ので、nuxt.confg.ts にsrcDir:"./src", を追加する。

youtubeApiでリクエスト時にopenIdを指定する

youtubeAPIのログインとfirebaseのログインは別の仕組みなので、本来はユーザは二度ログインしないといけない。
それは面倒なので、youtubeAPIのログイン結果で受信するidトークンという文字列をfirebaseに渡す事で、firebaseは確認画面を出さずにこっそりログイン状態にする事が出来る。

逆に、firebaseのログイン結果をyoutubeAPIに投げるのは出来なさそう？

idトークンの文字列は「oauth2 openID Token 」「JWT (JSON Web Token)」あたりが検索キーワード。

参考サイト

なんでもIDトークンが使える訳ではなく、事前にfirebaseのプロジェクトの設定に このYoutubeAPI(実際はgoogleAPI)からのIDトークンを使えますよ という設定をする必要がある。

まず、YoutubeのAPI設定画面から、以下の赤枠の文字列を見る。

その値をFirebaseのAuthenticationのログイン方法、Google 外部プロジェクト の値に入れる。

管理画面での準備はこれでよし。

apiを取得する時、一番最初に投げる https://accounts.google.com/o/oauth2/auth へのリクエストパラメータのscopeにopenid emailを追加する。

そうすると、最後の https://www.googleapis.com/oauth2/v4/token からのレスポンスにid_tokenというパラメータがあり、文字列を取得出来る。

この文字列を以下のidTokenに入れると、ユーザからはログインを認識されずにログイン出来る。

      const creds = firebase.auth.GoogleAuthProvider.credential(idToken);
      firebase.auth().signInAndRetrieveDataWithCredential(creds).then((result) => {
        if (result) {
          let user = result.user;
          console.log(user);
          alert("idtokenでログイン成功")
        }
      }).catch(error => {
        console.log(error);
        alert("idtokenでログイン失敗")
      })