読者です 読者をやめる 読者になる 読者になる

【JavaScript実践】 外部データベースの利用(milkcocoa) 3

JavaScript

作成している掲示板にログイン機能を実装する。

milkcocoaの認証はAuth0を利用しなければならないようだ。

デモページ

リポジトリ

  1. milkcocoaとAuth0の連携
  2. Auth0ライブラリの読み込みとAuth0Lockオブジェクトの初期化
  3. 認証処理の追加
  4. 認証後の処理を設定

milkcocoaとAuth0の連携

milkcocoaダッシュボード左メニュー「Auth」をクリックし、「In case of auth0」欄のクライアントシークレット文字列をコピーする。

f:id:kosumoro:20160820171528j:plain

Auth0ダッシュボード左メニュー「Clients」をクリックしてクライアントを選択した後、「Settings」タブの「Client Secret」欄にコピーしたクライアントシークレット文字列を貼りつける

f:id:kosumoro:20160820171946j:plain

Auth0ライブラリの読み込みとAuth0Lockオブジェクトの初期化

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Practice Javascript</title>
</head>
<body>
  <p>
    <input id="input" type="text">
    
    <button id="send">Send</button>
  </p>
  
  <ul id="output"></ul>
  
  <script src="//cdn.auth0.com/js/lock/10.0/lock.min.js"></script>
  <script src="//cdn.mlkcca.com/v0.6.0/milkcocoa.js"></script>
  <script src="./scripts/script.js"></script>
</body>
</html>

//cdn.auth0.com/js/lock/10.0/lock.min.js を読み込む。

{
  let milkcocoa = new MilkCocoa("dogis2md77d.mlkcca.com");

  // Auth0ライブラリの読み込みとAuth0Lockオブジェクトの初期化
  let lock = new Auth0Lock("dJdjys45aCbrb03uGavttS1zlmqjwbpS", "cosmology233.auth0.com");

  let inputArea = document.getElementById("input");
  let sendButton = document.getElementById("send");
  let outputList = document.getElementById("output");
  
  window.addEventListener("DOMContentLoaded", getData);
  sendButton.addEventListener("click", sendInputData);
  
  function sendInputData() {
    // 略
  }
  
  function getData() {
    // 略
  }
  
  function createOutputItem(date, message) {
    // 略
  }
}

Auth0Lockオブジェクトの初期化を行う。

認証処理の追加

{
  let milkcocoa = new MilkCocoa("dogis2md77d.mlkcca.com");
  let lock = new Auth0Lock("dJdjys45aCbrb03uGavttS1zlmqjwbpS", "cosmology233.auth0.com");
  let inputArea = document.getElementById("input");
  let sendButton = document.getElementById("send");
  let outputList = document.getElementById("output");

  lock.on("authenticated", authResult => {
    // Auth0での認証後、再度milkcocoaでの認証を行う。
    // milkcocoaでの認証ができれば認証後の処理へ
    milkcocoa.authWithToken(authResult.idToken, (err, user) => {
      render(user.sub);
    });
  });

  // milkcocoaから認証情報の取得
  milkcocoa.user((err, user) => {
    // もし認証済みなら認証後の処理へ
    if(user) {
      render(user.sub);
    }

    // もし認証されていなければAuth0を使用して認証を行う
    else {
      lock.show();
    }
  });
  
  // 認証後の処理
  function render(userId) {

  }
  
  function sendInputData() {
    // 略
  }
  
  function getData() {
    // 略
  }
  
  function createOutputItem(date, message) {
    // 略
  }
}

認証処理ではまずmilkcocoaでの認証確認を行う。

認証済みであれば認証完了後の処理を行う。

まだ認証が済んでいない場合は、Auth0のAPIを使用して認証を行う。

Auth0で認証確認後、Auth0の認証データを基に再度milkcocoaでの認証を行う。

認証後の処理を設定

データの読み込みやSendボタンのイベント追加の処理を認証後に行うように書き換える。

データ書き込み時にuserIdも送信し、出力時にもuserIdを出力するようにそれぞれの関数を編集した。

{
  let milkcocoa = new MilkCocoa("dogis2md77d.mlkcca.com");
  let lock = new Auth0Lock("dJdjys45aCbrb03uGavttS1zlmqjwbpS", "cosmology233.auth0.com");
  let inputArea = document.getElementById("input");
  let sendButton = document.getElementById("send");
  let outputList = document.getElementById("output");
  
  lock.on("authenticated", authResult => {
    milkcocoa.authWithToken(authResult.idToken, (err, user) => {
      render(user.sub);
    });
  });

  milkcocoa.user((err, user) => {
    if(user) {
      render(user.sub);
    }
    else {
      lock.show();
    }
  });
  
  // 認証後の処理
  function render(userId) {
    getData();
    
    sendButton.addEventListener("click", () => {
      sendInputData(userId);
    });
  }
  
  function sendInputData(userId) {
    let ds = milkcocoa.dataStore("messages");
    
    ds.push({
      "user": userId.substr(-10),
      "datetime": (new Date()).toLocaleString(),
      "message": inputArea.value
    });
  }
  
  function getData() {
    let ds = milkcocoa.dataStore("messages");
    
    ds.stream().next((err, data) => {
      data.forEach(datum => {
        let outputItem = createOutputItem(datum.value.user, datum.value.datetime, datum.value.message);
        
        outputList.appendChild(outputItem);
      });
    });
  }
  
  function createOutputItem(user, date, message) {
    let outputItem = document.createElement("li");
    let userSpan = document.createElement("span");
    let dateSpan = document.createElement("span");
    let messageSpan = document.createElement("span");
    
    userSpan.textContent = (user || "anonymous") + " ";
    dateSpan.textContent = "(" + date + "): ";
    messageSpan.textContent = message;
    
    outputItem.appendChild(userSpan);
    outputItem.appendChild(dateSpan);
    outputItem.appendChild(messageSpan);
    
    return outputItem;
  }
}

f:id:kosumoro:20160820182840j:plain