##GoogleのOAuthをする場合
元々はFlaskのみで実装していたプロジェクトだったのだが、途中からフロントエンドをvue.jsに引き継いだため、OAuth部分をFlask側のコードで実行しようとしていた。
これだとCORSエラーが出てしまう。
CORSエラーへの対応について調べてみると、Flask,Vue.jsともにCORS対応方法についての文献がでてくる。
しかしこれをやっても超えられない。何故か。
色々と探してみたのだが、そもそもそういう使い方は出来ないっぽい。探しすぎてソースを見失ってしまったが、つまりそういうことだったんだと思う。
素直にVue.js側でvue-google-oauth2を使った実装を行う事によってVue．js→Google→Vue.jsという通信によってtokenが取得できるのでそれを使う。
##認証されないGoogleAPIキー
これはそのままこれ
https://qiita.com/kenken1981/items/9d738687c5cfb453be19
どうも、Google認証の「OAuth 2.0 クライアント ID」は、一度あるポートで使うと、その後で違うポートで利用することはできないらしい。
ということで、別途フロントエンド用のキーを作って、vue.js側のポートを指定することで解決。
##認証されないGoogleAPIキー2
承認済みの JavaScript 生成元
については、127.0.0.1 は使えない。
https://qiita.com/kenken1981/items/b6cb3e536668a3cef520
Google認証は、「127.0.0.1」というIPアドレスは認めておらず、「actual urls」というらしい？いわゆるaaa.jpやbbb.comといった形式でないとエラーを返す模様。
##Vue.js側で環境変数が読み込まれない
Vue.js側は yarn build することでdistフォルダに静的ファイルを吐き出す形で利用しているのだが、どうもVue.js側で環境変数を読み込んでくれない。
.envに書いてあろうが読み込まれない。何故か。
buildする時に、その設定が必要だった。
詳細についてはここにある通り。
https://qiita.com/go6887/items/2e254d31b5a4af42f813
vue.js が
/frontend
内に入っていて、/frontoend でビルドコマンドを打つ形にしてありましたが
/frontend/.env.development
というファイルを作って、中に変数を記述。
package.json には
"build": "cross-env NODE_ENV=development vue-cli-service build --mode development --dest ../dist",
みたいな形に書いておく事によって環境変数が読み込まれた。
変更履歴
2021/3/8 初稿up