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

Nếu đã nâng cấp lên Xác thực Firebase với Nền tảng nhận dạng, thì bạn có thể xác thực người dùng của mình với Firebase bằng cách sử dụng nhà cung cấp tuân thủ OpenID Connect (OIDC) mà bạn chọn. Điều này cho phép sử dụng các nhà cung cấp danh tính không được Firebase hỗ trợ.

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:

  • Client ID : 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ủa bạn có thể chỉ định cho bạn một ID khách hàng khác cho từng nền tảng mà bạn hỗ trợ. Đây là một trong những giá trị của yêu cầu aud bằng mã thông báo ID do nhà cung cấp của bạn cấp.

  • Bí mật ứ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 ID ứng dụng khách. Đối với mỗi ID khách hàng, bạn sẽ cần một bí mật khách hàng phù hợp. (Giá trị này chỉ bắt buộc nếu bạn đang sử dụng luồng mã xác thực , điều này rất được khuyến khích.)

  • Tổ chức 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 nối với /.well-known/openid-configuration , 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 , tài liệu khám phá phải có tại https://auth.example.com/.well-known/openid-configuration .

Sau khi bạn 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 của bạn .

  2. Nếu bạn chưa nâng cấp lên Xác thực Firebase với Nền tảng nhận dạng, hãy làm như vậy. Xác thực OpenID Connect chỉ khả dụng trong các dự án được 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, nhấp vào Thêm nhà cung cấp mới rồi nhấp vào Kết nối OpenID .

  4. Chọn xem bạn sẽ sử dụng luồng mã ủy quyền hay luồng cấp phép ẩn .

    Bạn nên luôn sử dụng dòng mã nếu nhà cung cấp của bạn hỗ trợ . Luồng ẩn kém an toàn hơn và việc sử dụng nó không được khuyến khích.

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

  6. Chỉ định ID khách hàng và bí mật khách hàng của bạn và chuỗi công ty phát hành của nhà cung cấp của bạn. 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 của bạn đã chỉ định cho bạn.

  7. Lưu các thay đổi của bạn.

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

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

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

  1. Tạo một phiên bản của OAuthProvider bằng cách sử dụng ID nhà cung cấp mà bạn có trong bảng điều khiển Firebase.

    API mô-đun web

    import { OAuthProvider } from "firebase/auth";

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

    API không gian tên web

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

  2. Tùy chọn : Chỉ định các tham số OAuth tùy chỉnh bổ sung mà bạn muốn gửi cùng với yêu cầu OAuth.

    API mô-đun web

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

    API không gian tên web

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

    Kiểm tra với nhà cung cấp của bạn để biết các thông số mà nó hỗ trợ. Lưu ý rằng bạn không thể chuyển các tham số bắt buộc của Firebase với setCustomParameters . Các tham số này là client_id , response_type , redirect_uri , state , scope và response_mode .

  3. Tùy chọn : Chỉ định các phạm vi OAuth 2.0 bổ sung ngoài cấu hình cơ bản mà bạn muốn yêu cầu từ nhà cung cấp xác thực.

    API mô-đun web

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

    API không gian tên web

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

    Kiểm tra với nhà cung cấp của bạn để biết phạm vi mà nó hỗ trợ.

  4. Xác thực với Firebase bằng đối tượng 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.

    Chuyển hướng luồng

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

    API mô-đun web

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

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

    API không gian tên web

    firebase.auth().signInWithRedirect(provider);

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

    API mô-đun 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.
  });

    API không gian tên 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

    API mô-đun 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.
  });

    API không gian tên 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 các luồng đă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() cũng như xác thực lại người dùng bằng reauthenticateWithRedirect() và reauthenticateWithPopup() , có thể được sử dụng để truy xuất thông tin đăng nhập mới cho các hoạt động nhạy cảm yêu cầu đăng nhập gần đây.

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

Nếu bạn đã triển khai luồng đăng nhập OpenID Connect trong ứng dụng của mình, thì bạn có thể sử dụng trực tiếp mã thông báo ID để xác thực với Firebase:

API mô-đun 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.
    });

API không gian tên 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.
    });