PlayFrameworkでGoogleOauth2.0認証

はじめに

この記事はMicroAd Advent Calendar 2017の11日目の記事です

PlayFrameworkでGoogleOauth2.0認証使ったログイン処理(のようなもの)を作った時の手順をまとめました
デプロイ先はherokuです

前提

PlayFramework2.5インストール済み
heroku登録済み

アプリの雛形を作成しherokuにデプロイ

(1)アプリの雛形作成

activator new google-oauth2-sample play-scala
cd google-oauth2-sample
git init
git add . 
git commit -m "Initial commit"
heroku login
heroku create

(2)Procfileを追加
　
Procfile

web: target/universal/stage/bin/google-oauth2-sample -Dhttp.port=${PORT} -DapplyEvolutions.default=true

(3)play.crypto.secretの修正
application.confのplay.crypto.secretの値を適当な値に変更する

cat /dev/urandom | base64 | fold -w 40 | head -1

等で出力された値でok

(4)herokuにデプロイ

git push heroku master

URLにアクセスしエラーが発生しないことを確認

クライアントIDの取得・リダイレクタの設定,DB設定

(1)クライアントIDの取得・リダイレクタの設定
GoogleApiコンソールでClientIdとClientSecretを取得
プロジェクトを作成し、「認証情報を作成」ボタンから「OAuthクライアントID」を選択
アプリケーションの種類は「ウェブアプリケーション」を選択
承認済みのリダイレクト URIを設定する

(2)DB設定
mysqlを使いたかったのでアドオンを追加します
herokuのデフォルトはpostgresみたいです

MySQL接続情報を取得

heroku addons:add cleardb
heroku config | grep CLEARDB_DATABASE_URL
# => CLEARDB_DATABASE_URL: mysql://USERNAME:PASSWORD@HOSTNAME/DBNAME?reconnect=true

変数を設定

ソースコードに埋め込みたくないパスワード等の情報を変数に設定
herokuの　管理画面？から設定できます
Settingsタブの「Reveal Config Vars」で以下の設定

key	value
DB_PASSWORD	PASSWORD
DB_URL	jdbc:mysql://HOSTNAME/DBNAME?reconnect=true
DB_USER	USERNAME
GOOGLE_OAUTH_APIURL	https://accounts.google.com/o/oauth2/v2/auth
GOOGLE_OAUTH_CLIENTID	GoogleApiコンソールで取得したClientId
GOOGLE_OAUTH_CLIENTSECRET	GoogleApiコンソールで取得したClientSecret
GOOGLE_OAUTH_GRANT_TYPE	authorization_code
GOOGLE_OAUTH_REDIRECTURI
GOOGLE_OAUTH_RESPONSETYPE	code
GOOGLE_OAUTH_SCOPE	openid%20email
GOOGLE_OAUTH_TOKEN_ENDPOINT	https://www.googleapis.com/oauth2/v4/token
PLAY_CRYPTO_SECRET	適当な文字列

PLAY_CRYPTO_SECRETは再度適当な値を生成して変数に設定しておきましょう

認証部分の実装

準備が整ったので実装していきます

(1)依存の追加
ORMにslickを使います

build.sbt

name := """google-oauth2-sample"""

version := "1.0-SNAPSHOT"

lazy val root = (project in file(".")).enablePlugins(PlayScala)

scalaVersion := "2.11.7"

libraryDependencies ++= Seq(
  cache,
  ws,
  "org.scalatestplus.play" %% "scalatestplus-play" % "1.5.1" % Test
)

libraryDependencies += "mysql" % "mysql-connector-java" % "5.1.38"

libraryDependencies ++= Seq(
  "com.typesafe.play" %% "play-slick" % "2.0.0",
  "com.typesafe.play" %% "play-slick-evolutions" % "2.0.0"
)

(2)設定ファイル
上記で変数した値をひたすらとってきてます

application.conf

play.crypto.secret = ${?PLAY_CRYPTO_SECRET}

slick.dbs.default.driver="slick.driver.MySQLDriver$"
slick.dbs.default.db.driver="com.mysql.jdbc.Driver"
slick.dbs.default.db.url="jdbc:mysql://localhost/google-oauth2-login"
slick.dbs.default.db.url=${?DB_URL}
slick.dbs.default.db.user="root"
slick.dbs.default.db.user=${?DB_USER}
slick.dbs.default.db.password=""
slick.dbs.default.db.password=${?DB_PASSWORD}
slick.dbs.default.db.connectionTestQuery="SELECT 1"

google.oauth.apiUrl=${GOOGLE_OAUTH_APIURL}
google.oauth.clientId=${GOOGLE_OAUTH_CLIENTID}
google.oauth.responseType=${GOOGLE_OAUTH_RESPONSETYPE}
google.oauth.scope=${GOOGLE_OAUTH_SCOPE}
google.oauth.redirectUri=${GOOGLE_OAUTH_REDIRECTURI}
google.oauth.clientSecret=${GOOGLE_OAUTH_CLIENTSECRET}
google.oauth.request.timeout=3000
google.oauth.grant_type=${GOOGLE_OAUTH_GRANT_TYPE}
google.oauth.token_endpoint=${GOOGLE_OAUTH_TOKEN_ENDPOINT}

(3)メイン処理の実装
以下のような流れで処理を行っています

1. ログインボタンをクリックするとauthorization_endpoint にリクエスト
   authorization_endpointのパラメータにはclientId, clientId, clientId, clientIdとランダムに生成したstateという値を付与

2. 「承認済みのリダイレクト URI」で設定したURLにリダイレクトされるのでパラメータからstateとcodeを取得しそれらを使ってgmailアドレス取得

3. 取得したgmailアドレスがDBに存在していればホーム画面に遷移、なければエラー画面に遷移

とういうわけで詳細は以下をご覧ください
https://github.com/tosametal/google-oauth2-login

※おかしいところは多々あると思います。あとslick使ってるのに非同期処理できてないと言う残念な感じになってます・・・

参考