今、以下のレポジトリでWeb版ペペロミアを開発中ですが、その時にハマった内容を記事にしました。
はじめ
Firebase Authenticationでログイン画面を作成して、いざログインしようとすると
This browser is not supported or 3rd party cookies and data may be disabled. のエラーがでてAuthenticationが行えない
エラー内容を調べてみると。。。
https://qiita.com/penguin_fuyuno/items/831ec49bba5b2621ad25qiita.com
サードパーティCookieのブロックが原因でした。 基本的にブラウザはbraveを使っているので、この辺のトラッキング系は完全ブロックされているのでエラーになってました。
って、ことでサードパーティCookieの対応をしていきます。
まず、原因について解説すると Firebase Authenticationの設定は以下のようなものを使用すると思います。
var firebaseConfig = {
apiKey: "*********",
authDomain: "*********.firebaseapp.com",
databaseURL: "*********",
projectId: "*********",
storageBucket: "*********",
messagingSenderId: "*********",
appId: "*********"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
この中のauthDomainとホスティングしているドメインが違うために サードパーティCookieのエラーになるので、ここを同一のドメインにすれば解決します。
なので解決方法は以下の2つになると思います
- ①. Firebase Hostingを使用する
- ②. Firebase Hostingのサブドメインに対象のWebサイトを設定する
①.上記のauthDomainはデフォルトでFirebase Hostingのドメインになっているので、Firebase Hostingを使用すれば、この問題は発生しません。 ただ今回はSSRを使用するためGAEを採用しているので、②のサブドメインの方を採用しました。
今回の対応環境は、こんな感じです。
- WebサイトはGAE
- ドメイン発行はGoogle Domains
- 取得したドメインは: peperomia.info
- サブドメインとしてapp.peperomia.infoを設定して、上記のGAEをルーティングする
まず、Google Domainsでドメインを発行します。
peperomia.infoをFirebase Hostingに設定します。 （カスタムドメインを追加）
次に以下を使用して、サブドメインに設定するGAEのルーティングルールを設定します。
dispatch.yamlを作成して以下を記載
■ dispatch.yaml
dispatch:
- url: "*app.peperomia.info/*"
service: peperomia-web
以下を実行してデプロイ
$ gcloud app deploy dispatch.yaml
次にGAEにドメインを設定していきます。
GCPを開いてApp Engine > 設定 > カスタムドメインを開いて、カスタムドメインを追加します。
使用するドメインに peperomia.info マッピングにapp.peperomia.infoを設定して追加します。
最後にGoogle Domainsを開いて peperomia.infoのDNSの設定を開いて カスタム リソース レコードに以下を設定します
名前にapp、タイプは CNAMEで、データはghs.googlehosted.com.
これで反映されるまで待ってアクセスすると以下のURLでWebサイトにアクセスできるようになります。
https://app.peperomia.info/login
さらに、このままログインしても
問題なくAuthenticationのダイアログが表示されました。
フロントエンドばかりやっていると、この辺の知識に触れることが無いから勉強になりました。
