👶

【続】vuepressで簡易ログイン機能付きのドキュメントを作ってみる

2021/05/03に公開

Vue.js

GAS

VuePress

tech

はじめに

ご覧いただきありがとうございます。mocです。

先日は、vuepressで簡易ログイン付きのドキュメントを作成しました。

しかし、Login.vueにログイン可能なユーザ情報をベタがきしてるのがイケてない。。。

なので、今回はそれを解消していきます。

今回の内容

今回は、ログイン可能なユーザ情報を別のところに保持させて、ログインするときにその情報を参照して、ログイン判定を行えるようにします。

やることとしては、こんな感じです。

ログイン可能なユーザ情報を保持する場所を作る
1.に保持している情報を外部から参照できるようにする
vuepress側で1の情報を見に行けるようにする

1.ログイン可能なユーザ情報を保持する場所を作る

今回は、google spreadsheetを使っていきます。

こんな感じでユーザ一覧を作ってみましょう。

ヘッダー行を、usernameとpasswordとしておきます。

そしてデータ行に、サンプルデータとして10個のデータを登録しておきます。
（ここは何を入れても大丈夫です。好きなデータをいれてみましょう。）

これでユーザ情報の準備は完了です、簡単！

2. 1に保持している情報を外部から参照できるようにする

spreadsheetに保持しているデータを外部から参照できるようにするためには、google apps scriptを利用します。

spreadsheetのメニューから、ツール > スクリプトエディタを選択します。

すると、google apps scriptの画面が開くので、デフォルトで作成されているファイル（コード.gs）を編集していきます。

まずは、ファイル名をわかりやすくするために、getValidUserList.gsに変更します。

次にファイルの内容を下記のように編集します。

getValidUserList.gs

function doGet() {
  var data = getAllUserList();

  var payload = JSON.stringify(data);
  var output = ContentService.createTextOutput();
  output.setMimeType(ContentService.MimeType.JSON);
  output.setContent(payload);  

  return output;
}

function getAllUserList() {
  // ユーザ一覧のシートを取得する
  var sheet = SpreadsheetApp.getActive().getSheetByName('list')
  // 取得したシートから、値が入っている範囲を取得する
  var range = sheet.getDataRange().getValues();

  // ヘッダー行の値を定義する
  var header = ['username', 'password'];
  // ユーザリスト
  var allUserList = [];

  // 取得したデータ全件ループ処理
  range.forEach(user => {
    // header行を処理対象外とする
    if (user[0] !== header[0]) {
      // ユーザ情報を作成
      var user_info = {
        username: user[0],
        password: user[1]
      }
      // ユーザリストにユーザ情報を追加
      allUserList.push(user_info)
    }
  })

  return allUserList;
}

簡単に解説です。

まず、このファイルには２つの関数が定義されています。

doGet関数とgetAllUserList関数です。

doGet関数は、外部からGETリクエストがきたときに実行される関数です。
（3で、vuepressからユーザの情報を参照しようとしたときに、実行されます。）

ざっくりとした流れとしては、たったこれだけ。

ユーザ一覧のデータを取得
JSON形式のデータを返却

getAllUserList関数は、ユーザ一覧のスプレッドシートから情報を取得するための関数です。
doGet関数から呼ばれます。

処理の流れは、先ほど示したソースコードにコメントを書いているので、なんとなくお分かりいただけたかなと思います。

これで、ユーザ情報を取得する準備は完了です！

3. vuepress側で1の情報を見に行けるようにする

それでは最後のステップです。

前回作成したvuepressのコードをちょこっとだけ修正します。

と、その前に、外部の情報を取得するためのaxiosというライブラリをインストールしていきましょう。

$ npm install axios -D

これができれば、後は、Login.vueのスクリプトタグのコードを修正していきます。

 <script>
 import { STORAGE_KEY } from "./helper";
+import axios from 'axios';
+const url = "https://script.google.com/macros/s/AKfycbzk8_6iucpP6BjUKoUWuiMUEbJbbWvTU-809k1cQDx7tsHaRL1qC69G2AMfkpr4XA7v/exec"

 export default {
   data() {
     return {
       username: "",
       password: "",
       validUserList: [],
     }
   },
+  async mounted() {
+    this.validUserList = await this.getValidUserList();
+  },
   methods: {
+    async getValidUserList() {
+      const result = await axios.get(url);
+      return result.data;
+    },
     login() {
      const user = this.validUserList.find(
-        validUser => validUser.name === this.username
+        validUser => validUser.username === this.username && validUser.password === this.password
+      );
      if (user) {
         const data = JSON.stringify({
           name: user.name,
           time: new Date().getTime(),
         });
         window.localStorage.setItem(STORAGE_KEY, data);
         this.$emit("close", true);
       } else {
         this.$dlg.alert("Please enter valid user info", {
           messageType: "warning",
         });
       }
     },
 };
 </script>