Xác thực bằng OpenID Connect trong ứ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, bạn có thể xác thực người dùng của mình bằng 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ợ nguyên bản.

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:

  • ID khách hàng : Một chuỗi duy nhất của 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 nhau cho mỗi 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 trong mã thông báo ID do nhà cung cấp của bạn phát hành.

  • Bí mật khách hàng : 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 khách hàng. Đố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ỉ được yêu cầu nếu bạn đang sử dụng luồng mã xác thực , điều này thực sự được khuyến khích.)

  • Nhà 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 mà khi được thêm vào /.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 nhà phát hành là https://auth.example.com thì tài liệu khám phá phải có sẵn 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 đã nâng cấp.

  3. Trên trang Nhà cung cấp đăng nhập của bảng điều khiển Firebase, hãy 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 quyền tiềm ẩn .

    Bạn nên luôn sử dụng luồng mã nếu nhà cung cấp của bạn hỗ trợ nó . Luồng ngầm kém an toàn hơn và việc sử dụng nó hoàn toà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 cũng như chuỗi nhà 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 đã 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 nhà cung cấp OIDC là xử lý toàn bộ luồng đă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 phiên bản của OAuthProvider bằng ID nhà cung cấp 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 bằng 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 phạm vi OAuth 2.0 bổ sung ngoài hồ sơ 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.

    Luồng 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() :

    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ể nhận được 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 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 luồng đăng nhập, 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 tại bằng cách sử dụng linkWithRedirect() và linkWithPopup() và 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 xác thực mới cho các hoạt động nhạy cảm yêu cầu đăng nhập gần đây.

Xử lý luồng đăng nhập theo cách thủ công

Nếu đã triển khai luồng đăng nhập OpenID Connect trong ứng dụng của mình, bạn có thể sử dụng mã thông báo ID trực tiếp để 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.
    });