はじめに
この記事は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)メイン処理の実装
以下のような流れで処理を行っています
ログインボタンをクリックするとauthorization_endpoint にリクエスト
authorization_endpointのパラメータにはclientId, clientId, clientId, clientIdとランダムに生成したstateという値を付与「承認済みのリダイレクト URI」で設定したURLにリダイレクトされるのでパラメータからstateとcodeを取得しそれらを使ってgmailアドレス取得
取得したgmailアドレスがDBに存在していればホーム画面に遷移、なければエラー画面に遷移
とういうわけで詳細は以下をご覧ください
https://github.com/tosametal/google-oauth2-login
※おかしいところは多々あると思います。あとslick使ってるのに非同期処理できてないと言う残念な感じになってます・・・