Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Ionic
Code

Bắt đầu với các dịch vụ Ionic: Auth

by
Difficulty:BeginnerLength:LongLanguages:

Vietnamese (Tiếng Việt) translation by Andrea Ho (you can also view the original English article)

Một trong những thế mạnh của Ionic là trong các dịch vụ mà nó đề xuất trên framework. Gồm các dịch vụ để xác thực người dùng ứng dụng của bạn, thông báo đẩy (push notification) và phân tích. Trong loạt bài này, chúng ta sẽ tìm hiểu về ba dịch vụ đó thông qua việc tạo một ứng dụng có sử dụng từng dịch vụ đó.

Dịch vụ đầu tiên chúng ta sẽ xem xét là dịch vụ Auth. Nó này cho phép chúng tôi triển khai xác thực trong ứng dụng Ionic mà không cần viết một dòng code nào trong back-end. Hoặc nếu hiện tại bạn đã có một hệ thống xác thực, thì bạn cũng có thể sử dụng nó. Dịch vụ hỗ trợ các phương pháp xác thực sau đây:

  • Email/Mật khẩu: người dùng được đăng ký bằng cách cung cấp email và mật khẩu.
  • Đăng nhập trên mạng xã hội: người dùng được đăng ký bằng hồ sơ mạng xã hội của họ. Hiện nay gồm có Facebook, Google, Twitter, Instagram, LinkedIn và GitHub.
  • Custom: người dùng được đăng ký bằng cách sử dụng hệ thống xác thực đang có.

Trong hướng dẫn này, chúng tôi sẽ xem xét phương pháp email/mật khẩu và đăng nhập qua mạng Facebook.

Điều bạn sẽ tạo ra

Trước khi chúng ta tiếp tục, bạn nên có khái niệm chung về những gì chúng tôi sẽ tạo và quy trình của ứng dụng sẽ như thế nào. Ứng dụng sẽ có các trang sau:

  • home page (trang chủ)
  • sign up page (trang đăng ký)
  • user page (trang người dùng)

Home Page

Trang chủ là trang mặc định của ứng dụng, ở đó người dùng có thể đăng nhập bằng email/mật khẩu hoặc qua tài khoản Facebook của họ.

home page

Khi người dùng nhấp vào nút Login with Facebook, một màn hình giống như bên dưới được hiển thị và sau khi họ chấp thuận, họ đã đăng nhập vào ứng dụng:

Facebook login

Trang đăng ký

Trang đăng ký là nơi người dùng có thể đăng ký bằng cách nhập email và mật khẩu của họ. Đăng nhập bằng Facebook không yêu đăng ký vì thông tin người dùng do Facebook API cung cấp.

Signup page

Trang người dùng

Trang cuối cùng là user page (trang người dùng), chỉ có thể nhìn thấy khi người dùng đã đăng nhập.

Khởi động ứng dụng Ionic mới

Bây giờ bạn đã biết chúng ta sẽ làm gì, hãy bắt đầu xây dựng ứng dụng của chúng ta!

Đầu tiên, chúng tôi khởi động một ứng dụng Ionic mới bằng một template mới:

Di chuyển đến thư mục authApp vừa được tạo ra. Đây sẽ là thư mục gốc của dự án.

Để nhanh chóng thiết lập giao diện người dùng của ứng dụng, tôi đã tạo một repo GitHub để lưu những file khởi đầu của mã nguồn. Tải repo về, di chuyển thư mục starter và sao chép thư mục src sang thư mục gốc của dự án Ionic mà bạn vừa tạo ra. Thư mục này chứa các template cho từng trang của ứng dụng. Tôi sẽ giải thích chi tiết hơn cho bạn về từng file trong phần sau.

Bạn có thể thấy ngay các thay đổi của mình trong khi phát triển ứng dụng:

Tạo tài khoản Ionic

Vì chúng ta sẽ sử dụng back-end của Ionic để xử lý xác thực người dùng, chúng ta cần phương pháp để quản lý người dùng của ứng dụng. Đây là lúc cần có một tài khoản Ionic. Nó cho phép bạn quản lý các ứng dụng và dịch vụ của Ionic mà họ sử dụng. Việc này bao gồm quản lý dịch vụ Auth. Bạn có thể tạo tài khoản Ionic qua trang đăng ký Ionic.io.

Kết nối ứng dụng với dịch vụ Ionic

Tiếp theo, di chuyển đến thư mục gốc của dự án và cài đặt plugin Ionic Cloud:

Plugin này sẽ cho phép ứng dụng dễ dàng tương tác với các dịch vụ Ionic.

Sau đó, bạn có thể khởi tạo ứng dụng để sử dụng các dịch vụ Ionic:

Điều này nhắc nhở bạn đăng nhập bằng tài khoản Ionic của bạn. Khi bạn đã nhập chính xác thông tin đăng nhập, công cụ dòng lệnh sẽ tự động tạo bản ghi ứng dụng mới trong tài khoản Ionic của bạn. Bản ghi này được kết nối với ứng dụng mà bạn đang phát triển.

Bạn có thể xác định rằng bước này có hiệu quả bằng cách mở file .io-config.json và file ionic.config.json tại thự mục gốc của dự án của bạn. App_id phải giống với ID ứng dụng được gán cho ứng dụng mới được tạo trong dashboard Ionic của bạn.

Trang chủ

Di chuyển vào thư mục src/pages/home để xem các file cho trang chủ. Mở file home.html và bạn sẽ thấy như sau:

Trang này sẽ yêu cầu người dùng nhập email và mật khẩu của họ hoặc đăng nhập bằng tài khoản Facebook. Nếu chưa có tài khoản, họ có thể nhấp vào nút đăng ký để đến trang đăng ký. Chúng tôi sẽ quay lại các chi tiết cụ thể của trang này sau khi chúng tôi chuyển sang phần đăng nhập. Tôi chỉ cho bạn xem để bạn có thể thấy code để điều hướng đến trang đăng ký.

Tiếp theo, mở file home.ts. Hiện tại, file này chỉ chứa một số code mẫu để điều hướng đến trang đăng ký và người dùng. Sau đó, chúng ta sẽ quay lại trang này để thêm code dùng đăng nhập tài khoản người dùng.

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

Bố cục của trang đăng ký được tìm thấy trong src/pages/signup-page/signup-page.html. Hãy xem file này và bạn sẽ tìm thấy một biểu mẫu đơn giản yêu cầu nhập email và mật khẩu.

Tiếp theo, chúng ta hãy xem file sign-page.ts.

Hãy chia nhỏ file này ra. Đầu tiên, nó nhập khẩu các controller để tạo alert (cảnh báo) và loader (trình tải):

Sau đó, nó nhập khẩu các class cần thiết từ Cloud Client:

  • Dịch vụ Auth sẽ đảm trách phần đăng ký người dùng, đăng nhập và đăng xuất.
  • UserDetails là được sử dụng để xác định thông tin người dùng khi đăng ký hoặc đăng nhập cho một người dùng.
  • IDetailedError được sử dụng để xác định lý do chính xác gây ra lỗi. Nó cho phép chúng tôi cung cấp thông báo lỗi thân thiện với người dùng bất cứ khi nào xảy ra lỗi.

Khai báo các biến được sử dụng để dữ liệu nhập vào: email và mật khẩu của người dùng. Tên này phải giống với tên bạn đã đặt cho các thuộc tính value và ngModel trong file layout (bố cục).

Tiếp theo, phương thức register sẽ được gọi khi nhấn nút Register. Hãy viết cùng nhau viết code cho phương thức này.

Đầu tiên nó kích hoạt loader, và loader này sẽ biến mất sau 5 giây (đề phòng khi có sự cố xảy ra, người dùng sẽ không bị bỏ quên với một hoạt hình chỉ thị đang tải và quay vô hạn).

Tiếp theo, hãy tạo một đối tượng để lưu trữ thông tin của người dùng:

Cuối cùng, chúng ta sẽ gọi phương thức signup() từ dịch vụ Auth và cung cấp chi tiết người dùng làm đối số. Môt promise được trả về, mà chúng ta unwrap với then(). Khi một phản hồi thành công được nhận từ back-end, hàm đầu tiên mà bạn chuyển đến then() sẽ được xử lý; trái lại thì hàm thứ hai sẽ được xử lý.

Nếu nhận được một phản hồi lỗi từ phía Ionic Auth, chúng tôi sẽ chạy vòng lặp qua mảng chứa các lỗi và tạo ra một thông báo lỗi tuỳ theo kiểu lỗi nhận được. Bạn có thể tìm thấy danh sách các lỗi về đăng ký Auth có thể xảy ra tại đây.

Khi hoàn tất, bạn có thể thử ứng dụng trong trình duyệt của mình. Đăng nhập email/mật khẩu không phụ thuộc vào bất kỳ phần cứng hoặc plugin nào, vậy nên bạn có thể kiểm tra nó trong trình duyệt. Sau đó, bạn có thể tìm người dùng mới được đăng ký trong tab Auth của trang tổng quan ứng dụng Ionic của bạn.

Thiết lập ứng dụng Facebook

Bước tiếp theo là thiết lập ứng dụng để nó có thể xử lý thông tin đăng nhập Facebook nguyên bản. Trước tiên, bạn cần phải tạo một ứng dụng Facebook. Bạn có thể làm điều đó bằng cách đăng nhập vào tài khoản Facebook của bạn và sau đó đến trang Facebook Developer. Tại đó, hãy tạo ứng dụng mới:

Create Facebook App

Khi ứng dụng được tạo ra, nhấp vào liên kết Add Product trên sidebar và chọn Facebook Login. Thao tác này mặc định sẽ mở màn hình Quickstart. Chúng ta không thực sự cần điều đó, vì vậy hãy tiếp tục nhấp vào liên kết Settings nắm ngay bên dưới Facebook Login. Bạn thấy màn hình sau đây:

Facebook Settings

Bạn cần kích hoạt thiết lập Embedded Browser OAuth Login và bổ sung https://api.ionic.io/auth/integrations/facebook làm giá trị cho Valid OAuth redirect URIs. Lưu các thay đổi khi hoàn tất.

Tiếp theo, bạn cần kết nối Ionic Auth với ứng dụng Facebook mà bạn vừa tạo ra. Truy cập dashboard của Ionic và chọn ứng dụng đã được tạo ra trước đó (xem phần "Kết nối ứng dụng với dịch vụ Ionic"). Nhấp vào tab Settings và sau đó nhấp vào User Auth. Phía dưới Social Providers, nhấp vào nút Setup nằm bên cạnh Facebook:

Ionic app settings social providers

Nhập App ID và App Secret của ứng dụng Facebook bạn đã tạo trước đó và nhấn Enable.

Cài đặt Plugin Facebook

Tiếp theo, cài đặt plugin Facebook cho Cordova. Không như đa số các plugin, plugin này yêu cầu bạn cung cấp vài thông tin: Facebook App II và App Name. Bạn có thể sao chép thông tin này từ trang Facebook app dashboard.

Định cấu hình dịch vụ Facebook

Khi đã hoàn thành, điều cuối cùng bạn cần làm là trở lại dự án của mình, mở file src/app/app.module.ts và bổ sung các dịch vụ CloudSettingsCloudModule từ package cloud-angular:

Khai báo đối tượng cloudSettings. Đối tượng này chứa app_id của ứng dụng Ionic và bất kỳ quyền bổ sung nào (phạm vi) mà bạn muốn hỏi người dùng ứng dụng của bạn. Theo mặc định, đối tượng này yêu cầu emailpublic_profile.

Nếu bạn muốn yêu cầu thêm dữ liệu từ người dùng của mình, bạn có thể tìm danh sách các quyền trên trang này: Facebook Login Permissions.

Tiếp theo, hãy cho Ionic biết về CloudSettings mà bạn vừa bổ sung:

Sau này, khi bạn thêm các nhà cung cấp xã hội khác vào ứng dụng của mình, quá trình tương tự như sau:

Đăng nhập cho người dùng

Bây giờ là lúc quay lại trang chủ và thực hiện một số thay đổi. Mẫu HTML đã cung cấp mọi thứ chúng ta cần, vì vậy chúng tôi chỉ cần cập nhật mã kịch bản. Tiếp theo mở file src/pages/home/home.ts. Ở đầu file, ngoài những gì bạn đã có trước đó, hãy import phần sau đây:

Bên trong constructor, xác định xem người dùng hiện có đang đăng nhập hay không. Nếu người dùng đã đăng nhập rồi, chúng ta tự động điều hướng đến User Page.

Tiếp theo, khi nút Login được nhấn, chúng ta bắt đầu bằng cách hiển thị hoạt hình đang tải (loading).

Như bạn đã thấy trong file src/pages/home/home.html trước đó, một chuỗi đại diện cho nút đăng nhập nào đã được nhấn (nút đăng nhập email/mật khẩu hoặc nút đăng nhập Facebook) được chuyển tới hàm login(). Điều này cho phép chúng tôi xác định code đăng nhập nào cần thực thi. Nếu kiểu là "fb" điều đó có nghĩa là nút đăng nhập Facebook đã được nhấn, vì vậy chúng tôi gọi phương thức login() của dịch vụ FacebookAuth.

Trái lại, nút đăng nhập email/mật khẩu đã được nhấn và chúng tôi sẽ đăng nhập người dùng bằng các chi tiết được nhập trong biểu mẫu đăng nhập.

Hãy xem qua phiên bản cuối cùng của file home.ts để thấy nó trông thế nào.

Trang người dùng

Trang cuối cùng là User Page.

Bố cục, trong src/pages/user-page/user-page.html, hiển thị ảnh tiểu sử của người dùng và tên người dùng của họ. Nếu người dùng đã đăng ký bằng email/mật khẩu của họ, tên người dùng sẽ là địa chỉ email của người dùng và ảnh hồ sơ sẽ là ảnh hồ sơ mặc định do Ionic ấn định. Mặt khác, nếu người dùng đăng ký bằng Facebook, ảnh hồ sơ sẽ là ảnh profile trên Facebook và tên người dùng sẽ là tên đầy đủ của họ.

Tiếp theo, hãy xem file user-page.ts.

Trong package ionic-angular, ngoài NavController thì chúng ta sẽ import dịch vụ Platform. Package này được dùng lấy thông tin về thiết bị hiện tại. Package này cũng có phương thức để nghe các sự kiện của phần cứng chẳng hạn như khi nút back của thiết bị trong Android được nhấn.

Và đối với package cloud-angular, chúng tôi cần các dịch vụ Auth, FacebookAuth và User:

Bên trong class constructor, xác định xem người dùng đã đăng nhập bằng email/mật khẩu hay bằng tài khoản Facebook của họ. Điền vào usernamephoto dựa trên những thông tin đó. Sau đó, ở bên dưới gán một hàm sẽ được thực thi khi bút back của thiết bị được bấm. Hàm registerBackButtonAction() nhận hai đối số: hàm sẽ được xử lý và mức độ ưu tiên. Nếu có nhiều thông tin này trong ứng dụng, chỉ cái có ưu tiên cao nhất mới được xử lý. Nhưng vì chúng ta chỉ cần nó trong màn hình này, ta chỉ cần đặt giá trị 1.

Phương thức logoutUser() chứa logic để giúp người dùng đăng xuất. Điều đầu tiên cần làm là xác định xem người dùng có thực sự đăng nhập hay không. Nếu người dùng đăng nhập, chúng tôi xác định xem là người dùng đến từ Facebook hoặc người dùng qua email/mật khẩu.

Việc này có thể được thực hiện bằng cách kiểm tra thuộc tính email bên dưới đối tượng user.details. Nếu thuộc tính này tồn tại, điều đó có nghĩa là người dùng là người dùng có email/mật khẩu. Vì vậy, nếu trái lại điều này, chúng tôi cho rằng đó là một người dùng Facebook. Gọi phương thức logout() trong Auth và FacebookAuth sẽ xóa người dùng hiện tại của ứng dụng.s

Chạy ứng dụng trên thiết bị

Bây giờ chúng ta có thể chạy thử ứng dụng! Trước tiên, hãy thiết lập nền tảng và xây dựng gói gỡ lỗi apk:

Để Facebook login hoạt động, bạn cần cung cấp hash của file apk cho Facebook App. Bạn có thể xác định hàm mã hash bằng lệnh sau đây:

Kế tiếp, truy cập trang basic settings (cài đặt cơ bản) của Facebook app và nhấp vào nút Add Platform ở phía dưới cùng của màn hình. Chọn Android làm nền tảng. Sau đó, bạn sẽ thấy biểu mẫu sau:

Android platform settings

Điền vào Google Play Package NameKey Hashes. Bạn có thể đặt tên bất kỳ để làm giá trị cho Google Play Package Name miễn là tên này tuân theo định dạng tương tự như các ứng dụng trong Google Play (ví dụ: com.ionicframework.authapp316678). Đối với các Key Hashes, bạn cần phải nhập vào chuỗi hash được trả về trước đó. Đừng quên nhấn Save Changes khi bạn đã hoàn tất.

Khi hoàn thành, giờ bạn có thể sao chép android-debug.apk từ thư mục platforms/android/build/outputs/apk vào thiết bị của bạn, hãy cài đặt và chạy.

Tổng kết và bước kế tiếp

Thế đấy! Trong hướng dẫn này, bạn đã học cách sử dụng dịch vụ Ionic Auth giúp dễ dàng thực hiện xác thực trong ứng dụng Ionic của bạn. Chúng ta đã sử dụng xác thực email/mật khẩu và đăng nhập Facebook trong hướng dẫn này, nhưng còn có các chọn lựa khác và bạn cũng có thể dễ dàng bổ sung chúng vào ứng dụng của bạn.

Đây là một số bước tiếp theo bạn có thể tự trải nghiệm để đưa ứng dụng của bạn lên một cấp độ cao hơn.

  • Lưu các thông tin người dùng nhiều hơn - ngoài email và mật khẩu, bạn có thể lưu trừ thông tin bổ sung khác cho người dùng của bạn.
  • Sử dụng những mạng xã hội khác để đăng nhập - như đã nói trên đầu bài viết, bạn có thể triển khai đăng nhập qua mạng xã hội với các dịch vụ sau: Google, Twitter, Instagram, LinkedInGitHub.
  • Bổ sung chức năng phục hồi mật khẩu - phục hồi mật khẩu có thể được thực hiện qua biểu mẫu phục hồi mật khẩu của Ionic, hoặc hãy tự thực hiện giải pháp của bạn.
  • Xác thực tuỳ biến - Nếu bạn đã có một back-end để xử lý xác thực cho người dùng cho dịch vụ của bạn, có lẽ bạn cần triển khai xác thực tuỳ biến.

Đó là tất cả những gì bạn cần lúc này. Hãy theo dõi để nhận thêm nhiều bài viết về cách dùng dịch vụ Ionic. Tạm thời, hãy xem những bài viết hay về phát triển ứng dụng đa nền tảng cho thiết bị di động.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.