ソーシャルログインのエラー(HSTS)

ソーシャルログイン(Google、Twitter、facebook)を実装したのですが、エラーが起きてしまいました。

そして、ブラウザによってログインできたりできなかったりというおかしな挙動をしていました。

解決したので、このブログで紹介したいと思います。

現象としては、自分で制作しているWEBアプリにソーシャルログイン機能をつける際に、Chrome、Firefox、Android4.4ではうまく動作し、iOS8のsafariだとエラーが起こります。

うまくいくブラウザとそうでないブラウザがあるなんて理由が分からず、初めはサーバを疑ったり、仕組みを疑ったりしていたのですが、解決するとなんてことない理由でした。。

原因はSSLのコールバックURLに「https」を含めていなかったこと。

通常の「http」でコールバックしようとしていたためエラーになっていました。

Router::urlからurlを自動生成していたので、デフォルトではSSLのコールバックURLになっていなかったのです。これは意外と盲点でした。

では、なぜhttpでもうまくいくブラウザがあるのかを説明します。

それは「HSTS機能」が有効になっており、自動でSSL化されていたためだったのです。

※HSTSとは、強制的にHTTPSへリダイレクトし、以降のそのドメインへの接続はすべてHTTPSとする機能となります。

HSTSはサーバで設定するもので、設定してあるとブラウザは自動的にSSLを強制しますので、コールバックURLも適切にリダイレクトされ、問題なかったというわけです。

ただ、ブラウザ側でHSTSのサポートがされていない場合には強制されずにエラーになっていたということです。

詳しい対応状況は以下の「ブラウザ実装状況」を確認してみてください。