Khi tôi cần xác thực/đăng ký người dùng trong ứng dụng tôi đang tạo, tôi thường không tự tạo mà thay vào đó sử dụng dịch vụ SaaS dành riêng cho mục đích này, được gọi là IDaaS. Cụ thể thì mình hay dùng Auth0 hoặc AppID (vì họ có nhiều tài liệu). Các dịch vụ này không chỉ cung cấp tính năng xác thực người dùng mà còn có các chức năng đăng ký trực tuyến, đặt lại mật khẩu và đặt lại mật khẩu đã quên đã được tích hợp sẵn một cách an toàn, vì vậy tôi rất thuận tiện khi sử dụng mà không cần phải suy nghĩ về việc triển khai.
Nói tóm lại, nếu bạn đang sử dụng Auth0, bạn có thể dễ dàng triển khai logic trong đó xác thực được thực hiện bằng OAuth trên auth0.com và nếu thông tin xác thực là chính xác, bạn có thể nhận mã thông báo truy cập bằng cách sử dụng thông tin nhận được trong lệnh gọi lại.
Nếu bạn sử dụng Auth0 để tạo ứng dụng, tên người dùng (tên hiển thị) và hình ảnh biểu tượng của nó sẽ được xác định tại thời điểm đăng ký (dựa trên các quy tắc nhất định). Đặc biệt, mặc dù tên người dùng là một chuyện, nhưng nhiều người cảm thấy rằng họ muốn sử dụng hình ảnh biểu tượng mà họ thích chứ không phải hình ảnh được tạo tự động. Tuy nhiên, hiện tại người dùng không thể thay đổi nó trực tiếp. Vì cần phải tiếp tục sử dụng cái được xác định tại thời điểm đăng ký, tôi cảm thấy rằng có một vấn đề là không thể thay đổi tên người dùng và biểu tượng người dùng một cách cẩn thận.
Sau khi nghiên cứu về Auth0, tôi phát hiện ra rằng một API để thực hiện các thay đổi đã được cung cấp . Nói cách khác, không có tính năng nào để người dùng thực hiện thay đổi trực tiếp, nhưng có một cách để tạo tính năng đó trong ứng dụng của riêng bạn. Mục blog này nói về việc thử điều này với Node.js ngay lập tức.
Thay đổi API ảnh hồ sơ
Ví dụ: API để thay đổi ảnh hồ sơ được cung cấp như sau (hình bên dưới là một mẫu trong Node.js):
Trong hình trên, chỉ định ID ( User.id trên Auth0) của người dùng muốn thay đổi hình ảnh trong phần USER_ID và chỉ định URL hình ảnh sau khi thay đổi làm giá trị của hình ảnh, sau đó thực hiện REST ở trên API.
Đối với Node.js, có một SDK giúp bạn thực hiện quy trình tương tự dễ dàng hơn và nếu bạn sử dụng nó, bạn chỉ cần truyền các tham số cần thiết cho phương thức cập nhật của lớp ManagementClient để thực thi nó.
Cả hai ví dụ đều được trình bày là chỉ thay đổi ảnh biểu tượng của người dùng, nhưng trên thực tế, có thể thay đổi nhiều thuộc tính khác như nickname
, firstName
, lastName
, v.v. ngoài ảnh. Vì bản thân việc triển khai đơn giản hơn cho cái sau (SDK), chúng tôi sẽ tiếp tục giải thích bằng cách sử dụng cái này.
Chuẩn bị client_id
và client_secret
Bạn cần có cùng thông tin client_id
, client_secret
và domain
giống như khi tạo ứng dụng xác thực Auth0 để chạy API này. Tuy nhiên, bạn cần lưu ý rằng bạn có thể cần lấy lại chúng trong nhiều trường hợp. Sau đây là màn hình khi bạn đăng nhập vào Auth0.com , chọn Ứng dụng – Applications từ menu, rồi chạy ” Create Application “:
Nếu bạn đang thêm xác thực vào ứng dụng của mình bằng Auth0, có khả năng bạn sẽ cần đăng ký ứng dụng với Auth0, chọn một trong các loại sau tùy thuộc vào ứng dụng của bạn: “Gốc” (dành cho ứng dụng gốc trên thiết bị di động), “Web một trang Ứng dụng” (SPA) hoặc “Ứng dụng web thông thường” (các ứng dụng web khác).
Tuy nhiên, để nhận ra tính năng này, bạn sẽ cần có ứng dụng “M2M (Machine to Machine)” client_id và client_secret. Do đó, nếu bạn chưa tạo ứng dụng M2M, vui lòng chọn Ứng dụng Machine to Machine và thêm một ứng dụng mới.
Trên màn hình tiếp theo, hãy chọn API mục tiêu, nhưng đối với ứng dụng M2M thì chỉ có một tùy chọn, vì vậy hãy chọn “API quản lý xác thực”:
Cuối cùng, chỉ định phạm vi quyền cho API. Vì chúng tôi đang triển khai quản lý người dùng, hãy nhập “người dùng” vào thanh tìm kiếm, kiểm tra tất cả các phạm vi xuất hiện và nhấp vào nút “Ủy quyền” để hoàn tất đăng ký ứng dụng.
Bạn sẽ cần ID ứng dụng khách, Bí mật ứng dụng khách (và Miền, phải giống với ID ứng dụng bạn nhận được khi đăng ký ứng dụng khác) của ứng dụng M2M mà bạn đã tạo (thêm) trên Auth0.com . Hãy chuẩn bị sẵn để khi sử dụng có thể lấy ngay như copy và paste:
Thực hiện
Khi bạn đã chuẩn bị xong, hãy thử thực hiện nó. Đối với Node.js, có một SDK thư viện máy khách thuận tiện có tên là auth0, vì vậy hãy sử dụng SDK đó để triển khai. Cuối cùng, tôi sẽ bao gồm một liên kết đến nguồn ứng dụng mẫu, vì vậy nếu bạn quan tâm, vui lòng tải xuống và dùng thử.
Đầu tiên, chúng tôi sẽ khởi tạo Auth0:
1 2 3 4 5 6 7 8 9 | <span class="token comment">//. Auth0 Management API</span> <span class="token keyword">var</span> ManagementClient <span class="token operator">=</span> <span class="token function">require</span> <span class="token punctuation">(</span> <span class="token string">'auth0'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> ManagementClient <span class="token punctuation">;</span> <span class="token keyword">var</span> auth0 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ManagementClient</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> domain <span class="token operator">:</span> <span class="token string">'xxxx.auth0.com'</span> <span class="token punctuation">,</span> <span class="token comment">// domain value</span> clientId <span class="token operator">:</span> <span class="token string">'client_id'</span> <span class="token punctuation">,</span> <span class="token comment">// client_id value</span> clientSecret <span class="token operator">:</span> <span class="token string">'client_secret'</span> <span class="token punctuation">,</span> <span class="token comment">// client_secret value</span> scope <span class="token operator">:</span> <span class="token string">'create:users read:users update:users'</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Nhận Auth0 ManagementClient và khởi tạo nó với các giá trị domain
, client_id
, client_secret
và phạm vi ‘ create:users read:users update:users
‘ (tất cả những thứ này đều cần thiết làm phạm vi để cập nhật URL ảnh hồ sơ). Để nhắc lại, điểm quan trọng ở đây là client_id
và client_secret
được chỉ định ở đây phải từ ứng dụng được đăng ký dưới dạng ứng dụng M2M, không phải từ ứng dụng gốc/web thông thường.
Nếu chúng tôi muốn thay đổi URL ảnh hồ sơ cho người dùng bằng user_id = ‘abcabc’, chúng tôi sẽ thực hiện quy trình sau:
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token keyword">var</span> params <span class="token operator">=</span> <span class="token punctuation">{</span> user_id <span class="token operator">:</span> <span class="token string">'abcabc'</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token comment">// User with the user ID 'abcabc' are the target.</span> <span class="token keyword">var</span> metadata <span class="token operator">=</span> <span class="token punctuation">{</span> picture <span class="token operator">:</span> <span class="token string">'https://manholemap.juge.me/imgs/logo.jpg'</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token comment">// Change the profile picture to the one at the specified URL.</span> auth0 <span class="token punctuation">.</span> users <span class="token punctuation">.</span> <span class="token function">update</span> <span class="token punctuation">(</span> params <span class="token punctuation">,</span> metadata <span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token parameter">err <span class="token punctuation">,</span> user</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> err <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> err <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token operator">:</span> <span class="token comment">// When there is an error, handling it.</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> user <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token operator">:</span> <span class="token comment">// Successful processing.</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Chúng ta sẽ sử dụng hàm auth0.users.update()
để thực thi, chỉ định thông tin của người dùng đích làm tham số đầu tiên và các thay đổi làm tham số thứ hai. Sau đó, chúng tôi sẽ xác định xem có lỗi hay thành công hay không và tiếp tục xử lý.
Trong ví dụ trên, chúng tôi chỉ thay đổi ảnh hồ sơ, nhưng cũng có thể thay đổi nhiều thuộc tính cùng một lúc. Ví dụ: ví dụ sau thay đổi ảnh hồ sơ ( picture
) và tên hiển thị ( nickname
) của người dùng mục tiêu cùng một lúc:
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token keyword">var</span> params <span class="token operator">=</span> <span class="token punctuation">{</span> user_id <span class="token operator">:</span> <span class="token string">'abcabc'</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">var</span> metadata <span class="token operator">=</span> <span class="token punctuation">{</span> nickname <span class="token operator">:</span> <span class="token string">'tanjirou'</span> <span class="token punctuation">,</span> picture <span class="token operator">:</span> <span class="token string">'https://tanjirou.juge.me/imgs/logo.jpg'</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> auth0 <span class="token punctuation">.</span> users <span class="token punctuation">.</span> <span class="token function">update</span> <span class="token punctuation">(</span> params <span class="token punctuation">,</span> metadata <span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token parameter">err <span class="token punctuation">,</span> user</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> err <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> err <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token operator">:</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> user <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token operator">:</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Tôi đã cung cấp một ứng dụng mẫu thực sự hoạt động như một tài liệu tham khảo: https://github.com/dotnsf/auth0-userpicture
Nếu bạn thực sự muốn chạy ứng dụng mẫu, bạn cần phải đăng ký một ứng dụng web thông thường (không phải M2M) với Auth0 và nhận client_id
, client_secret
và domain
của ứng dụng đó. Bạn cũng cần đăng ký URL gọi lại OAuth ( callback_url
) trong các biến môi trường khi chạy. Bạn cũng có thể thay thế điều này bằng cách viết nội dung trong tệp .env
trong cùng một kho lưu trữ khi chạy.
Nếu bạn tham khảo nó, bạn sẽ hiểu rằng bạn cần ID người dùng của người dùng mục tiêu để thực sự thay đổi thuộc tính của người dùng. Bạn có thể lấy ID người dùng sau khi đăng nhập bằng OAuth, vì vậy bạn cần đăng ký hai ứng dụng, một ứng dụng (web thông thường) thông thường và một ứng dụng M2M để quản lý người dùng, đồng thời triển khai ứng dụng này bằng cả client_id
và client_secret
. Vui lòng tham khảo mã nguồn để biết thêm chi tiết.