Go to Qiita Advent Calendar 2024 Top
LoginSignup
6
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@mitsuoka0423(Takahiro Mitsuoka)

Auth0を使ってプライベートなマークダウンエディタを作る（クライアントサイド編）

Last updated at Posted at 2019-12-12

認証ってめんどくさい

私は仕事で AWS を使用することが多いのですが、AWS の認証認可サービスといえばCognitoです。
一度、調査で Google とのフェデレーションを試してみたのですが、なかなか手順が複雑で大変でした。

最近 Auth0 というサービスを知り、Google アカウントでのログインを爆速で実装できることを知りました。
今回はブラウザ上で動作するマークダウンエディタで、アカウントごとに内容を記録できるものを作成していきます。

本記事では、クライアントサイドの実装を行っていきます。
所要時間30分～40分ほどでできる内容ですので試してみてください。

マークダウンエディタの要件

  • ブラウザで使用する
  • PC、iPhone 両方で使用できる
  • ログインしておくとテキストを記録でき、次回ログイン時には記録した内容が表示される

システム構成

全体像はこんな感じ。
all.png

最近はサーバーレスならぬLambdalessという考え方があるらしいので、Lambda はできるだけ使わない方針とします。
(参考：https://www.slideshare.net/mooyoul/lambdaless-and-aws-cdk-191793017）。
認証情報の検証は仕方ないので Lambda を使います。

この記事では、左側のクライアントサイドを作成していきます。
part.png

Auth0サインアップ ～ サンプルソースダウンロード ～ サンプルアプリ起動 (所要時間：15分)

公式サイト(https://auth0.com/jp/)を開き、右上にあるサインアップボタンからアカウントを作成します。
image.png

私は GitHub アカウントを使用したので、SIGN UP WITH GITHUBからサインアップしました。
image.png

ログインするとダッシュボードが開きます。
CREATE APPLICATIONからアプリを作成していきます。
image.png

今回は Vue.js を使用した SPA として作成するので、以下の内容でアプリを作成しました。

項目 内容
Name My App
Choose an application type Single Page Web Applications

image.png

アプリを作成すると、以下のような画面になるので、Vue.jsをクリックします。
image.png

右下にあるDOWNLOAD SAMPLEをクリックし、サンプルアプリをダウンロードします。

image.png

zip を解凍して中身を確認するとこのような感じ。
image.png

サンプルアプリを起動してみます。

$ npm install
$ npm run serve

を実行します。

  ～～～ 略 ～～～
  App running at:
  - Local:   http://localhost:3000/ 
  - Network: http://192.168.10.2:3000/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

と表示されたら、http://localhost:3000/にアクセスします。
image.png

こんな画面が表示されたら OK。
ここまで順調にいけば初見でも 15 分もあればいけちゃいます。

Googleでログインする (所要時間：1分)

先ほど起動したサンプルアプリで、Google アカウントでログインしてみましょう。
右上のLoginボタンをクリック。
image.png

すると、Auth0 のログイン画面が表示されます。
LOG IN WITH GOOGLEをクリックします。
image.png

お、Google のログイン画面が現れました！
メールアドレスとパスワードを入力し、ログインします。
image.png

ログインできました！
image.png

アイコンをクリックすると、Gmail で登録している名前も表示されます。
image.png

マークダウンエディタの作成 (慣れた人なら15分)

https://jp.vuejs.org/v2/examples/index.htmlにいい感じのサンプルソースがあるので流用します。

使用する npm モジュールをインストールします。

$ npm install lodash marked

以下の資源を追加します。

src/views/Editor.vue
<template>
  <div id="editor">
    <textarea :value="input" @input="update"></textarea>
    <div v-html="compiledMarkdown"></div>
  </div>
</template>

<script>
import _ from 'lodash';
import marked from 'marked';

export default {
  name: 'editor',
  data() {
    return {
      input: '# hello',
    }
  },
  computed: {
    compiledMarkdown: function () {
      return marked(this.input, { sanitize: true })
    }
  },
  methods: {
    update: _.debounce(function (e) {
      this.input = e.target.value
    }, 300)
  },
}
</script>

<style scoped>
html, body, #editor {
  margin: 0;
  height: 100%;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #333;
}

textarea, #editor div {
  display: inline-block;
  width: 49%;
  height: 100%;
  vertical-align: top;
  box-sizing: border-box;
  padding: 0 20px;
}

textarea {
  border: none;
  border-right: 1px solid #ccc;
  resize: none;
  outline: none;
  background-color: #f6f6f6;
  font-size: 14px;
  font-family: 'Monaco', courier, monospace;
  padding: 20px;
}

code {
  color: #f66;
}
</style>
src/router.js
import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
import Profile from "./views/Profile.vue";
import Editor from "./views/Editor.vue"; // <-- この行を追加
import { authGuard } from "./auth";

Vue.use(Router);

const router = new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      name: "home",
      component: Home
    },
    {
      path: "/profile",
      name: "profile",
      component: Profile,
      beforeEnter: authGuard
    },
    {                                     // <-- ここから
      path: "/editor",
      name: "editor",
      component: Editor,
      beforeEnter: authGuard
    }                                     // <-- ここまで追加
  ]
});

export default router;
src/main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import { Auth0Plugin } from "./auth";
import HighlightJs from "./directives/highlight";

import { library } from "@fortawesome/fontawesome-svg-core";
import { faLink, faUser, faPowerOff } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { domain, clientId } from "../auth_config.json";

Vue.config.productionTip = false;

Vue.use(Auth0Plugin, {
  domain,
  clientId,
  onRedirectCallback: () => {
    // router.push(
    //   appState && appState.targetUrl
    //     ? appState.targetUrl
    //     : window.location.pathname
    // );
    router.push('editor'); // <-- このように修正（ログイン後、/editorに移動する）
  }
});

Vue.directive("highlightjs", HighlightJs);

library.add(faLink, faUser, faPowerOff);
Vue.component("font-awesome-icon", FontAwesomeIcon);

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

資源の追加・修正が終わると、VSCode を使っている方はこんな感じになるはずです。
image.png

http://localhost:3000/にアクセスしログインすると以下のような画面になり、右側にプレビューが表示されます。
（Qiita のエディタみたいですね）

2019-12-12_23h28_25.gif

Auth0を使うと、クライアントサイドは30分で実装できる

Auth0 がサンプルソースを提供してくれるおかげで、30 分くらいでクライアントサイドの認証の実装を行うことができました。
慣れてくると、単純な導通であれば 10 分そこそこでできるんじゃないでしょうか。
（Cognito を初見で使ったときは 1 日かかりました）。

次回はサーバーサイドの実装を行っていきます。

6
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
6
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?