Đăng nhập bằng google nodejs

Đương nhiên rồi, bạn phải có tài khoản ở github rồi sau đó truy cập vào Github OAuth Apps. Và đây là giao diện sau khi các bạn đi qua đó, ở đây tôi đã chụp lại cho các bạn có cái nhìn tổng quan nhất.  

Trong mục này, chỉ có một mục quan trọng nhất đó là URL gọi lại ủy quyền, ở đó các bạn nhập Liên kết mà ở đây của tôi là http. //máy chủ cục bộ. 3000/github/callback - Đây sẽ là URL mà Github sẽ gửi mã ủy quyền sau khi ủy quyền hoàn tất Sau khi bạn đăng ký thành công thì giao diện tiếp theo sẽ là Id ứng dụng khách và bí mật. Tôi cũng đã chụp cho các bạn.  

Và ở đây bạn cần chú ý đến

const clientID = 'xxxxxx';
const clientSecret = 'xxxxxxxxx';

const clientID = 'xxxxxx';
const clientSecret = 'xxxxxxxxx';

Thiết lập dự án Nodejs Đăng nhập

Bước này thì chúng ta triển khai một dự án Đăng nhập Nodejs, nếu các bạn muốn cấu hình một dự án hoàn chỉnh thì trước đây tôi đã đưa ra một "Express và Node. Js build build a project standard" thì các bạn có thể dựa vào đó để setup chuẩn ngay từ đầu. Và đây là code của dự án, mình chỉ giải thích những chỗ quan trọng, còn cơ bản thì thôi nhé. Có gì cứ comment là tôi giải liền. Thật ra nói cho oai vậy thôi, chứ quan trọng nhất là

const clientID = 'xxxxxx';
const clientSecret = 'xxxxxxxxx';

const clientID = 'xxxxxx';
const clientSecret = 'xxxxxxxxx';
const axios = require('axios')

var self = module.exports = {
    callback: async (req, res) => {
        try {
            const {code} = req.query.code;

            // axios({
            //     method: 'post',
            //     url: `https://github.com/login/oauth/access_token?client_id=${clientID}&client_secret=${clientSecret}&code=${code}`,
            //     headers: {
            //         accept: 'application/json'
            //     }
            // }).then((response) => {
            //     access_token = response.data.access_token
            //     res.redirect('/success');
            // })

            //async await 
            const resp = await axios.post(`https://github.com/login/oauth/access_token?client_id=${clientID}&client_secret=${clientSecret}&code=${code}`, {}, {
                headers: {
                    accept: 'application/json'
                }
              });
            console.log(':::', resp.data);
            const {access_token} = resp.data;
            if(access_token){
                const resp = await axios.get(`https://api.github.com/user`, {
                    headers: {
                      'Authorization': `token ${access_token}`
                    }
                });
                return res.render('success',{ userData: resp.data });
            }

            // axios({
            //     method: 'get',
            //     url: `https://api.github.com/user`,
            //     headers: {
            //       Authorization: 'token ' + access_token
            //     }
            //   }).then((response) => {
            //     res.render('pages/success',{ userData: response.data });
            //   })

        } catch (error) {
            console.error(`Error`);
        }
    }
}

Trên kia có nói đến việc lấy clientID và clientSecret. Sau khi lấy về các bạn đã khai báo như sau

const clientID = 'xxxxxx';
const clientSecret = 'xxxxxxxxx';

Điều này có nghĩa là gì

const {code} = req.query.code;

Mã đây chính là hệ thống github sẽ gửi mã này trên liên kết mà chúng tôi nói ở trên chính là URL gọi lại ủy quyền cụ thể là. http. //máy chủ cục bộ. 3000/github/gọi lại. Sau khi chung ta lấy được Code rồi thì bước tiếp theo lấy

const clientID = 'xxxxxx';
const clientSecret = 'xxxxxxxxx';

 const resp = await axios.get(`https://api.github.com/user`, {
      headers: {
        'Authorization': `token ${access_token}`
      }
  });
  return res.render('success',{ userData: resp.data });

At file on my development khai thác hai cách, a is used callback, and two are used async-await. Bạn nào cảm thấy phù hợp thì có thể sử dụng theo cách mình mong muốn. Và chú ý về cách đặt tiêu đề trong axios nhé

Mã nguồn Đăng nhập github với nodejs

Hình ảnh đăng nhập của ví dụ

Hình ảnh sau khi Đăng nhập thành công

There is done, here is 1 in 4 cơ chế đăng nhập mà mỗi thành viên lập trình phải biết hiện nay. Các bạn quan tâm hoặc cần mã tham khảo có thể download tại. Mã nguồn github.  

Cập nhật mọi thông tin được công bố tại Hội nghị thượng đỉnh Firebase và tìm hiểu cách Firebase có thể giúp bạn đẩy nhanh quá trình phát triển ứng dụng và tự tin chạy ứng dụng của mình. Tìm hiểu thêm

• căn cứ hỏa lực
• Tài liệu
• xác thực
• Xây dựng

Bạn có thể sử dụng Xác thực Firebase để cho phép người dùng đăng nhập vào ứng dụng của bạn bằng một hoặc nhiều phương thức đăng nhập, bao gồm đăng nhập bằng địa chỉ email và mật khẩu cũng như các nhà cung cấp danh tính được liên kết như Đăng nhập bằng Google và Đăng nhập bằng Facebook. Hướng dẫn này giúp bạn bắt đầu với Xác thực Firebase bằng cách chỉ cho bạn cách thêm địa chỉ email và đăng nhập mật khẩu vào ứng dụng của bạn

Thêm và khởi chạy SDK xác thực

1. Nếu bạn chưa cài đặt, hãy cài đặt Firebase JS SDK và khởi tạo Firebase

2. Thêm SDK JS xác thực Firebase và khởi chạy Xác thực Firebase

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = getAuth(app);

import firebase from "firebase/app";
import "firebase/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = firebase.auth();

(Tùy chọn) Nguyên mẫu và thử nghiệm với Firebase Local Emulator Suite

Trước khi nói về cách ứng dụng của bạn xác thực người dùng, hãy giới thiệu một bộ công cụ bạn có thể sử dụng để tạo nguyên mẫu và thử nghiệm chức năng Xác thực. Bộ giả lập cục bộ Firebase. Nếu bạn đang quyết định giữa các nhà cung cấp và kỹ thuật xác thực, hãy thử các mô hình dữ liệu khác nhau với dữ liệu công khai và riêng tư bằng cách sử dụng Quy tắc bảo mật xác thực và Firebase hoặc tạo mẫu thiết kế giao diện người dùng đăng nhập, có thể là một ý tưởng tuyệt vời để có thể hoạt động cục bộ mà không cần triển khai các dịch vụ trực tiếp

Trình giả lập Xác thực là một phần của Bộ giả lập cục bộ, cho phép ứng dụng của bạn tương tác với cấu hình và nội dung cơ sở dữ liệu được mô phỏng, cũng như các tài nguyên dự án được mô phỏng của bạn (các chức năng, cơ sở dữ liệu khác và quy tắc bảo mật) theo tùy chọn.

Sử dụng trình giả lập Xác thực chỉ cần một vài bước

1. Thêm một dòng mã vào cấu hình thử nghiệm của ứng dụng để kết nối với trình mô phỏng
2. Từ thư mục gốc của thư mục dự án cục bộ của bạn, chạy

   const clientID = 'xxxxxx';
   const clientSecret = 'xxxxxxxxx';

   6
3. Sử dụng Giao diện người dùng Bộ giả lập cục bộ để tạo mẫu tương tác hoặc API REST của trình giả lập xác thực để thử nghiệm không tương tác

Hướng dẫn chi tiết có sẵn tại Kết nối ứng dụng của bạn với trình giả lập Xác thực. Để biết thêm thông tin, hãy xem phần giới thiệu Bộ giả lập cục bộ

Bây giờ hãy tiếp tục với cách xác thực người dùng

Đăng ký người dùng mới

Tạo biểu mẫu cho phép người dùng mới đăng ký với ứng dụng của bạn bằng địa chỉ email và mật khẩu của họ. Khi người dùng hoàn thành biểu mẫu, hãy xác thực địa chỉ email và mật khẩu do người dùng cung cấp, sau đó chuyển chúng đến phương thức

const clientID = 'xxxxxx';
const clientSecret = 'xxxxxxxxx';

import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });
auth_signup_password.js

firebase.auth().createUserWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in 
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ..
  });
email.js

Đăng nhập người dùng hiện có

Tạo biểu mẫu cho phép người dùng hiện tại đăng nhập bằng địa chỉ email và mật khẩu của họ. Khi người dùng hoàn thành biểu mẫu, hãy gọi phương thức

import firebase from "firebase/app";
import "firebase/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = firebase.auth();

import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
signInWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
  });
auth_signin_password.js

const clientID = 'xxxxxx';
const clientSecret = 'xxxxxxxxx';

Đặt trình quan sát trạng thái xác thực và nhận dữ liệu người dùng

Đối với mỗi trang của ứng dụng cần thông tin về người dùng đã đăng nhập, hãy đính kèm một trình quan sát vào đối tượng xác thực chung. Trình quan sát này được gọi bất cứ khi nào trạng thái đăng nhập của người dùng thay đổi

Đính kèm người quan sát bằng phương pháp

import firebase from "firebase/app";
import "firebase/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = firebase.auth();