Merge pull request #31 from Sakuten/feature/recaptcha

Support reCAPTCHA Authenication
Sakuten · Jul 27, 2018 · d671d26 · d671d26
2 parents de05384 + 79794c5
commit d671d26
Show file tree

Hide file tree

Showing 9 changed files with 49 additions and 11 deletions.
diff --git a/.env b/.env
@@ -7,3 +7,9 @@ API_PORT=8888
 API_HOST=localhost
 
 DB_PASSWORD=password
+
+# Replace them with your keys.
+# Currently, these keys are test keys for automated testing.
+# Details: https://developers.google.com/recaptcha/docs/faq#id-like-to-run-automated-tests-with-recaptcha-v2-what-should-i-do
+RECAPTCHA_KEY=6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
+RECAPTCHA_SECRET_KEY=6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe
diff --git a/app.json b/app.json
@@ -17,6 +17,10 @@
     "SECRET_KEY": {
       "description": "The encryption key to use in authenication (DON'T USE THIS IN PRODUCTION)",
       "value": "my4ViaJb4rek9YIRLFS_3E0fT88QiRhdK8uKOjHXhrA="
+    },
+    "RECAPTCHA_SECRET_KEY": {
+      "description": "The secret key to use in reCAPTCHA validation (DON'T USE THIS IN PRODUCTION)",
+      "value": "6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe"
     }
   },
   "formation": {},

diff --git a/backend b/backend
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -23,6 +23,7 @@ services:
       - backend
     environment:
       - "REACT_APP_API_SERVER=http://${API_HOST}:${API_PORT}"
+      - "REACT_APP_RECAPTCHA_KEY=${RECAPTCHA_KEY}"
       - "PORT=${PORT}"
       - "HOST=0.0.0.0"
       - "SHELL=/bin/sh"
@@ -43,6 +44,7 @@ services:
       - FLASK_APP=app.py
       - FLASK_CONFIGURATION=development
       - FLASK_ENV=development
+      - RECAPTCHA_SECRET_KEY=${RECAPTCHA_SECRET_KEY}
     command: "/bin/bash -c 'pipenv run start:dep & pipenv run start:flask --port ${API_PORT} --host 0.0.0.0'"
     working_dir: "/code"
     volumes:

diff --git a/frontend b/frontend
diff --git a/netlify.toml b/netlify.toml
@@ -6,7 +6,7 @@
 [build.environment]
   NODE_ENV = "development"
   BABEL_ENV = "development"
-  REACT_APP_API_SERVER = "https://sakuten-api-preflight.herokuapp.com"
+  REACT_APP_API_SERVER = "https://sakuten-api-testflight.herokuapp.com"
 
 [context.production]
   command = "yarn build --production"

diff --git a/test/docker-compose.yml b/test/docker-compose.yml
@@ -29,6 +29,7 @@ services:
       - backend
     environment:
       - "REACT_APP_API_SERVER=http://backend:${API_PORT}"
+      - "REACT_APP_RECAPTCHA_KEY=6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
       - "PORT=${PORT}"
       - "HOST=0.0.0.0"
     working_dir: "/code"
@@ -46,8 +47,9 @@ services:
       - db
     environment:
       - FLASK_APP=app.py
+      - FLASK_CONFIGURATION=testing
       - FLASK_ENV=development
-      - FLASK_DEBUG=1
+      - RECAPTCHA_SECRET_KEY=6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe
     command: "start:flask --port ${API_PORT} --host 0.0.0.0"
     working_dir: "/code"
     volumes:

diff --git a/test/index.js b/test/index.js
@@ -7,13 +7,34 @@ describe('Login', function () {
     browser.reload()
   })
 
-  it('Can successfully authenicate with example1', function () {
+  it('Can successfully renders top page', function () {
+    browser.url('http://frontend:8000/')
+    browser.waitForVisible('p', 3000)
+    const title = $('p').getText()
+    expect(title).to.include('Home')
+  })
+
+  it('Routes to login page', function () {
     browser.url('http://frontend:8000/')
-    $('input[name="username"]').setValue('example1')
-    $('input[name="password"]').setValue('example1')
-    $('button').click()
-    browser.waitForVisible('h1', 3000)
-    const title = $('h1').getText()
-    expect(title).to.equal('Logged in as example1')
+    browser.waitForVisible('[data-test="home-login"]', 3000)
+    $('[data-test="home-login"]').click()
+    expect(browser.getUrl()).to.equal('http://frontend:8000/lottery/login')
+  })
+
+  it('Can successfully authenicate with example1', function () {
+    browser.url('http://frontend:8000/lottery/login')
+    browser.waitForVisible('iframe', 3000)
+    $('[data-test="loginview-username"]').setValue('example1')
+    browser.frame($('iframe').value)
+    $('.recaptcha-checkbox').click()
+    browser.waitForVisible('.recaptcha-checkbox-checkmark', 5000)
+    browser.frameParent()
+    $('[data-test="loginview-login"]').click()
+    setTimeout(() => {
+      browser.refresh()
+      browser.waitForVisible('h1', 3000)
+      const title = $('h1').getText()
+      expect(title).to.equal('Logged in as example1')
+    }, 1000)
   })
 })
diff --git a/unit_test/docker-compose.yml b/unit_test/docker-compose.yml
@@ -7,6 +7,7 @@ services:
     command: "test"
     environment:
       - "CI=1"
+      - "REACT_APP_RECAPTCHA_KEY=6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
     volumes:
       - "../${FRONTEND_DIR}:/code"
       - /code/node_modules
@@ -15,5 +16,7 @@ services:
       dockerfile: ../unit_test/Dockerfile.backend
       context: ../${BACKEND_DIR}
     command: "test"
+    environment:
+      - RECAPTCHA_SECRET_KEY=6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe
     volumes:
       - "../${BACKEND_DIR}:/code"