ペペロミア開発ブログ

React Nativeで開発しているアプリ「ペペロミア」の技術系記事を投稿してます

Firebase Authenticationの「This browser is not supported or 3rd party cookies and data may be disabled. 」の解決方法

今、以下のレポジトリでWeb版ペペロミアを開発中ですが、その時にハマった内容を記事にしました。

github.com

はじめ

Firebase Authenticationでログイン画面を作成して、いざログインしようとすると

f:id:wheatandcat:20200321190846p:plain

This browser is not supported or 3rd party cookies and data may be disabled. のエラーがでてAuthenticationが行えない

エラー内容を調べてみると。。。

https://qiita.com/penguin_fuyuno/items/831ec49bba5b2621ad25qiita.com

github.com

サードパーティCookieのブロックが原因でした。 基本的にブラウザはbraveを使っているので、この辺のトラッキング系は完全ブロックされているのでエラーになってました。

brave.com

って、ことでサードパーティ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でドメインを発行します。

domains.google

peperomia.infoをFirebase Hostingに設定します。 (カスタムドメインを追加)

f:id:wheatandcat:20200321193144p:plain

次に以下を使用して、サブドメインに設定するGAEのルーティングルールを設定します。

cloud.google.com

dispatch.yamlを作成して以下を記載

■ dispatch.yaml

dispatch:
  - url: "*app.peperomia.info/*"
    service:  peperomia-web

以下を実行してデプロイ

$ gcloud app deploy dispatch.yaml

次にGAEにドメインを設定していきます。

GCPを開いてApp Engine > 設定 > カスタムドメインを開いて、カスタムドメインを追加します。

f:id:wheatandcat:20200321194313p:plain

使用するドメインに peperomia.info マッピングにapp.peperomia.infoを設定して追加します。

最後にGoogle Domainsを開いて peperomia.infoのDNSの設定を開いて カスタム リソース レコードに以下を設定します

f:id:wheatandcat:20200321194740p:plain

名前にapp、タイプは CNAMEで、データはghs.googlehosted.com.

これで反映されるまで待ってアクセスすると以下のURLでWebサイトにアクセスできるようになります。

https://app.peperomia.info/login

さらに、このままログインしても

f:id:wheatandcat:20200321195201p:plain

問題なくAuthenticationのダイアログが表示されました。

フロントエンドばかりやっていると、この辺の知識に触れることが無いから勉強になりました。