+7

Đăng nhập với Google sử dụng VueJS

Đăng nhập/Đăng ký với Google

Sơ đồ sau đây cho thấy flow Đăng nhập với Google, tuy nhiên chúng ta sẽ chia việc này thành hai trường hợp:

  • Kịch bản 1: đó là flow bạn thấy ở dưới, frontend là Vue, Backend là Sails.js, xác thực thực hiện ở một số phần ở cả hai phía.
  • Kịch bản 2: Chúng tôi xử lý OAuth2 hoàn toàn trên Frontend và chỉ cho phép call với Backend khi xác thực thành công.

Cấu hình Google OAuth

Trước khi bắt đầu, chúng ta phải đảm bảo Google được cấu hình đúng cho ứng dụng mới của bạn. Truy cập Google API Console để có được thông tin xác thực OAuth 2.0 như Client IDClient Secret được cả Google và ứng dụng của chúng ta biết đến.

  • Đăng nhập vào Google Developer Console
  • Nhấp vào Select a Project và chọn New Project trong menu đổ xuống.
  • Đặt tên dự án mà bạn muốn, tôi đặt là Google-oauth2, nhấp Create.
  • Khi dự án được tạo (mất vài giây), hãy sử dụng lại bộ chọn dự án và chọn dự án mới tạo của bạn.

  • Bây giờ bạn phải thêm các API có sẵn. Chọn và mở Library trong menu bên trái.
  • Mở và bật Google + APIAPI Google Analytics

  • Mở tab Credentials, nhấp vào Create Credentials và chọn OAuth client ID — Google cũng cung cấp trình hướng dẫn để giúp bạn đưa ra quyết định này nếu bạn muốn sử dụng Google Auth trong một bối cảnh khác.

  • Bảng điều khiển API mở ra, nhấp vào Credentials trên Nav bên trái và chuyển sang tab OAuth Consent Screen - cung cấp tên ứng dụng và logo tùy chọn.

  • Trên màn hình tiếp theo. Ở mục Application type chọn Web application và đặt tên — Tôi sử dụng Google-oauth2

  • Cuối cùng, một cửa sổ bật lên chứa Client IDClient Secret, sao chép các giá trị đó, chúng ta sẽ cần chúng trong code của chúng ta.

Tạo Frontend và Trang Login

Chúng tôi đã tạo trang Đăng nhập và Đăng ký mẫu tại đây [github] (https://github.com/Jebasuthan/Vue-Facebook-Google-oAuth).

Build frontend trong src với npmnpm run serve sẽ cung cấp trang đích tại đường dẫn sau: localhost:8080/login

Đăng nhập với Facebook/Google

Trong frontend, mở main.js và thay đổi như sau:

import GoogleAuth from '@/config/google.js'
const gauthOption = {
  clientId: 'xxxxxxxxxxx.apps.googleusercontent.com',
  scope: 'profile email',
  prompt: 'select_account'
}
Vue.use(GoogleAuth, gauthOption)

Khi bạn đã khởi tạo cài đặt googleauth trong vue main.js, trong components đăng nhập, bạn cần thêm sự kiện nhấp để đăng nhập

<template>
  <div class="signup-buttons">
    <a href="#" class="google-signup" @click.prevent="loginWithGoogle">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" aria-hidden="true"><title>Google</title><g fill="none" fill-rule="evenodd"><path fill="#4285F4" d="M17.64 9.2045c0-.6381-.0573-1.2518-.1636-1.8409H9v3.4814h4.8436c-.2086 1.125-.8427 2.0782-1.7959 2.7164v2.2581h2.9087c1.7018-1.5668 2.6836-3.874 2.6836-6.615z"></path><path fill="#34A853" d="M9 18c2.43 0 4.4673-.806 5.9564-2.1805l-2.9087-2.2581c-.8059.54-1.8368.859-3.0477.859-2.344 0-4.3282-1.5831-5.036-3.7104H.9574v2.3318C2.4382 15.9832 5.4818 18 9 18z"></path><path fill="#FBBC05" d="M3.964 10.71c-.18-.54-.2822-1.1168-.2822-1.71s.1023-1.17.2823-1.71V4.9582H.9573A8.9965 8.9965 0 0 0 0 9c0 1.4523.3477 2.8268.9573 4.0418L3.964 10.71z"></path><path fill="#EA4335" d="M9 3.5795c1.3214 0 2.5077.4541 3.4405 1.346l2.5813-2.5814C13.4632.8918 11.426 0 9 0 5.4818 0 2.4382 2.0168.9573 4.9582L3.964 7.29C4.6718 5.1627 6.6559 3.5795 9 3.5795z"></path></g></svg>
      Google
    </a>
  </div>
</template>

<script>
import router from '@/router/router'
export default {
  name: 'login_signup_social',
  methods: {
    loginWithGoogle () {
      this.$gAuth
        .signIn()
        .then(GoogleUser => {
          // on success do something
          console.log('GoogleUser', GoogleUser)
          var userInfo = {
            loginType: 'google',
            google: GoogleUser
          }
          this.$store.commit('setLoginUser', userInfo)
          router.push('/home')
        })
        .catch(error => {
          console.log('error', error)
        })
    }
  }
}
</script>

<style>

</style>

Khi chạy giao diện người dùng, sử dụng lệnh npm run serve sau khi nhấp vào nút Đăng nhập/Đăng ký sử dụng Google, bạn sẽ nhận được accessToken.

Bây giờ bạn đã có accessToken từ Google. Bạn phải pass qua accessToken để backend api có đủ thông tin về người dùng đăng nhập Google’s sử dụng OAuth2Client.

Trong backend SailsJS, mở google-login.js và thay đổi:

const {OAuth2Client} = require('google-auth-library');
const client = new OAuth2Client('xxxxxxxxxxxxx.apps.googleusercontent.com');
const ticket = await client.verifyIdToken({
  idToken: inputs.accessToken,
  audience: 'xxxxx.apps.googleusercontent.com'
});
const payload= ticket.getPayload();
console.log('Google payload is '+JSON.stringify(payload));
const userid = payload['sub'];
let email = payload['email'];
let emailVerified = payload['email_verified'];
let name = payload["name"];
let pictureUrl = payload["picture"];

Khi bạn đã thực hiện xong, hãy restart và load lại trang login: http://localhost:8080/login

Khi click vào nút Google, Google Auth được thực hiện trên một cửa sổ bật lên riêng biệt cho phép nhập thông tin đăng nhập Google để xác thực ứng dụng:

Sau khi bạn đã cung cấp thông tin đăng nhập Google của mình, frontend hiện chạy logic xác thực sau:

  • Kịch bản 1: VueJS login component nhận authorization code từ google và gọi Sails backend trong http://localhost:8080/login. Ở đó authorization code được dùng để truy xuất access_token, refresh_token, id_tokenscope. Người dùng được đưa lại giao diện sử dụng Vuex để cuối cùng người dùng đăng nhập vào trang đích.
  • Kịch bản 2: Các bước từ Kịch bản 1 chỉ được thực hiện trên giao diện mà không call gì đến backend. Bạn có thể checkout từ github souce code

Nguồn: https://medium.com/@itjebasuthan_90100/signup-with-google-using-vuejs-11c9d4428250


All rights reserved

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí