firebaseのgoogleログインでリダイレクト先に関するエラーが起きます。

monacaでfirebase のgoogle認証を使うには

firebaseでgoogleによるログインを試しています。

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>Hello Firebase Auth</title>
6  <link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.css" />
7  <style>h1{text-align: center;}</style>
8</head>
9<body>
10  <h1>Hello Firebase Auth</h1>
11  <div id="firebaseui-auth-container"></div>
12
13  <script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-app.js"></script>
14  <script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-auth.js"></script>
15  <script src="https://www.gstatic.com/firebasejs/ui/3.5.2/firebase-ui-auth__ja.js"></script>
16  <script src="./config.js"></script>
17  <script>
18    //----------------------------------------------
19    // Firebase UIの設定
20    //----------------------------------------------
21    var uiConfig = {
22        // ログイン完了時のリダイレクト先
23        signInSuccessUrl: './done.html',
24        // 利用する認証機能
25        signInOptions: [
26          //firebase.auth.EmailAuthProvider.PROVIDER_IDだとemail認証になります。
27          firebase.auth.GoogleAuthProvider.PROVIDER_ID
28        ],
29
30        // 利用規約のURL(任意で設定)
31        tosUrl: 'http://example.com/kiyaku/',
32        // プライバシーポリシーのURL(任意で設定)
33        privacyPolicyUrl: 'https://miku3.net/privacy.html'
34      };
35
36      var ui = new firebaseui.auth.AuthUI(firebase.auth());
37      ui.start('#firebaseui-auth-container', uiConfig);
38</script>
39</body>
40</html>

こちらのコードを書いたのですが、firebase.auth.GoogleAuthProvider.PROVIDER_IDの時には

This operation is not supported in the environment this application is running on. "location.protocol" must be http, https or chrome-extension and web storage must be enabled

(Google翻訳)
この操作は、このアプリケーションが実行されている環境ではサポートされていません。「location.protocol」はhttp、https、またはchrome-extensionである必要があり、Webストレージが有効になっている必要があります

というエラーが起きます。原因として、リダイレクト先をdone.htmlにしていることが考えられます。公式ドキュメントによると、リダイレクト先を作った上でホワイトリストに登録したらいいらしいですが、どうすればいいかわかりません。

mistn

2019/12/14 12:22

そのhtmlファイルはローカルに置いてあってそのままブラウザで表示してたりしますか？

taiyakix

2019/12/14 23:05

そうです。公式ドキュメントによるとファイルはローカルではいけなくて、ローカルでないファイルを作ってそれをリダイレクト先のホワイトリストに登録したらいいらしいのですが、どうやったらそのファイルを作れるのか。そしてどこでホワイトリストに登録すればいいのかわかりません。

行動規範の内容に同意します

回答1件

ベストアンサー

htmlファイルをブラウザで表示した場合location.protocolがfile:となり、認証を行うことができません。
認証を行うにはhttp/httpsでアクセスする必要があり、そのためにはwebサーバーが必要になります。

webサーバーなら何でもいいですが一番簡単そうな方法を書いておきます。

コマンドプロンプトを開き、htmlファイルが置いてあるフォルダまで移動する
npm install -g serve でパッケージのインストール
serve でサーバーの起動
localhost:5000 にブラウザでアクセス
サーバーを停止させるときはコマンドプロンプトで ctrl+c

これで認証が行えるはずです。
npmが使えない場合はnode.jsをインストールしてください。

投稿2019/12/15 02:00

mistn

総合スコア1191

taiyakix

2019/12/15 02:10

Step2 どうすればいいですか?

mistn

2019/12/15 02:12

2と3はコマンドプロンプトで実行してください

taiyakix

2019/12/15 02:14

ごめんなさいstep1 でした。

taiyakix

2019/12/15 02:15

というかhtmlファイルのインンストール方法そのものがわからなくて。

taiyakix

2019/12/15 02:18

htmlファイルのインストール方法はわかりました。

mistn

2019/12/15 02:31

htmlファイルのインストールがなんのことかよくわかりませんが、解決できたということでいいですか？

taiyakix

2019/12/15 02:38

コマンドプロンプトの事が上手くわからないのですが、https://blog.katsubemakito.net/firebase/firebase-authentication-google-web1 ↑のサイトはサンプルがうまくいっていて、何が違うのかわかりません。もちろん、monaca上のページにはurlがないのはわかってますが。コマンドプロンプト以外でいい方法はありませんか?

mistn

2019/12/15 03:01

これmonacaだったんですか？タグか質問に書いて欲しかったです。それだとこの方法は使えません。とりあえず回答受付中に戻して、質問を更新することをおすすめします。

taiyakix

2019/12/15 03:28

ごめんなさい。本当にすいません。どこにもmonacaと書いてませんね。本当に申し訳ないです

mistn

2019/12/15 06:13

https://firebase.google.com/docs/auth/web/cordova?hl=ja ここに書いてある方法を使えばできそうですが、monacaではフリープランだとプラグインの追加ができないようです。有料プランを契約しているなら試してみてください。

taiyakix

2019/12/15 06:43

有料プラン...クリスマスプレゼントに頼みますか...