Lock v11 for Web サンプル

app/controllers/auth0js_controller.rb

@@ -0,0 +1,4 @@
+class Auth0jsController < ApplicationController
+  def show
+  end
+end

app/helpers/auth0js_helper.rb

@@ -0,0 +1,2 @@
+module Auth0jsHelper
+end

app/javascript/src/application.js

@@ -1,2 +1,4 @@
 import './home'
 import './dashboard'
+import './auth0js'
+

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);
+      });
+    });
+  }
+});

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>

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>

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

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