Google OAuth認証をローカル開発環境でテストした際のメモ

最近、ドットインストールで楽しくプログラミングの勉強をしているのだが、http://dotinstall.com/lessons/google_connect_phpで少し躓いた所があったのでメモしておく。


まず、Webサービスを開発する演習の場合、私はMac OS X上のVirtualBoxにCent OSをインストールして、ローカル開発環境として利用している。で、例えばGoogleでログインするWebサービスの場合、http://tomute.dev/google_connect_php/というURLを仮に作って、演習として開発したWebサービスにアクセス出来るようにしている。


しかし、上記のようにインターネットでアクセス出来ないURLを使っていると、Google APIs Consoleでアプリの登録が上手く行かなかった。具体的には下の画面のように「OAuth 2 redirect URL "http://tomute.dev/google_connect_php" is invalid.」というメッセージが出て、クライアントIDの作成に失敗した。


ドットインストールの同様の演習でツイッターでログインするWebサービスの基礎FacebookでログインするWebサービスの基礎の場合には、インターネットでアクセス出来ないURLでも問題なかったのだが、GoogleでログインするWebサービスの基礎の場合は残念ながらダメであった。


対策として、とりあえずGoogle APIs ConsoleのクライアントID作成時に、Redirect URIsをhttp://localhost/google_connect_php/redirect.phpJavaScript originsをhttp://localhostにするとクライアントIDの作成には成功。


そして、redirect.phpのソースも少し修正して、redirect_urihttp://localhost/google_connect_php/redirect.phpにする(2箇所)。これでとりあえずGoogle OAuth認証の動作確認が出来るようになるのだが、Google認証の画面で認証を許可した後、リダイレクトされるhttp://localhost/google_connect_php/redirect.phpはアクセス出来ないので、ブラウザのエラー画面が表示される。


そこでブラウザのアドレスバーでlocalhostをtomute.devに修正して、そのURLにアクセスするとGoogle認証が無事完了する。ちょっと面倒なステップが挟まるが、こうすることでとりあえずこの演習を試すことが出来た。