Xác thực bằng SSO Connect trong các ứng dụng web

Nếu đã nâng cấp lên Firebase Authentication with Identity Platform, bạn có thể xác thực người dùng bằng Firebase thông qua nhà cung cấp tuân thủ OpenID Connect (OIDC) mà bạn chọn. Điều này giúp bạn có thể sử dụng các nhà cung cấp danh tính không được Firebase hỗ trợ theo mặc định.

Trước khi bắt đầu

Để đăng nhập người dùng bằng nhà cung cấp OIDC, trước tiên, bạn phải thu thập một số thông tin từ nhà cung cấp:

  • Mã ứng dụng: Một chuỗi duy nhất cho nhà cung cấp để xác định ứng dụng của bạn. Nhà cung cấp có thể chỉ định cho bạn một mã ứng dụng khác cho mỗi nền tảng mà bạn hỗ trợ. Đây là một trong các giá trị của khai báo aud trong mã nhận dạng do nhà cung cấp của bạn phát hành.

  • Khoá bí mật của ứng dụng khách: Một chuỗi bí mật mà nhà cung cấp sử dụng để xác nhận quyền sở hữu mã ứng dụng khách. Đối với mỗi mã ứng dụng khách, bạn sẽ cần một khoá bí mật tương ứng của ứng dụng khách. (Bạn chỉ cần cung cấp giá trị này nếu đang sử dụng quy trình mã uỷ quyền. Bạn nên sử dụng quy trình này.)

  • Đơn vị phát hành: Một chuỗi xác định nhà cung cấp của bạn. Giá trị này phải là một URL. Khi được thêm vào /.well-known/openid-configuration, URL này sẽ là vị trí của tài liệu khám phá OIDC của nhà cung cấp. Ví dụ: nếu tổ chức phát hành là https://auth.example.com, thì tài liệu khám phá phải có tại https://auth.example.com/.well-known/openid-configuration.

Sau khi có thông tin trên, hãy bật OpenID Connect làm nhà cung cấp dịch vụ đăng nhập cho dự án Firebase của bạn:

  1. Thêm Firebase vào dự án JavaScript.

  2. Nếu chưa nâng cấp lên Firebase Authentication with Identity Platform, hãy nâng cấp. Xác thực OpenID Connect chỉ có trong các dự án đã nâng cấp.

  3. Trên trang Nhà cung cấp dịch vụ đăng nhập của bảng điều khiển Firebase, hãy nhấp vào Thêm nhà cung cấp dịch vụ mới, rồi nhấp vào OpenID Connect.

  4. Chọn xem bạn sẽ sử dụng quy trình mã uỷ quyền hay quy trình cấp ngầm định.

    Bạn phải luôn sử dụng luồng mã nếu nhà cung cấp của bạn hỗ trợ luồng này. Luồng ngầm định ít an toàn hơn và bạn không nên sử dụng luồng này.

  5. Đặt tên cho nhà cung cấp này. Lưu ý mã nhận dạng nhà cung cấp đã được tạo: chẳng hạn như oidc.example-provider. Bạn sẽ cần mã nhận dạng này khi thêm mã đăng nhập vào ứng dụng.

  6. Chỉ định mã ứng dụng khách và khoá bí mật của ứng dụng khách, cũng như chuỗi phát hành của nhà cung cấp. Các giá trị này phải khớp chính xác với các giá trị mà nhà cung cấp đã chỉ định cho bạn.

  7. Lưu thay đổi.

Xử lý quy trình đăng nhập bằng Firebase SDK

Cách dễ nhất để xác thực người dùng bằng Firebase thông qua nhà cung cấp OIDC là xử lý toàn bộ quy trình đăng nhập bằng Firebase SDK.

Để xử lý quy trình đăng nhập bằng SDK JavaScript của Firebase, hãy làm theo các bước sau:

  1. Tạo một phiên bản OAuthProvider bằng mã nhận dạng nhà cung cấp mà bạn nhận được trong bảng điều khiển của Firebase.

    Web 

    import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('oidc.example-provider');

    Web 

    var provider = new firebase.auth.OAuthProvider('oidc.example-provider');

  2. Không bắt buộc: Chỉ định các tham số OAuth tuỳ chỉnh bổ sung mà bạn muốn gửi cùng với yêu cầu OAuth.

    Web 

    provider.setCustomParameters({
  // Target specific email with login hint.
  login_hint: 'user@example.com'
});

    Web 

    provider.setCustomParameters({
  // Target specific email with login hint.
  login_hint: 'user@example.com'
});

    Hãy liên hệ với nhà cung cấp của bạn để biết các thông số mà họ hỗ trợ. Xin lưu ý rằng bạn không thể truyền các tham số bắt buộc của Firebase bằng setCustomParameters. Các tham số này là client_id, response_type, redirect_uri, state, scope và response_mode.

  3. Không bắt buộc: Chỉ định các phạm vi OAuth 2.0 khác ngoài hồ sơ cơ bản mà bạn muốn yêu cầu từ nhà cung cấp dịch vụ xác thực.

    Web 

    provider.addScope('mail.read');
provider.addScope('calendars.read');

    Web 

    provider.addScope('mail.read');
provider.addScope('calendars.read');

    Hãy liên hệ với nhà cung cấp của bạn để biết các phạm vi mà nhà cung cấp hỗ trợ.

  4. Xác thực bằng Firebase thông qua đối tượng trình cung cấp OAuth.

    Bạn có thể chuyển hướng người dùng đến trang đăng nhập của nhà cung cấp hoặc mở trang đăng nhập trong cửa sổ trình duyệt bật lên.

    Quy trình chuyển hướng

    Chuyển hướng đến trang đăng nhập của nhà cung cấp bằng cách gọi signInWithRedirect():

    Web 

    import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);

    Web 

    firebase.auth().signInWithRedirect(provider);

    Sau khi người dùng hoàn tất quy trình đăng nhập và quay lại ứng dụng của bạn, bạn có thể nhận được kết quả đăng nhập bằng cách gọi getRedirectResult().

    Web 

    import { getAuth, getRedirectResult, OAuthProvider } from "firebase/auth";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    // User is signed in.
    // IdP data available in result.additionalUserInfo.profile.

    // Get the OAuth access token and ID Token
    const credential = OAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;
    const idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });

    Web 

    firebase.auth().getRedirectResult()
  .then((result) => {
    // IdP data available in result.additionalUserInfo.profile.
    // ...

    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // OAuth access and id tokens can also be retrieved:
    var accessToken = credential.accessToken;
    var idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });

    Luồng cửa sổ bật lên

    Web 

    import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // User is signed in.
    // IdP data available using getAdditionalUserInfo(result)

    // Get the OAuth access token and ID Token
    const credential = OAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;
    const idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });

    Web 

    firebase.auth().signInWithPopup(provider)
  .then((result) => {
    // IdP data available in result.additionalUserInfo.profile.
    // ...

    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // OAuth access and id tokens can also be retrieved:
    var accessToken = credential.accessToken;
    var idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });

  5. Mặc dù các ví dụ trên tập trung vào quy trình đăng nhập, nhưng bạn có thể sử dụng cùng một mẫu để liên kết nhà cung cấp OIDC với người dùng hiện có bằng cách sử dụng linkWithRedirect() và linkWithPopup(), đồng thời xác thực lại người dùng bằng reauthenticateWithRedirect() và reauthenticateWithPopup(). Bạn có thể sử dụng các mẫu này để truy xuất thông tin đăng nhập mới cho các thao tác nhạy cảm đòi hỏi phải đăng nhập gần đây.

Xử lý quy trình đăng nhập theo cách thủ công

Nếu đã triển khai quy trình đăng nhập OpenID Connect trong ứng dụng, bạn có thể sử dụng trực tiếp mã thông báo nhận dạng để xác thực bằng Firebase:

Web 

import { getAuth, signInWithCredential, OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
    idToken: idToken,
});
signInWithCredential(getAuth(), credential)
    .then((result) => {
        // User is signed in.
        // IdP data available in result.additionalUserInfo.profile.

        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
    })
    .catch((error) => {
        // Handle error.
    });

Web 

const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
    idToken: idToken,
});
firebase.auth().signInWithCredential(credential)
    .then((result) => {
        // User is signed in.
        // IdP data available in result.additionalUserInfo.profile.

        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
    })
    .catch((error) => {
        // Handle error.
    });