Xác thực bằng 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 làm máy chủ. Dịch vụ danh tính của Google cung cấp với Đăng nhập bằng Google Ruby on Rails 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 để thêm vào cũng như của chúng tôi. client_id máy khách máy chủ Để 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 . Trước khi thực hiện việc này, bạn cần định cấu hình . Tạo thông tin xác thực> ID ứng dụng khách OAuth màn hình đồng ý Khi tạo client_id, hãy đảm bảo bao gồm & 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. localhost Sau khi hoàn tất, bạn sẽ có của mình ở dạng client_id 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 trong của bạn nếu bạn đang sử dụng hoặc nếu sử dụng <script src="https://accounts.google.com/gsi/client" async defer></script> index.html React.js _app.jsx 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", }); }, []); được thêm vào để cho thấy rằng google đã được xác định trên toàn cầu trong của chúng tôi google toàn cầu index.html 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. là trường bắt buộc mà chúng tôi nhận được từ việc tạo ứng dụng google, là hàm JavaScript (ở đây ) 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. google.accounts.id.initialize client_id callback là signInCallback 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 . Bạn có thể xem thêm các cấu hình false nơi đây. Phương thức hiển thị nút Đăng nhập bằng Google. Bạn có thể thử với các cấu hình google.accounts.id.renderButton nơi đây. 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, document.getElementById("signInDiv") 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 , signInCallback, là hàm gọi lại của chúng tôi có thể được định nghĩa là Bước 3 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, là URL máy chủ mà chúng tôi sẽ tạo trong bước tiếp theo localhost: 3000 / người dùng / google 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 Kết quả : 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 thông tin đăng nhập : hiển thị cách thông tin đăng nhập được chọn. Thêm về nó . select_by 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, , thêm một phương pháp . app/controllers/users/user_controller.rb google thêm , trong . người dùng tuyến đường / người dùng # google_oauth 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ý , là đá quý chính thức từ Google để xác minh mã thông báo ID được cấp. google_auth Đ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 đó là JWT nhận được từ ứng dụng khách & là id ứng dụng khách của google. access_token aud 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": "your-email@gmail.com", "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 : Đảm bảo đã cài đặt trên máy chủ của bạn và thêm Tái bút rack-cors ứ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 : 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. PPS 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
