Cloudrail

Phần này trình bày trường hợp sử dụng của việc triển khai đăng nhập xã hội cho một ứng dụng (web). Chương này chỉ cung cấp tổng quan về Đăng nhập xã hội và trong các chương tiếp theo, chúng tôi sẽ hướng dẫn cách thiết lập nó cho Facebook và Twitter nhưng rất dễ dàng để thêm các dịch vụ khác như Google Plus, LinkedIn, GitHub, Instagram, Slack, Windows Live và Yahoo. Chúng tôi sẽ sử dụng Node.js với Express ở phía máy chủ.

Tại sao đăng nhập xã hội?

Một trong những lý do phổ biến nhất khiến các nhà phát triển phần mềm và kiến ​​trúc sư thêm phần phụ trợ vào (các) giao diện người dùng của họ là nhu cầu quản lý người dùng. Để quản lý người dùng hoạt động, chức năng đăng ký và đăng nhập là chìa khóa. Trước đây, hầu hết các ứng dụng đều có hệ thống xác thực riêng và do đó mọi người dùng cần chủ động tạo tài khoản bằng cách cung cấp địa chỉ email, mật khẩu và các thông tin khác.

Điều này không chỉ gây khó chịu cho người dùng mà còn gây mất an toàn. Nhiều người dùng sẽ sử dụng cùng một mật khẩu ở khắp mọi nơi, được gọi là mật khẩu mệt mỏi , và với mọi bên có mật khẩu được lưu trữ, xác suất nó bị đánh cắp sẽ tăng lên. Cuối cùng, ngày càng nhiều dịch vụ cung cấp “đăng nhập xã hội” (“Đăng nhập bằng Facebook”, “Đăng nhập bằng GitHub”, v.v.) để cải thiện trải nghiệm người dùng bằng cách cho phép người dùng đăng ký / đăng nhập bằng tài khoản đã có của họ trên một nền tảng phổ biến.

Cloudrail – Thiết lập

Đăng ký ứng dụng CloudRail

Sử dụng liên kết này để tạo ứng dụng mới (bạn có thể phải đăng nhập trước) – https://developers.cloudrail.com Bạn có thể tìm thấy khóa cấp phép CloudRail của mình trong phần tóm tắt ứng dụng.

Đăng ký ứng dụng Facebook

Sử dụng liên kết này để tạo ứng dụng mới (bạn có thể phải đăng nhập trước) – https://developers.facebook.com/apps/ . Sau đó nhấp vào nút ‘Thêm ứng dụng mới’, chọn ‘Thiết lập cơ bản’ và tạo ứng dụng mới. Trong phần trang tổng quan, bạn tìm thấy Khóa ứng dụng (Client ID) và Bí mật ứng dụng (Client Secret).

Đi tới ‘Thêm sản phẩm’ và chọn ‘Đăng nhập Facebook’. Đặt URI chuyển hướng thành ‘http: // localhost: 12345 / auth / redirect / facebook’ .

Đăng ký ứng dụng Twitter

Sử dụng liên kết này để tạo ứng dụng mới (bạn có thể phải đăng nhập trước) – https://apps.twitter.com/ Nhấp vào nút ‘Tạo ứng dụng mới’ và điền vào các chi tiết được yêu cầu. Nhấp vào ‘Chìa khóa và Mã thông báo truy cập’ và bạn sẽ tìm thấy Khóa ứng dụng (ID ứng dụng khách) và Bí mật ứng dụng (Bí mật ứng dụng). Đặt URI chuyển hướng thành ‘http: // localhost: 12345 / auth / redirect / twitter’ .

Khởi tạo một dự án Node.js mới

Đảm bảo rằng bạn đã cài đặt Node.js, tạo một thư mục mới, khởi tạo package.json và cài đặt Express và CloudRail bằng cách đưa ra các lệnh sau trong bảng điều khiển (hoặc các lệnh tương đương trên hệ điều hành không phải Unix)

mkdir myProject
cd myProject
npm init
npm i --save express cloudrail-si

Cloudrail – Mã hóa

Tạo tệp mới cho mã máy chủ của bạn trong thư mục đã tạo và thêm tệp sau để nhập và thiết lập Express và CloudRail –

javascript
const express = require("express");
const cloudrail = require("cloudrail-si");
const app = express();
cloudrail.Settings.setKey("[CloudRail license key]");

Bây giờ, chúng tôi tiếp tục bằng cách viết một hàm sẽ khởi tạo các dịch vụ mà chúng tôi muốn sử dụng để đăng nhập mạng xã hội –

javascript
function makeService(name, redirectReceiver) {
   let service;
   switch (name) {
      case "twitter":
         service = new cloudrail.services.Twitter(
            redirectReceiver,
            "[Twitter Client ID]",
            "[Twitter Client Secret]",
            "http://localhost:12345/auth/redirect/twitter"
         );
         break;
      case "facebook":
         service = new cloudrail.services.Facebook(
            redirectReceiver,
            "[Facebook Client ID]",
            "[Facebook Client Secret]",
            "http://localhost:12345/auth/redirect/facebook",
            "state"
         );
         break;
      // More services from the Profile interface can be added here, 
      //the services above are just examples
      default: throw new Error("Unrecognized service");
   }
   return service;
}

Chúng tôi cần một cách để theo dõi danh tính người dùng. Điều này thường được thực hiện trong cơ sở dữ liệu nhưng để giữ cho hướng dẫn này ngắn gọn, chúng tôi sẽ sử dụng một đối tượng hoạt động như một cơ sở dữ liệu giả .

Tất cả dữ liệu của nó được lưu trong bộ nhớ và do đó sẽ bị mất khi máy chủ khởi động lại –

javascript
const users = {
   records: {}
};
users.find = (id) ⇒ {
   return users.records[id];
};
users.save = (id, data) ⇒ {
   users.records[id] = data;
};

Sau đó, chúng tôi đăng ký điểm cuối máy chủ sẽ xử lý việc bắt đầu luồng đăng nhập xã hội –

javascript
app.get("/auth/start/:serviceName", (req, res) ⇒ {
   let serviceName = req.params["serviceName"];
   
   let redirectReceiver = (url, state, callback) ⇒ {
      res.redirect(url);
   };
   let service = makeService(serviceName, redirectReceiver);
   service.login();
});

Dịch vụ mà chúng tôi đã bắt đầu đăng nhập mạng xã hội sẽ chuyển hướng đến máy chủ của chúng tôi và chúng tôi cần xử lý chuyển hướng này. Sau khi nhận được số nhận dạng duy nhất cho người dùng, chúng tôi kiểm tra xem chúng tôi đã từng gặp người dùng này chưa. Nếu có, thì chúng tôi chào anh ta bằng tên của anh ta. Nếu không, chúng tôi lấy tên từ mạng xã hội và lưu một người dùng mới

javascript
app.get("/auth/redirect/:serviceName", (req, res) ⇒ {
   let serviceName = req.params["serviceName"];
   
   let redirectReceiver = (url, state, callback) ⇒ {
      callback(undefined, "http://bla.com" + req.url); 
      // The callback expects a complete URL but only the query matters
   };
	let service = makeService(serviceName, redirectReceiver);
   service.getIdentifier((err, identifier) ⇒ {
      if (err) res.status(500).send(err);
      let user = users.find(identifier);
      
      if (user) {
         res.send("Welcome back " + user.name);
      } else {
         service.getFullName((err, name) ⇒ {
            if (err) res.status(500).send(err);
            users.save(identifier, {
               name: name
            });
            res.send("Welcome greenhorn!");
         });
      }
   });
});

Cuối cùng, chúng tôi có máy chủ lắng nghe trên cổng 12345

javascript app.listen(12345);

Bây giờ chúng tôi có thể khởi động ứng dụng và kiểm tra nó trong trình duyệt cục bộ của chúng tôi.

Nếu bạn điều hướng đến http: // localhost: 12345 / auth / start / facebook, bạn sẽ bắt đầu quy trình đăng nhập Facebook.

Nếu bạn điều hướng đến http: // localhost: 12345 / auth / start / twitter, bạn sẽ bắt đầu quy trình đăng nhập Twitter.

Sau khi đăng nhập với dịch vụ và cấp quyền truy cập, bạn sẽ thấy thông báo “Chào mừng greenhorn!” nếu bạn làm điều đó lần đầu tiên và “Chào mừng bạn trở lại [tên của bạn]” trong những lần truy cập liên tiếp.

Ví dụ: để tích hợp nó vào một trang web thực tế, bạn sẽ bao gồm các biểu trưng của nhà cung cấp dịch vụ và làm cho các biểu trưng liên kết đến các URL tương ứng.

Bên cạnh đó, cơ sở dữ liệu giả nên được thay thế bằng cơ sở dữ liệu thực. Và bạn thực hiện, đăng nhập mạng xã hội cho tối đa 9 nhà cung cấp khác nhau!

Trả lời