Nuxt.js Fundamental ตอนที่ 8 - การทำระบบ Authentication

เนื้อหาของบทเรียน Nuxt.js

• ตอนที่ 1 - Getting Started with Nuxt.js
• ตอนที่ 2 - สร้าง Nuxt.js ด้วย create-nuxt-app
• ตอนที่ 3 - การกำหนด Routing
• ตอนที่ 4 - Nuxt.js Concept
• ตอนที่ 5 - Nuxt Content และ Async Data
• ตอนที่ 6 - การดึงข้อมูลจาก APIs
• ตอนที่ 7 - การใช้งานร่วมกับ Vuex Store
• ตอนที่ 8 - ทำระบบ Authentication ด้วย Nuxt.js
• ตอนที่ 9 - การ Deploy Nuxt.js
• ตอนที่ 10 - การทำ Internal API และ Middleware
• ตอนที่ 11 - ทำ SEO และ Meta tags
• ตอนที่ 12 - Workshop

เชื่อว่าในเกือบทุกๆ Web Application ย่อมมีการทำระบบ Authentication แน่นอน มีระบบ Login ระบบสมัครสมาชิก และระบบเหล่านี้ ก็เป็นระบบเริ่มต้น ที่น่าศึกษา เพราะเป็นพื้นฐานของเว็บไซต์เกือบทั้งหมดต้องมี

รวมถึงคำถามยอดฮิต ว่าเราจะทำระบบ Login ระบบสมาชิก ด้วยภาษา X กับ Database Y ยังไง?

สำหรับตอนนี้จะเป็นการทำ Authentication บน Nuxt.js นะครับ ตัว Concept คล้ายๆ กับทุกๆ Framework ทุกๆ ภาษา เช่น ทำ Authen ด้วย Vue.js หรือ React.js ใช้ APIs หรือ Firebase เป็น API ตัว concept ก็ไม่ต่างกันมากครับ

เอาละ มาเริ่มเลยดีกว่า

รู้จักกับ Nuxt Auth Module

เราจะใช้ @nuxt/auth ในการทำ Authentication นะครับ ข้อดีคือมี built-in หลายๆ อย่างให้เราใช้ (มองคล้ายๆ passport.js ของ Node.js ครับ) เช่น

• การกำหนด middleware
• มี strategy ให้เลือก เช่น local หรือ oAuth หรือ Providers อื่นๆ
• มี built-in function ให้ใช้ เช่น loginWith, logout, setToken, setuser เป็นต้น

ข้อควรรู้ในการใช้ @nuxtjs/auth

• ต้อง activate Vuex Store ก่อนนะครับ

เริ่มติดตั้ง Nuxt Auth กันเลย (แนะนำใช้ร่วมกับ Nuxt Axios)

npm install @nuxtjs/auth @nuxtjs/axios

ต่อมาที่ไฟล์ nuxt.config.js เพิ่ม modules ลงไป

1
modules: [
2
  '@nuxtjs/axios',
3
  '@nuxtjs/auth'
4
],
5

6
auth: {
7
  // Options
8
}

วิธีการใช้งาน Nuxt Auth

มาดู Concept คร่าวๆ กันก่อนนะครับ โดย Nuxt Auth เราจะใช้ผ่าน middleware หรือ global ด้วย nuxt.config.js ก็ได้

1. Config ค่าต่างๆ ผ่าน nuxt.config.js
2. ใช้ state ใน Nuxt Auth เพื่อเช็ค loggedIn ว่า login หรือยัง ถ้ายัง ก็ถูก redirect ไป /login เป็นต้น
3. ใช้ Nuxt Auth Strategy แบบ local เพื่อ authenticate ด้วยการใช้ Email และ Password
4. สามารถ handle หรือกำหนดว่า Page ไหนเข้าได้ เข้าไม่ได้ ผ่าน middleware

ตัวอย่าง การ config ไฟล์ nuxt.config.js

1
// optional
2
axios: {
3
  baseURL: 'http://127.0.0.1:8888/api',
4
  credentials: true
5
},
6

7
auth: {
8
  strategies: {
9
    local: {
10
      endpoints: {
11
        login: { url: 'login', method: 'post', propertyName: 'data.token' },
12
        user: { url: 'me', method: 'get', propertyName: 'data' },
13
        logout: false
14
      }
15
    }
16
  },
17
  redirect: {
18
    login: '/login'
19
  }
20
}

• กำหนด strategy เป็นแบบ local และ endpoints url ของ login คือ ${BASE_API}/login ซึ่ง BASE_API เรากำหนดผ่าน environment variable หรือกำหนดด้วย axios ก็ได้
• เราสามารถกำหนด redirect ได้เช่น กัน เช่น ถ้า $auth.isLoggedIn เป็น false ก็ redirect ไปหน้า login ที่เรากำหนด
• ตัว credentials: true ใน axios คือกำหนดให้ทุกๆ request จะส่ง Authorization header ไปด้วย

ทีนี้เวลาเราจะเข้าถึง Nuxt Auth ก็แค่ใช้

1
this.$auth

เช่น เข้าถึง user หรือ isLoggedIn

1
this.$auth.user
2
// มีค่าเท่ากับเข้าถึงผ่าน Vuex
3
this.$store.state.auth.user
4

5
this.$auth.isLoggedIn
6
// เท่ากับ
7
this.$store.state.auth.isLoggedIn

หรืออยากเรียก authenticate เพื่อ login ก็แค่ใช้

1
const payload = {
2
  data: {
3
    username: '',
4
    password: ''
5
  }
6
}
7

8
this.$auth.loginWith('local', payload)

หรือ setUserToken

1
this.$auth.setUserToken(token)

middleware

ตัว Middleware เป็นตัวกำหนด ว่าแต่ละหน้า จะเข้าถึงได้ก็ต่อเมื่อ authenticated ผ่านแล้วหรือเปล่า หรือเราจะกำหนดเป็นแบบ global ก็ได้

1
router: {
2
  middleware: ['auth']
3
}

แบบนี้ ทุกๆ หน้าจะต้องผ่าน auth middleware ก่อน ถ้าไม่มี this.$auth.isLoggedIn ก็ไม่สามารถเข้าหน้านี้ได้

แต่เราก็สามารถกำหนดแต่ละหน้าได้ เช่น หน้า /login หรือ /register ก็ไม่จำเป็นต้องมี auth middlware จริงมั้ย การกำหนดแต่ละหน้า ก็ทำแบบนี้เลย

1
<template> </template>
2

3
<script>
4
  export default {
5
    middleware: 'auth'
6
  }
7
</script>

เริ่มลงมือทำ Authentication

เพื่อนๆ อาจจะงงๆ ตัวทฤษฎี หรือหลักการข้างบน มาลองลงมือทำดูดีกว่า จะได้เห็นภาพจริงๆ เอาแบบง่ายๆ ละกันเนาะ เราจะมีแค่

• /login - หน้าสำหรับกรอก email, password
• / - หน้าหลักเข้าได้ทุกคน
• /private - หน้านี้เข้าได้ เฉพาะผ่าน authenticated แล้วเท่านั้น ถ้า request แบบไม่มี authen ก็ redirect ไปหน้า login ทันที

ทีนี้ส่วน API ก็จะมีง่ายๆ แบบนี้

• POST /api/login - ส่ง email และ password เป็น payload มาเพื่อ login (ได้ user และ token กลับไป)
• GET /me - request เพื่อ ดึงข้อมูล currentUser โดยส่ง token แนบมากับ headers ด้วย

เมื่อเราได้ concept คร่าวๆ แล้ว ก็มาเริ่มเลย

ไฟล์ server.js ด้านล่าง ก็อปไป แล้ว start server ด้วยคำสั่ง node server.js ได้เลยครับ

1
const express = require('express')
2
const cors = require('cors')
3

4
const app = express()
5
const router = express.Router()
6

7
app.use(cors())
8
app.use(express.json())
9

10
const user = {
11
  id: 1,
12
  username: 'john',
13
  email: 'john@doe.com',
14
  name: 'John Doe'
15
}
16

17
router.get('/me', (req, res) => {
18
  return res.json({
19
    data: {
20
      user
21
    }
22
  })
23
})
24

25
router.post('/login', (req, res) => {
26
  const { email, password } = req.body
27

28
  // query db.
29

30
  if (email === 'admin@admin.com' && password === '123456') {
31
    return res.json({
32
      data: {
33
        user,
34
        token: 'THIS_IS_TOKEN'
35
      }
36
    })
37
  } else {
38
    return res.status(401).json({
39
      message: 'Invalid Password'
40
    })
41
  }
42
})
43

44
app.use('/api', router)
45

46
app.listen(12345, () => {
47
  console.log('Mock API start on port 12345')
48
})

และ install

npm install express cors --save-dev

Note : ตัว Server เป็นแค่ Example เฉยๆนะครับ ไม่มี logic หรือ validate ใดๆ แค่รับ request และ response กลับไปเท่านั้น

สามารถใช้ Project เดิม หรือขึ้นใหม่ด้วย create-nuxt-app ก็ได้ครับ

สร้างไฟล์ pages/login.vue

1
<template>
2
  <form @submit="login">
3
    <input type="email" name="email" v-model="email" />
4
    <input type="password" name="password" v-model="password" />
5

6
    <button type="submit">Login</button>
7
  </form>
8
</template>
9

10
<script>
11
  export default {
12
    data() {
13
      return {
14
        email: '',
15
        password: ''
16
      }
17
    },
18
    methods: {
19
      async login(e) {
20
        e.preventDefault()
21

22
        const payload = {
23
          email: this.email,
24
          password: this.password
25
        }
26

27
        try {
28
          await this.$auth.loginWith('local', {
29
            data: payload
30
          })
31
          this.$router.push('/')
32
        } catch (e) {
33
          this.$router.push('/login')
34
        }
35
      }
36
    }
37
  }
38
</script>

ต่อมากำหนด nuxt.config.js ให้ตรง และกำหนด baseURL เป็น port 12345 (ที่เรารัน server บน localhost)

1
axios: {
2
  baseURL: 'http://localhost:12345/api'
3
},
4

5
auth: {
6
  strategies: {
7
    local: {
8
      endpoints: {
9
        login: { url: 'login', method: 'post', propertyName: 'data.token' },
10
        user: { url: 'me', method: 'get', propertyName: 'data.user' },
11
        logout: false
12
      }
13
    }
14
  },
15
  redirect: {
16
    login: '/login'
17
  }
18
}

ลองเปิดหน้าเว็บ http://localhost:3000/login และลอง login เข้าสู่ระบบ ดูครับ

อย่าลืม activate Vuex store ด้วยนะครับ หากนึกไรไม่ออก ก็สร้างไฟล์ store/index.js ข้างในมีแค่นี้ได้

1
export const state = () => ({
2
  myState: 'Hello'
3
})

ต่อมาสร้างไฟล์ pages/private.vue ขึ้นมา กำหนด middleware: 'auth' ให้มันซะ เข้าถึงได้เฉพาะ login user.

1
<template>
2
  <div>
3
    <h1>THiS IS PRIVATE</h1>
4

5
    <nuxt-link to="/">Go to Home</nuxt-link>
6
  </div>
7
</template>
8

9
<script>
10
  export default {
11
    middleware: 'auth'
12
  }
13
</script>

หน้า Index ลองเพิ่ม logic นิดนึง ถ้า login เรียบร้อย ให้แสดง Hello และมีปุ่ม Logout แต่ถ้าไม่ได้ login ก็มีปุ่ม Login ให้กดไปหน้า Login นั่นเอง

1
<template>
2
  <div class="container">
3
    <div>
4
      <Logo />
5
      <h1 class="title">nuxt auth example</h1>
6
      <div class="links">
7
        <a
8
          href="https://nuxtjs.org/"
9
          target="_blank"
10
          rel="noopener noreferrer"
11
          class="button--green"
12
        >
13
          Documentation
14
        </a>
15
        <a
16
          href="https://github.com/nuxt/nuxt.js"
17
          target="_blank"
18
          rel="noopener noreferrer"
19
          class="button--grey"
20
        >
21
          GitHub
22
        </a>
23
      </div>
24

25
      <hr class="divider" />
26

27
      <div v-if="loggedIn">
28
        <h1>Hello, {{ user.email }}</h1>
29
        <button @click="logout" class="button--grey">Logout</button>
30
      </div>
31

32
      <div v-else>
33
        <nuxt-link to="/login" class="button--grey">Login</nuxt-link>
34
      </div>
35
    </div>
36
  </div>
37
</template>
38

39
<script>
40
  export default {
41
    data() {
42
      return {
43
        user: this.$auth.user,
44
        loggedIn: this.$auth.loggedIn
45
      }
46
    },
47
    methods: {
48
      async logout() {
49
        await this.$auth.logout()
50
        this.$router.push('/login')
51
      }
52
    }
53
  }
54
</script>
55

56
<style>
57
  .divider {
58
    margin: 2em 0;
59
  }
60

61
  .container {
62
    margin: 0 auto;
63
    min-height: 100vh;
64
    display: flex;
65
    justify-content: center;
66
    align-items: center;
67
    text-align: center;
68
  }
69

70
  .title {
71
    font-family:
72
      'Quicksand',
73
      'Source Sans Pro',
74
      -apple-system,
75
      BlinkMacSystemFont,
76
      'Segoe UI',
77
      Roboto,
78
      'Helvetica Neue',
79
      Arial,
80
      sans-serif;
81
    display: block;
82
    font-weight: 300;
83
    font-size: 100px;
84
    color: #35495e;
85
    letter-spacing: 1px;
86
  }
87

88
  .subtitle {
89
    font-weight: 300;
90
    font-size: 42px;
91
    color: #526488;
92
    word-spacing: 5px;
93
    padding-bottom: 15px;
94
  }
95

96
  .links {
97
    padding-top: 15px;
98
  }
99
</style>

ทดลองเล่นใหม่ เข้าเว็บ http://localhost:3000 และลองดู flow การทำงานดูครับ

เราก็จะได้ concept คร่าวๆ ของการทำ Authentication ฝั่ง Nuxt.js กันนะครับ

Hints & Questions?

• เพื่อนๆ ลองนำไปประยุกต์ใช้งานกันดูนะครับ อาจจะเห็นว่า Tutorial รวบรัดหรือไม่ครบ แต่จริงๆ อยากให้เพื่อนๆ ได้ลองเล่น ลองทำด้วยตัวเองดู ติดปัญหาตรงไหน ก็ค่อยๆ งม ค่อยๆทำนะครับ
• ลองทำ Server API เอง หรือ หา API อื่นๆ เช่น Firebase Auth หรือ Auth0 มาใช้แทน Server API ดูครับ
• อยากเก็บ token แบบมี accessToken, refreshToken ทำยังไงนะ?
• ลองใช้ strategy อื่นๆ ดูเช่น Facebook หรือ Github
• ถ้า Server API เราเป็นแบบ session เราจะกำหนดยังไง disable token ได้มั้ย?
• ลองสังเกต localStorage ว่า token เก็บไว้ชื่อว่าอะไร เปลี่ยนชื่อ หรือเปลี่ยน prefix ยังไงนะ?
• ในตัวอย่าง ตอน GET /me ไม่ได้ส่ง Authorization header ไปด้วย ถ้าจะส่งไปด้วย ต้องไปกำหนด nuxt.config.js ยังไง?

อ่านบทถัดไป 👉 ตอนที่ 9 - การ Deploy Nuxt.js