Cách triển khai Đăng nhập bằng một lần chạm vào Google với Ruby on Rails

Xác thực bằng Đăng nhập bằng Google là một thực tế phổ biến trong các ứng dụng hiện đại. Trong bài đăng trên blog này, chúng ta sẽ thảo luận về cách tích hợp Dịch vụ Nhận dạng Google vào bất kỳ ứng dụng front-end nào của bạn sử dụng Ruby on Rails làm máy chủ. Dịch vụ danh tính của Google cung cấp với

1. Nút Đăng nhập / Đăng ký tùy chỉnh

   

Đăng nhập bằng một lần nhấn

Hãy đi sâu vào !!

Bước 1: Tạo ứng dụng trong Bảng điều khiển dành cho nhà phát triển của Google.

Để sử dụng Google Sign In hoặc One Tap, chúng tôi cần client_id để thêm vào máy khách cũng như máy chủ của chúng tôi.

• Để tạo một ứng dụng, hãy truy cập vào Bảng điều khiển dành cho nhà phát triển của Google

• Chọn Tạo thông tin xác thực> ID ứng dụng khách OAuth . Trước khi thực hiện việc này, bạn cần định cấu hình màn hình đồng ý .

• Khi tạo client_id, hãy đảm bảo bao gồm localhost & cổng mà khách hàng của bạn đang chạy trong Nguồn gốc Javascript được ủy quyền để phát triển và URL sản xuất của bạn.

  
  

• Sau khi hoàn tất, bạn sẽ có client_id của mình ở dạng 1234567890-abcdefg.apps.googleusercontent.com

  
  

Để biết thêm chi tiết về việc thiết lập ứng dụng, bạn có thể đọc ở đây .

Bước 2: Thiết lập Thư viện trong Máy khách

Để tải thư viện ứng dụng khách, hãy thêm <script src="https://accounts.google.com/gsi/client" async defer></script> trong index.html của bạn nếu bạn đang sử dụng React.js hoặc _app.jsx nếu sử dụng Next.js.

Bước 3: Hiển thị nút Đăng nhập tùy chỉnh

 useEffect(() => { /* global google */ google.accounts.id.initialize({ client_id: "YOUR_GOOGLE_CLIENT_ID", callback: signInCallback, cancel_on_tap_outside: false, }); google.accounts.id.renderButton(document.getElementById("signInDiv"), { theme: "outline", size: "large", }); }, []);

• google toàn cầu được thêm vào để cho thấy rằng google đã được xác định trên toàn cầu trong index.html của chúng tôi

  
  

• google.accounts.id.initialize phương pháp tạo phiên bản ứng dụng Đăng nhập bằng Google dựa trên các trường nhất định. client_id là trường bắt buộc mà chúng tôi nhận được từ việc tạo ứng dụng google, callback là hàm JavaScript (ở đây là signInCallback ) xử lý mã thông báo ID được trả về từ lời nhắc One Tap hoặc cửa sổ bật lên.

  
  

• Theo mặc định, nếu người dùng nhấp vào bất kỳ vị trí nào trên màn hình, việc giảm tốc theo cấp số nhân sẽ được áp dụng trên lời nhắc Một lần chạm. Trong trường hợp bạn muốn lời nhắc luôn hiển thị, hãy đặt giá trị này thành false . Bạn có thể xem thêm các cấu hình nơi đây.

  
  

• Phương thức google.accounts.id.renderButton hiển thị nút Đăng nhập bằng Google. Bạn có thể thử với các cấu hình nơi đây.

  
  

• document.getElementById("signInDiv") là phần tử HTML. Bằng cách thêm mã bên dưới vào HTML trang web của bạn,

 return ( <div className="App"> <div id="signInDiv" /> </div> );

bạn sẽ có thể thấy một nút tùy chỉnh như thế này

Bước 4: Hiển thị Lời nhắc một lần chạm

• Để hiển thị lời nhắc, hãy thêm phần này vào useEffect google.accounts.id.prompt();

Bước 5: Xác định chức năng gọi lại

• Như đã đề cập trong Bước 3 , signInCallback, là hàm gọi lại của chúng tôi có thể được định nghĩa là

 const signInCallback = (result) => { if (result.credential) { const params = { token: result.credential }; axios .post("http://localhost:3000/user/google", params) .then((res) => { const { authToken, ...userInfo } = res.data.data; // set token in local storage/cookies based on your authentication method // redirect to the authenticated page }) .catch((err) => console.log(err)); } };

ở đâu,

• localhost: 3000 / người dùng / google là URL máy chủ mà chúng tôi sẽ tạo trong bước tiếp theo

  
  

• Kết quả là phản hồi từ Google khi chúng tôi nhấp vào nút Đăng nhập hoặc Một lần chạm.

  
  

• Kết quả bao gồm hai trường

  • thông tin đăng nhập : Trường này là mã thông báo ID dưới dạng chuỗi Mã thông báo web JSON (JWT) được mã hóa base64

  • select_by : hiển thị cách thông tin đăng nhập được chọn. Thêm về nó nơi đây .

    
    

• Chúng tôi lấy thông tin xác thực từ kết quả và chuyển nó làm thông số cho máy chủ của chúng tôi.

Bước 6: Thêm bộ điều khiển & định tuyến vào Máy chủ

Chúng tôi sẽ tạo một tuyến đường trong máy chủ để xử lý yêu cầu từ máy khách. Trước khi làm điều đó, chúng ta cần tạo một bộ điều khiển sẽ chấp nhận JWT từ máy khách.

• Tạo một tệp, app/controllers/users/user_controller.rb , thêm một phương pháp google .

  
  

• thêm người dùng tuyến đường / người dùng # google_oauth , trong config / route.rb .

  
  

• Khi tuyến nhận được JWT, bước đầu tiên và quan trọng nhất là xác minh xem JWT có được xác thực hay không. Với mục đích này, chúng ta có thể sử dụng đá quý google_auth , là đá quý chính thức từ Google để xác minh mã thông báo ID được cấp.

  
  

• Điều này có thể được thực hiện dễ dàng bằng cách sử dụng

 Google::Auth::IDTokens.verify_oidc access_token, aud: "YOUR_GOOGLE_CLIENT_ID"

trong đó access_token là JWT nhận được từ ứng dụng khách & aud là id ứng dụng khách của google.

• Nếu mã thông báo hợp lệ, nó sẽ trả về một hàm băm như thế này hoặc ném một ngoại lệ

 { "iss": "https://accounts.google.com", "nbf": 12345678, "aud": "YOUR_GOOGLE_CLIENT_ID, "sub": "1112223333444", "email": "[email protected]", "email_verified": true, "azp": "YOUR_GOOGLE_CLIENT_ID", "name": "First Last", "picture": "https://lh3.googleusercontent.com/a/AItbvmnvsIQFJw", "given_name": "First", "family_name": "Last", "iat": 1653797115, "exp": 1653805725, "jti": "8ffa19190gngd46745ff558821f953802" }

• Nếu mã thông báo hợp lệ, bạn có thể kiểm tra trong cơ sở dữ liệu của mình xem người dùng có tồn tại hay không và theo đó tạo người dùng. Sau khi hoàn tất, bạn có thể đăng nhập hoặc chuyển hướng người dùng dựa trên phương thức xác thực của bạn.

  
  

 # users/user_controller.rb def google begin data = Google::Auth::IDTokens.verify_oidc access_token, aud: "YOUR_GOOGLE_CLIENT_ID" // find the user in the data // if the user does not exist, create a user using data // sign the user (based on your authentication method) rescue StandardError => e end end

 # config/routes.rb scope :user do post 'google' => 'users#user_controller.rb' end

Tái bút : Đảm bảo đã cài đặt rack-cors trên máy chủ của bạn và thêm ứng dụng này.rb

 config.middleware.insert_before 0, Rack::Cors do allow do origins '*' resource( '*', headers: :any, expose: ['Authorization'], methods: %i[get patch put delete post options show] ) end end

để tránh gặp phải những lỗi như thế này

PPS : Nếu ứng dụng của bạn sử dụng Thư viện nền tảng JavaScript đăng nhập Google cho web, hãy đảm bảo di chuyển nó sang Dịch vụ danh tính của Google vì ứng dụng trước đây sẽ không còn được dùng nữa. Liên kết

Tôi hy vọng bài viết này sẽ giúp bạn tích hợp One Tap Login vào các dự án của mình. Để biết thêm thông tin chi tiết, bạn có thể kiểm tra chính thức tài liệu .

Cũng được xuất bản tại đây