Project React Native Authentication

0 Comments

Authentication là quá trình để định danh một người dùng có hợp lệ hay không. Thường thể hiện qua một form đăng nhập, các bạn có thể tham khảo thêm về authentication tại đây. Do nhu cầu bảo mật trong cả web lẫn app mobile đều rất lớn: quản lý người dùng, vai trò, quyền hạn riêng của mình, nếu phải tự viết thì sẽ rất tốn công sức và đôi khi còn gây ra những lỗ hổng bảo mật rất lớn, nhưng may mắn authentication trong React Native được hỗ trợ bởi firebase, việc authentication sẽ trở nên đơn giản và an toàn hơn rất nhiều
Đầu tiên, khởi tạo project React Native có tên là auth. Sau khi khởi tạo xong, mở cmd, di chuyển đến thư mục chứa project, cài đặt rallycoding. Sau đó xóa file index.js và App.js.

Tạo file .eslintrc

Sau đó, tạo 2 file index.android.js và index.ios.js:

Tạo folder src, trong src, tạo file App.js

Vẫn trong src, tạo tiếp folder components, trong components tạo folder common, folder common sẽ chứa các file Header.js, Card.js, CardSection.js, Button.js ( Các bạn có thể lấy từ project albums trước đã làm)

Header.js

Card.js

 

CardSection.js

 

Button.js

 

Để hiểu rõ hơn về một số thẻ và thuộc tính css, các bạn có thể tìm hiểu ở bài viết trước trong project albums của mình.
Nhưng nếu trong một file các bạn muốn import cả 4 file vào thì sao ? sẽ phải dùng đến 4 dòng lệnh ? Không, sẽ có một cách khác giúp các bạn chỉ cần 1 dòng lệnh mà có thể import được cả 2, 3, hay 4 file cùng thư mục chỉ trong 1 dòng.

Trong common, tạo index.js

Mỗi khi bạn muốn import một file trong thư mục common, các bạn chỉ cần chuyển đường dẫn đến thư mục common là được.

Tiếp theo chúng ta sẽ tìm hiểu về cách làm việc của authentication trong react native sử dụng firebase. Firebase là gì? Firebase là một online database kết nối tới app của bạn, giúp bạn lưu trữ dữ liệu online, gửi thông báo đến các users khác trong app, khi dữ liệu thay đổi trên firebase sẽ làm thay đổi hiển thị của các component, và hiển thị ra thông tin mới cho các users, bên cạnh đó, firebase còn hỗ trợ authentication cho app mobile. Đăng kí account và bắt đầu với firebase ngay nào.

Đầu tiên, CREATE NEW PROJECT -> đặt tên là authentication -> chọn Project -> Authentication -> Setup Sign-in method. Trước hết, chúng ta sẽ tiến hành authentication với email và password -> enable email and password.
Tiếp theo, chúng ta cần phải cài đặt module để firebase có thể kết nối tới app của bạn, mở cửa sổ CMD, đi đến đường dẫn project của bạn.

Chúng ta sẽ có một chút thay đổi trong App.js

Như mình đã nói ở bài viết trước, componentWillMount sẽ được gọi ra ngay trước khi component render. Vậy biến khởi tạo firebase được lấy từ đâu? Các bạn vào Project Overview, chọn biếu tượng web app  sau đó tạo một App mới có tên là Authentication. Sau khi tạo xong App, các bạn vào lại phần Project Overview, kéo xuống phần Firebase SDK setup, chọn CDN, copy toàn bộ phần giữa thẻ script số 2:

Có một lưu ý đó là module firebase trong react native chỉ có thể hiểu được dấu nháy đơn nên các bạn cần sửa lại tất cả dấu ngoặc kép thành dấu nháy đơn. Tiếp theo chúng ta sẽ thêm file LoginForm vào trong project, file này dùng để hiển thị form đăng nhập. Nhưng trong form có nhiều input nên trước hết chúng ta tạo file Input.js trong common.

Thẻ TextInput tương đương với thẻ input trong HTML, thuộc tính secureTextEntry các bạn có thể hiểu nó tương đương với type=”password” trong thẻ input html,  có giá trị mặc định là false

Firebase hỗ trợ xác thực đăng nhập và đăng kí với 2 hàm signInWithEmailAndPassword và createUserWithEmailAndPassword, mỗi khi xác thực người dùng không hợp lệ, câu lệnh catch sẽ giúp bạn dễ dàng xử lý (ở trong trường hợp này là báo lỗi), còn then thì ngược lại, giúp bạn xử lý khi xác thực người dùng thành công. Tiếp theo, chúng ta sẽ thay đổi một chút trong then và catch:
LoginForm.js

Khi đăng nhập thành công, các state trở lại trạng thái ban đầu để form lại trống cho các lần đăng nhập tiếp theo (onLoginSuccess) hoặc nếu thất  bại thì sẽ báo lỗi (onLoginFail).

Hàm renderContent hiển thị nội dung trang chủ (Nếu Log In thành công thì sẽ hiện ra một button Log Out) Còn nếu đăng nhập không thành công thì hiện ra form đăng nhập.

Các bạn có thể tham khảo thêm về FirebaseAuthentication tại đây.

Vậy là các bạn đã hoàn thành project Authentication. Đừng quên comment dưới bài viết nếu các bạn có bất kì thắc mắc hay góp ý nhé. Và nhớ theo dõi bài viết tiếp theo của mình vào chủ nhật hàng tuần nhé.

 

Categories:

Leave a Reply

Your email address will not be published. Required fields are marked *