Dễ dàng thêm tính năng đăng nhập vào ứng dụng web bằng FirebaseUI

FirebaseUI là một thư viện được xây dựng dựa trên ở đầu SDK xác thực Firebase cung cấp luồng giao diện người dùng thả xuống để sử dụng trong ứng dụng của bạn. FirebaseUI mang lại những lợi ích sau:

  • Nhiều nhà cung cấp – quy trình đăng nhập cho email/mật khẩu, đường liên kết email, số điện thoại xác thực, đăng nhập bằng Google, Facebook, Twitter và GitHub.
  • Liên kết tài khoản – quy trình để liên kết an toàn tài khoản người dùng giữa danh tính Google Cloud.
  • Tuỳ chỉnh - ghi đè các kiểu CSS của FirebaseUI cho phù hợp với ứng dụng của bạn các yêu cầu liên quan. Ngoài ra, vì FirebaseUI là nguồn mở nên bạn có thể phát triển nhánh dự án và tuỳ chỉnh nó chính xác theo nhu cầu của bạn.
  • Đăng ký bằng một lần nhấn và tự động đăng nhập – tự động tích hợp với Đăng ký bằng một lần nhấn giúp đăng nhập nhanh trên nhiều thiết bị.
  • Giao diện người dùng đã bản địa hoá – quốc tế hoá cho hơn 40 ngôn ngữ.
  • Nâng cấp người dùng ẩn danh – khả năng nâng cấp người dùng ẩn danh thông qua đăng nhập. Để biết thêm thông tin, hãy truy cập bài viết Nâng cấp người dùng ẩn danh .

Trước khi bắt đầu

  1. Thêm phương thức xác thực Firebase vào ứng dụng web, đảm bảo bạn đang sử dụng SDK tương thích v9 (được đề xuất) hoặc SDK cũ hơn (xem thanh bên ở phía trên).

  2. Thêm FirebaseUI vào một trong các lựa chọn sau:

    1. Mạng phân phối nội dung (CDN)

      Đưa tập lệnh và tệp CSS sau đây vào <head> thẻ của trang của bạn, bên dưới đoạn mã khởi chạy từ Bảng điều khiển của Firebase:

      <script src="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.css" />

    2. Mô-đun npm

      Cài đặt FirebaseUI và các phần phụ thuộc của giao diện này thông qua npm bằng cách sử dụng đường liên kết sau :

      $ npm install firebaseui --save

      require các mô-đun sau trong tệp nguồn của bạn:

      var firebase = require('firebase');
var firebaseui = require('firebaseui');

    3. Thành phần cung tên

      Cài đặt FirebaseUI và các phần phụ thuộc của giao diện người dùng này thông qua Bower bằng cách sử dụng cách sau :

      $ bower install firebaseui --save

      Bao gồm các tệp bắt buộc trong HTML của bạn, nếu Máy chủ HTTP của bạn cung cấp các tệp trong bower_components/:

      <script src="bower_components/firebaseui/dist/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="bower_components/firebaseui/dist/firebaseui.css" />

Khởi chạy FirebaseUI

Sau khi nhập SDK, hãy khởi chạy giao diện người dùng Xác thực.

// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());

Thiết lập phương thức đăng nhập

Trước khi có thể sử dụng Firebase để đăng nhập người dùng, bạn phải bật và định cấu hình phương thức đăng nhập bạn muốn hỗ trợ.

Địa chỉ email và mật khẩu

  1. Trong bảng điều khiển Firebase, hãy mở phần Xác thực rồi bật xác thực email và mật khẩu.

  2. Thêm mã nhà cung cấp email vào danh sách FirebaseUI signInOptions.

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    firebase.auth.EmailAuthProvider.PROVIDER_ID
  ],
  // Other config options...
});

  3. Không bắt buộc: Bạn có thể định cấu hình EmailAuthProvider để yêu cầu người dùng để nhập tên hiển thị (mặc định là true).

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
      requireDisplayName: false
    }
  ]
});

  1. Trong bảng điều khiển Firebase, hãy mở phần Xác thực. Trên Thẻ Phương pháp đăng nhập, bật nhà cung cấp Email/Mật khẩu. Ghi chú bạn phải bật tính năng đăng nhập bằng email/mật khẩu để sử dụng tính năng đăng nhập qua đường liên kết email.

  2. Cũng trong phần này, hãy bật tính năng Đăng nhập bằng đường liên kết qua email (đăng nhập không cần mật khẩu) rồi nhấp vào Lưu.

  3. Thêm mã nhà cung cấp email vào danh sách FirebaseUI signInOptions cùng bằng đường liên kết email signInMethod.

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
      signInMethod: firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD
    }
  ],
  // Other config options...
});

  4. Khi hiển thị giao diện người dùng đăng nhập có điều kiện (liên quan đến các ứng dụng trang đơn), sử dụng ui.isPendingRedirect() để phát hiện xem URL có tương ứng với một lần đăng nhập hay không có đường liên kết email và giao diện người dùng cần được hiển thị để hoàn tất đăng nhập.

    // Is there an email link sign-in?
if (ui.isPendingRedirect()) {
  ui.start('#firebaseui-auth-container', uiConfig);
}
// This can also be done via:
if (firebase.auth().isSignInWithEmailLink(window.location.href)) {
  ui.start('#firebaseui-auth-container', uiConfig);
}

  5. Không bắt buộc: Bạn có thể sử dụng EmailAuthProvider để đăng nhập vào đường liên kết email định cấu hình để cho phép hoặc chặn người dùng hoàn tất đăng nhập trên nhiều thiết bị.

    Bạn có thể xác định lệnh gọi lại emailLinkSignIn không bắt buộc để trả về firebase.auth.ActionCodeSettings để sử dụng khi gửi liên kết. Điều này mang lại khả năng chỉ định cách xử lý đường liên kết, đường liên kết động tuỳ chỉnh, trạng thái bổ sung trong đường liên kết sâu, v.v. Khi không được cung cấp, hệ thống sẽ sử dụng URL hiện tại và một trang web chỉ có luồng được kích hoạt.

    Tính năng đăng nhập bằng đường liên kết email trong FirebaseUI-web tương thích với FirebaseUI – Android và FirebaseUI – iOS nơi một người dùng bắt đầu quy trình từ FirebaseUI-Android có thể mở đường liên kết và hoàn tất quy trình đăng nhập bằng FirebaseUI-web. Điều này cũng đúng với điều ngược lại luồng.

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
      signInMethod: firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD,
      // Allow the user the ability to complete sign-in cross device,
      // including the mobile apps specified in the ActionCodeSettings
      // object below.
      forceSameDevice: false,
      // Used to define the optional firebase.auth.ActionCodeSettings if
      // additional state needs to be passed along request and whether to open
      // the link in a mobile app if it is installed.
      emailLinkSignIn: function() {
        return {
          // Additional state showPromo=1234 can be retrieved from URL on
          // sign-in completion in signInSuccess callback by checking
          // window.location.href.
          url: 'https://www.example.com/completeSignIn?showPromo=1234',
          // Custom FDL domain.
          dynamicLinkDomain: 'example.page.link',
          // Always true for email link sign-in.
          handleCodeInApp: true,
          // Whether to handle link in iOS app if installed.
          iOS: {
            bundleId: 'com.example.ios'
          },
          // Whether to handle link in Android app if opened in an Android
          // device.
          android: {
            packageName: 'com.example.android',
            installApp: true,
            minimumVersion: '12'
          }
        };
      }
    }
  ]
});

Nhà cung cấp OAuth (Google, Facebook, Twitter và GitHub)

  1. Trong bảng điều khiển Firebase, hãy mở phần Xác thực rồi bật thông tin đăng nhập qua trình cung cấp OAuth được chỉ định. Đảm bảo OAuth tương ứng client ID và secret cũng được chỉ định.

  2. Ngoài ra, trong phần Xác thực, hãy đảm bảo miền nơi trang đăng nhập sẽ được hiển thị cũng sẽ được thêm vào danh sách các miền được cấp phép.

  3. Thêm mã nhà cung cấp OAuth vào danh sách FirebaseUI signInOptions.

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    // List of OAuth providers supported.
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    firebase.auth.TwitterAuthProvider.PROVIDER_ID,
    firebase.auth.GithubAuthProvider.PROVIDER_ID
  ],
  // Other config options...
});

  4. Không bắt buộc: Để chỉ định phạm vi tuỳ chỉnh hoặc thông số OAuth tuỳ chỉnh cho mỗi nhà cung cấp, bạn có thể chuyển một đối tượng thay vì chỉ chuyển giá trị nhà cung cấp:

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      scopes: [
        'https://www.googleapis.com/auth/contacts.readonly'
      ],
      customParameters: {
        // Forces account selection even when one account
        // is available.
        prompt: 'select_account'
      }
    },
    {
      provider: firebase.auth.FacebookAuthProvider.PROVIDER_ID,
      scopes: [
        'public_profile',
        'email',
        'user_likes',
        'user_friends'
      ],
      customParameters: {
        // Forces password re-entry.
        auth_type: 'reauthenticate'
      }
    },
    firebase.auth.TwitterAuthProvider.PROVIDER_ID, // Twitter does not support scopes.
    firebase.auth.EmailAuthProvider.PROVIDER_ID // Other providers don't need to be given as object.
  ]
});

Số điện thoại

  1. Trong bảng điều khiển Firebase, hãy mở phần Xác thực rồi bật đăng nhập bằng số điện thoại.

  2. Đảm bảo rằng miền nơi trang đăng nhập của bạn sẽ hiển thị cũng đã được thêm vào danh sách miền được uỷ quyền.

  3. Thêm mã nhà cung cấp số điện thoại vào danh sách FirebaseUI signInOptions.

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    firebase.auth.PhoneAuthProvider.PROVIDER_ID
  ],
  // Other config options...
});

  4. Không bắt buộc: Bạn có thể định cấu hình PhoneAuthProvider bằng reCAPTCHA tuỳ chỉnh tham số cho biết reCAPTCHA hiển thị hay ẩn (mặc định là bình thường). Tham khảo Tài liệu về API ReCAPTCHA để biết thêm chi tiết.

    Bạn cũng có thể đặt quốc gia mặc định để chọn trong mục nhập số điện thoại. Tham khảo danh sách mã quốc gia được hỗ trợ để xem danh sách mã đầy đủ. Nếu bạn không chỉ định, số điện thoại nhập vào sẽ được đặt mặc định thành Hoa Kỳ (+1).

    Các tùy chọn sau đây hiện được hỗ trợ.

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
      recaptchaParameters: {
        type: 'image', // 'audio'
        size: 'normal', // 'invisible' or 'compact'
        badge: 'bottomleft' //' bottomright' or 'inline' applies to invisible.
      },
      defaultCountry: 'GB', // Set default country to the United Kingdom (+44).
      // For prefilling the national number, set defaultNationNumber.
      // This will only be observed if only phone Auth provider is used since
      // for multiple providers, the NASCAR screen will always render first
      // with a 'sign in with phone number' button.
      defaultNationalNumber: '1234567890',
      // You can also pass the full phone number string instead of the
      // 'defaultCountry' and 'defaultNationalNumber'. However, in this case,
      // the first country ID that matches the country code will be used to
      // populate the country selector. So for countries that share the same
      // country code, the selected country may not be the expected one.
      // In that case, pass the 'defaultCountry' instead to ensure the exact
      // country is selected. The 'defaultCountry' and 'defaultNationaNumber'
      // will always have higher priority than 'loginHint' which will be ignored
      // in their favor. In this case, the default country will be 'GB' even
      // though 'loginHint' specified the country code as '+1'.
      loginHint: '+11234567890'
    }
  ]
});

Đăng nhập

Để bắt đầu quy trình đăng nhập FirebaseUI, hãy khởi chạy phiên bản FirebaseUI bằng cách truyền thực thể Auth cơ bản.

// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());

Xác định phần tử HTML sẽ hiển thị tiện ích đăng nhập FirebaseUI.

<!-- The surrounding HTML is left untouched by FirebaseUI.
     Your app may use that space for branding, controls and other customizations.-->
<h1>Welcome to My Awesome App</h1>
<div id="firebaseui-auth-container"></div>
<div id="loader">Loading...</div>

Chỉ định cấu hình FirebaseUI (được nhà cung cấp hỗ trợ và các cách tuỳ chỉnh giao diện người dùng cũng như lệnh gọi lại thành công, v.v.).

var uiConfig = {
  callbacks: {
    signInSuccessWithAuthResult: function(authResult, redirectUrl) {
      // User successfully signed in.
      // Return type determines whether we continue the redirect automatically
      // or whether we leave that to developer to handle.
      return true;
    },
    uiShown: function() {
      // The widget is rendered.
      // Hide the loader.
      document.getElementById('loader').style.display = 'none';
    }
  },
  // Will use popup for IDP Providers sign-in flow instead of the default, redirect.
  signInFlow: 'popup',
  signInSuccessUrl: '<url-to-redirect-to-on-success>',
  signInOptions: [
    // Leave the lines as is for the providers you want to offer your users.
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    firebase.auth.TwitterAuthProvider.PROVIDER_ID,
    firebase.auth.GithubAuthProvider.PROVIDER_ID,
    firebase.auth.EmailAuthProvider.PROVIDER_ID,
    firebase.auth.PhoneAuthProvider.PROVIDER_ID
  ],
  // Terms of service url.
  tosUrl: '<your-tos-url>',
  // Privacy policy url.
  privacyPolicyUrl: '<your-privacy-policy-url>'
};

Cuối cùng, hãy hiển thị giao diện Xác thực FirebaseUI:

// The start method will wait until the DOM is loaded.
ui.start('#firebaseui-auth-container', uiConfig);

Nâng cấp người dùng ẩn danh

Bật tính năng nâng cấp người dùng ẩn danh

Khi một người dùng ẩn danh đăng nhập hoặc đăng ký bằng một tài khoản vĩnh viễn, bạn cần để đảm bảo người dùng có thể tiếp tục những gì họ đang làm trước khi đăng ký. Để thực hiện việc này, chỉ cần đặt autoUpgradeAnonymousUsers thành true khi định cấu hình giao diện người dùng đăng nhập (tuỳ chọn này bị tắt theo mặc định).

Xử lý xung đột hợp nhất bản nâng cấp người dùng ẩn danh

Có những trường hợp khi người dùng, ban đầu đã đăng nhập ẩn danh, cố gắng nâng cấp cho người dùng Firebase hiện tại. Vì không thể liên kết một người dùng hiện có với người dùng khác người dùng hiện tại, FirebaseUI sẽ kích hoạt lệnh gọi lại signInFailure bằng một mã lỗi firebaseui/anonymous-upgrade-merge-conflict khi những điều trên xảy ra. Đối tượng lỗi cũng sẽ chứa thông tin đăng nhập vĩnh viễn. Đăng nhập bằng thông tin đăng nhập vĩnh viễn phải được kích hoạt trong lệnh gọi lại để hoàn tất quá trình đăng nhập. Trước khi có thể hoàn tất quy trình đăng nhập qua auth.signInWithCredential(error.credential), bạn phải lưu mã ẩn danh dữ liệu của người dùng và xoá người dùng ẩn danh đó. Sau khi đăng nhập xong, hãy sao chép trả lại dữ liệu cho người dùng không ẩn danh. Ví dụ dưới đây minh hoạ cách luồng nào sẽ hoạt động.

// Temp variable to hold the anonymous user data if needed.
var data = null;
// Hold a reference to the anonymous current user.
var anonymousUser = firebase.auth().currentUser;
ui.start('#firebaseui-auth-container', {
  // Whether to upgrade anonymous users should be explicitly provided.
  // The user must already be signed in anonymously before FirebaseUI is
  // rendered.
  autoUpgradeAnonymousUsers: true,
  signInSuccessUrl: '<url-to-redirect-to-on-success>',
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    firebase.auth.EmailAuthProvider.PROVIDER_ID,
    firebase.auth.PhoneAuthProvider.PROVIDER_ID
  ],
  callbacks: {
    // signInFailure callback must be provided to handle merge conflicts which
    // occur when an existing credential is linked to an anonymous user.
    signInFailure: function(error) {
      // For merge conflicts, the error.code will be
      // 'firebaseui/anonymous-upgrade-merge-conflict'.
      if (error.code != 'firebaseui/anonymous-upgrade-merge-conflict') {
        return Promise.resolve();
      }
      // The credential the user tried to sign in with.
      var cred = error.credential;
      // Copy data from anonymous user to permanent user and delete anonymous
      // user.
      // ...
      // Finish sign-in after data is copied.
      return firebase.auth().signInWithCredential(cred);
    }
  }
});

Các bước tiếp theo

  • Để biết thêm thông tin về cách sử dụng và tuỳ chỉnh FirebaseUI, hãy truy cập vào README.
  • Nếu bạn phát hiện vấn đề trong FirebaseUI và muốn báo cáo vấn đề đó, hãy sử dụng Công cụ theo dõi lỗi GitHub.