From dd38b4278244c60a273fd1386b7a9ffc78cdf57b Mon Sep 17 00:00:00 2001
From: Yuichi Takeuchi <yuichi.takeuchi@takeyuweb.co.jp>
Date: Sat, 17 Feb 2018 00:32:39 +0900
Subject: [PATCH] =?UTF-8?q?Lock=20v11=20for=20Web=20=E3=82=B5=E3=83=B3?=
 =?UTF-8?q?=E3=83=97=E3=83=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

フロントエンドだけで高度な認証を提供できるぽい
UIもウィジェットの他DOMへの埋め込みなどもでき、かなり柔軟にいじれそう
---
 app/controllers/auth0js_controller.rb       |  4 +++
 app/helpers/auth0js_helper.rb               |  2 ++
 app/javascript/src/application.js           |  2 ++
 app/javascript/src/auth0js.js               | 31 +++++++++++++++++++++
 app/views/auth0js/show.html.erb             |  9 ++++++
 app/views/home/show.html.erb                |  2 ++
 config/routes.rb                            |  1 +
 test/controllers/auth0js_controller_test.rb |  9 ++++++
 8 files changed, 60 insertions(+)
 create mode 100644 app/controllers/auth0js_controller.rb
 create mode 100644 app/helpers/auth0js_helper.rb
 create mode 100644 app/javascript/src/auth0js.js
 create mode 100644 app/views/auth0js/show.html.erb
 create mode 100644 test/controllers/auth0js_controller_test.rb

diff --git a/app/controllers/auth0js_controller.rb b/app/controllers/auth0js_controller.rb
new file mode 100644
index 0000000..5641283
--- /dev/null
+++ b/app/controllers/auth0js_controller.rb
@@ -0,0 +1,4 @@
+class Auth0jsController < ApplicationController
+  def show
+  end
+end
diff --git a/app/helpers/auth0js_helper.rb b/app/helpers/auth0js_helper.rb
new file mode 100644
index 0000000..9ee2aa9
--- /dev/null
+++ b/app/helpers/auth0js_helper.rb
@@ -0,0 +1,2 @@
+module Auth0jsHelper
+end
diff --git a/app/javascript/src/application.js b/app/javascript/src/application.js
index e91cf5f..12adc8e 100644
--- a/app/javascript/src/application.js
+++ b/app/javascript/src/application.js
@@ -1,2 +1,4 @@
 import './home'
 import './dashboard'
+import './auth0js'
+
diff --git a/app/javascript/src/auth0js.js b/app/javascript/src/auth0js.js
new file mode 100644
index 0000000..a55e681
--- /dev/null
+++ b/app/javascript/src/auth0js.js
@@ -0,0 +1,31 @@
+import Auth0Lock from 'auth0-lock';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const element = document.getElementById('js-auth0-lock');
+  if (element) {
+    const dataset = element.dataset;
+    const lock = new Auth0Lock(dataset.auth0ClientId, dataset.auth0Domain);
+
+    const loginButton = document.getElementById('js-login-button');
+
+    // ログインモーダルを表示
+    // カスタマイズする方法はドキュメント参照 https://auth0.com/docs/libraries/lock/v11
+    // divへの埋め込み、スマホ向けのパスワードなしなどいろいろできる
+    loginButton.addEventListener('click', () => {
+      lock.show();
+    });
+
+    lock.on('authenticated', (authResult) => {
+      lock.getUserInfo(authResult.accessToken, (error, profile) => {
+        if (error) {
+          alert(error);
+          return;
+        }
+
+        loginButton.style.display = 'none';
+        document.getElementById('js-nickname-area').textContent = profile.nickname;
+        console.log(profile);
+      });
+    });
+  }
+});
diff --git a/app/views/auth0js/show.html.erb b/app/views/auth0js/show.html.erb
new file mode 100644
index 0000000..b56b27b
--- /dev/null
+++ b/app/views/auth0js/show.html.erb
@@ -0,0 +1,9 @@
+<h1>Auth0js#show</h1>
+<p>Find me in app/views/auth0js/show.html.erb</p>
+
+<div id="js-auth0-lock"
+     data-auth0-client-id="<%= Rails.application.secrets.auth0_client_id %>"
+     data-auth0-domain="<%= Rails.application.secrets.auth0_domain %>">
+  <button id="js-login-button">Login with Lock for Web</button>
+  <p>Welcome <span id="js-nickname-area">Guest</span></p>
+</div>
diff --git a/app/views/home/show.html.erb b/app/views/home/show.html.erb
index 72e28b5..7924a79 100644
--- a/app/views/home/show.html.erb
+++ b/app/views/home/show.html.erb
@@ -3,4 +3,6 @@
   <h1>RoR Auth0 Sample</h1>
   <p>Step 1 - Login.</p>
   <a class="btn btn-success btn-lg" href="/auth/auth0">Login</a>
+  <p>Or Lock v11 for Web</p>
+  <%= link_to 'Login with Lock v11 for Web', auth0js_path %>
 </section>
diff --git a/config/routes.rb b/config/routes.rb
index 1b0ea87..21e9f6c 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -2,5 +2,6 @@
   get 'dashboard' => 'dashboard#show'
   get '/auth/oauth2/callback' => 'auth0#callback'
   get '/auth/failure' => 'auth0#failure'
+  get '/auth0js' => 'auth0js#show'
   root 'home#show'
 end
diff --git a/test/controllers/auth0js_controller_test.rb b/test/controllers/auth0js_controller_test.rb
new file mode 100644
index 0000000..3df92af
--- /dev/null
+++ b/test/controllers/auth0js_controller_test.rb
@@ -0,0 +1,9 @@
+require 'test_helper'
+
+class Auth0jsControllerTest < ActionDispatch::IntegrationTest
+  test "should get show" do
+    get auth0js_show_url
+    assert_response :success
+  end
+
+end