こんにちは、 @dz_ こと大平かづみです。
Prologue
最近、 Auth0 をつかって認証機構を作ろうと試作しています。そこで躓いた点を共有します。
環境
フロントエンド(Vue.js)で Auth0 を使って認証をしようと試みています。基本的にはこのチュートリアル Auth0 Vue SDK Quickstarts: Login を参考にしています。
Vue.js に限らず、フロントエンドで Auth0 を使う場合は auth0-js
を使うことが多いようです。
今回は、この auth0-js
を利用している際にみつけた事象について記載します。
即タイムアウト?
タイムアウトするようなタイミングでもないのに下記のようなエラーが出た場合は、 Auth0 の管理画面から Applications の Allowed Web Origins
の設定を確認してみてください。こちらのドキュメント Error response - Silent Authentication | Auth0 にも記載があるように、 Allowed Web Origins
を正しく設定するとエラーが解消するかと思います。
Timeout during executing web_message communication
常に Login required
エラー
上記エラーをクリアしたのに、今度は常に Login required
…
調査してみたところ、 auth0.js/README.md at master · auth0/auth0.js の checkSession()
の説明を見ると、ソーシャルアカウントでログインしていて、開発環境(インターネット上でアクセス可能なドメインでない)場合は常に Login required
になるようです。
Important: If you're not using the hosted login page to do social logins, you have to use your own social connection keys. If you use Auth0's dev keys, you'll always get login_required as an error when calling checkSession.
ですので、ソーシャルアカウントではなくメールアドレスとパスワードでログインするようにすれば、このエラーは解消できることを確認できました。
なお、インターネットからアクセスできるドメインで運用すればこのエラーは解消されると見受けられますが、まだ試しておりませんのでご了承くださいませ。
Epilogue
これで常にタイムアウトする事象は避けられました!(笑)
どんどん開発するぞ~!(๑•̀ㅂ•́)و✧