Xác thực bằng nhà cung cấp OAuth với Cordova

Với SDK JS Firebase, bạn có thể cho phép người dùng Firebase xác thực bằng cách sử dụng bất kỳ nhà cung cấp OAuth được hỗ trợ nào trong môi trường Cordova. Bạn có thể tích hợp bất kỳ nhà cung cấp OAuth được hỗ trợ nào bằng cách sử dụng SDK Firebase để thực hiện luồng đăng nhập hoặc bằng cách thực hiện luồng OAuth theo cách thủ công và chuyển thông tin xác thực OAuth thu được cho Firebase.

Thiết lập xác thực Firebase cho Cordova

1. Thêm Firebase vào dự án JavaScript của bạn . Khi thêm đoạn mã Firebase, hãy lưu ý đến biến cấu hình authDomain , biến này sẽ trông giống như my-app.firebaseapp.com . Nếu miền tùy chỉnh được sử dụng thay vì miền firebaseapp.com do Firebase cung cấp thì miền tùy chỉnh sẽ được sử dụng thay thế.

2. Để thiết lập ứng dụng Android, hãy thêm ứng dụng Android của bạn vào bảng điều khiển Firebase và nhập chi tiết ứng dụng của bạn. Bạn không cần google-services.json được tạo.

3. Để thiết lập ứng dụng iOS, hãy tạo ứng dụng iOS và thêm ứng dụng đó vào bảng điều khiển Firebase . Bạn sẽ cần ID gói iOS để thêm sau khi cài đặt plugin lược đồ URL tùy chỉnh.

4. Kích hoạt Liên kết động Firebase:

   1. Trong bảng điều khiển Firebase , hãy mở phần Liên kết động .

   2. Nếu bạn chưa chấp nhận các điều khoản của Liên kết động và đã tạo miền Liên kết động, hãy thực hiện ngay bây giờ.

      Nếu bạn đã tạo miền Liên kết động, hãy lưu ý đến nó. Miền Liên kết động thường trông giống như ví dụ sau:

      example.page.link

      Bạn sẽ cần giá trị này khi định cấu hình ứng dụng Apple hoặc Android của mình để chặn liên kết đến.

5. Kích hoạt tính năng Đăng nhập bằng Google trong bảng điều khiển Firebase:

   1. Trong bảng điều khiển Firebase , hãy mở phần Xác thực .
   2. Trên tab Phương thức đăng nhập , bật phương thức đăng nhập Google và nhấp vào Lưu .

6. Cài đặt các plugin cần thiết trong dự án Cordova của bạn.

   # Plugin to pass application build info (app name, ID, etc) to the OAuth widget.
   cordova plugin add cordova-plugin-buildinfo --save
   # Plugin to handle Universal Links (Android app link redirects)
   cordova plugin add cordova-universal-links-plugin-fix --save
   # Plugin to handle opening secure browser views on iOS/Android mobile devices
   cordova plugin add cordova-plugin-browsertab --save
   # Plugin to handle opening a browser view in older versions of iOS and Android
   cordova plugin add cordova-plugin-inappbrowser --save
   # Plugin to handle deep linking through Custom Scheme for iOS
   # Substitute *com.firebase.cordova* with the iOS bundle ID of your app.
   cordova plugin add cordova-plugin-customurlscheme --variable \
       URL_SCHEME=com.firebase.cordova --save
   

7. Thêm cấu hình sau vào tệp Cordova config.xml của bạn, trong đó AUTH_DOMAIN là miền ở bước (1) và DYNAMIC_LINK_DOMAIN là miền ở bước (3c).

   <universal-links>
       <host name="DYNAMIC_LINK_DOMAIN" scheme="https" />
       <host name="AUTH_DOMAIN" scheme="https">
           <path url="/__/auth/callback"/>
       </host>
   </universal-links>
   

   Một cấu hình ví dụ có thể trông giống như:

   <universal-links>
       <host name="example.page.link" scheme="https" />
       <host name="example-app.firebaseapp.com" scheme="https">
           <path url="/__/auth/callback"/>
       </host>
   </universal-links>
   

   Nếu miền tùy chỉnh auth.custom.domain.com được sử dụng, hãy thay thế my-app.firebaseapp.com bằng miền đó.

   Đối với ứng dụng Android, nên sử dụng singleTask cho launchMode .

   <preference name="AndroidLaunchMode" value="singleTask" />
   

Lưu ý: Nếu bạn đang sử dụng khung Ionic thì nên sử dụng phiên bản mới nhất của khung đó để đảm bảo ứng dụng được phân phát từ nguồn gốc bằng sơ đồ file:// hoặc ionic:// . Điều này là bắt buộc để Firebase Auth có thể xử lý đúng cách các hoạt động signInWithRedirect . Firebase Auth sẽ coi nguồn gốc http://localhost là ứng dụng trình duyệt dựa trên web ngay cả khi chúng được hiển thị trong môi trường Cordova.

Xử lý luồng đăng nhập bằng SDK Firebase

1. Firebase Auth phụ thuộc vào sự kiện deviceReady để xác định chính xác môi trường Cordova hiện tại. Đảm bảo phiên bản Ứng dụng Firebase được khởi tạo sau khi sự kiện đó được kích hoạt.

2. Tạo một phiên bản của đối tượng nhà cung cấp Google:

   Web modular API

   Tìm hiểu thêm về API Web mô-đun có thể rung theo cây và nâng cấp từ API được đặt tên.

   import { GoogleAuthProvider } from "firebase/auth/cordova";
   
   const provider = new GoogleAuthProvider();
   auth_create_google_provider.js

   Web namespaced API

   var provider = new firebase.auth.GoogleAuthProvider();
   cordova.js

3. Xác thực với Firebase bằng đối tượng nhà cung cấp Google bằng signInWithRedirect . Lưu ý rằng signInWithPopup không được hỗ trợ ở Cordova.

   Web modular API

   Tìm hiểu thêm về API Web mô-đun có thể rung theo cây và nâng cấp từ API được đặt tên.

   import { getAuth, signInWithRedirect, getRedirectResult, GoogleAuthProvider } from "firebase/auth/cordova";
   
   const auth = getAuth();
   signInWithRedirect(auth, new GoogleAuthProvider())
     .then(() => {
       return getRedirectResult(auth);
     })
     .then((result) => {
       const credential = GoogleAuthProvider.credentialFromResult(result);
   
       // This gives you a Google Access Token.
       // You can use it to access the Google API.
       const token = credential.accessToken;
   
       // The signed-in user info.
       const user = result.user;
       // ...
     }).catch((error) => {
       // Handle Errors here.
       const errorCode = error.code;
       const errorMessage = error.message;
     });
   auth_cordova_sign_in_redirect.js

   Web namespaced API

   firebase.auth().signInWithRedirect(provider).then(() => {
     return firebase.auth().getRedirectResult();
   }).then((result) => {
     /** @type {firebase.auth.OAuthCredential} */
     var credential = result.credential;
   
     // This gives you a Google Access Token.
     // You can use it to access the Google API.
     var token = credential.accessToken;
     // The signed-in user info.
     var user = result.user;
     // ...
   }).catch((error) => {
     // Handle Errors here.
     var errorCode = error.code;
     var errorMessage = error.message;
   });
   cordova.js

4. Để xử lý trường hợp hoạt động ứng dụng bị hủy trước khi thao tác đăng nhập hoàn tất, hãy gọi getRedirectResult khi ứng dụng của bạn tải.

   Web modular API

   Tìm hiểu thêm về API Web mô-đun có thể rung theo cây và nâng cấp từ API được đặt tên.

   import { getAuth, getRedirectResult, GoogleAuthProvider } from "firebase/auth/cordova";
   
   const auth = getAuth();
   getRedirectResult(auth)
     .then((result) => {
       const credential = GoogleAuthProvider.credentialFromResult(result);
       if (credential) {        
         // This gives you a Google Access Token.
         // You can use it to access the Google API.
         const token = credential.accessToken;
         // The signed-in user info.
         const user = result.user;
         // ...
       }
     })
     .catch((error) => {
       // Handle Errors here.
       const errorCode = error.code;
       const errorMessage = error.message;
     });
   auth_cordova_redirect_result.js

   Web namespaced API

   firebase.auth().getRedirectResult().then((result) => {
     if (result.credential) {
       /** @type {firebase.auth.OAuthCredential} */
       var credential = result.credential;
   
       // This gives you a Google Access Token.
       // You can use it to access the Google API.
       var token = credential.accessToken;
       // The signed-in user info.
       var user = result.user;
       // ...
     }
   }).catch((error) => {
     // Handle Errors here.
     var errorCode = error.code;
     var errorMessage = error.message;
   });
   cordova.js

   Cơ chế tương tự có thể được sử dụng để liên kết nhà cung cấp mới thông qua linkWithRedirect hoặc để xác thực lại với nhà cung cấp hiện tại bằng cách sử dụng reauthenticateWithRedirect .